web-design-guidelines

Q: How do I install web-design-guidelines?

Run npx skills add https://github.com/laguagu/claude-code-nextjs-skills --skill web-design-guidelines in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/web-design-guidelines/ (personal) or .claude/skills/web-design-guidelines/ (project).

by laguaguFrontend & Design

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".

Installs: 187
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/laguagu/claude-code-nextjs-skills --skill web-design-guidelines

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads web-design-guidelines automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Web Interface Guidelines

Review files for compliance with Web Interface Guidelines.

How It Works

Fetch the latest guidelines from the source URL below
Read the specified files (or prompt user for files/pattern)
Check against all rules in the fetched guidelines

As of 2026-10-11, command.md omits some accessibility checks; for accessibility reviews also check contrast (WCAG 2.2 AA: text 4.5:1, large text and required non-text UI contrast 3:1, with applicable exceptions), status not shown by colour alone, target size (WCAG 2.5.8: >=24 by 24 CSS px with its exceptions; 44px on touch is advisory), mobile input font-size >=16px, and focus moving into and back from modal dialogs per the APG dialog pattern.
Output findings in the terse file:line format

Guidelines Source

Fetch fresh guidelines before each review:

https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md

Retrieve the complete rules with an available web or shell tool. A fetch tool that returns a summary (such as Claude Code's WebFetch) may omit rules; when the shell has network access, curl the raw URL instead. Without web access, use the pinned snapshot references/command.md and say in the review that it used the snapshot and its date.

Usage

When a user provides a file or pattern argument:

Fetch guidelines from the source URL above
Read the specified files
Apply all rules from the fetched guidelines
Output findings using the format specified in the guidelines

If no files specified, ask the user which files to review.

FAQ

What does the web-design-guidelines skill do?

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".

How do I install web-design-guidelines?

Run npx skills add https://github.com/laguagu/claude-code-nextjs-skills --skill web-design-guidelines in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/web-design-guidelines/ (personal) or .claude/skills/web-design-guidelines/ (project).

Which AI agents can use web-design-guidelines?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is web-design-guidelines safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains web-design-guidelines?

It is published by laguagu in laguagu/claude-code-nextjs-skills. It has 187 recorded installs.