Audit UI code against Vercel's Web Interface Guidelines for design and accessibility compliance.
Automate repetitive workflows and reduce manual effort
Example: Generate reports, summarize documents, draft communications
Save 3-5 hours per week on routine tasks
Learn new skills, understand complex topics, get expert guidance
Example: Explain concepts, provide examples, suggest learning resources
Accelerate learning and skill development by 2x
Enhance output quality through reviews, suggestions, and refinements
Example: Review drafts, suggest improvements, catch errors
Improve work quality by 30-40% with less effort
Time estimate: 15-45 minutes depending on use case complexity
Prerequisites
Submit your Claude Code skill and start earning
epx add vercel-labs/agent-skills --skill web-design-guidelinesCompatible with
Supported agents
Fetches the latest guidelines from a remote source before each review, ensuring rules stay current
Accepts file paths or patterns as arguments; prompts for files if none provided
Outputs findings in a terse file:line format for quick scanning and remediation
Covers design, accessibility, and UX best practices as defined in the guidelines repository
1c:["$","div",null,{"className":"prose prose-invert max-w-none prose-headings:font-semibold prose-headings:tracking-tight prose-h1:text-4xl prose-h1:mb-2 prose-h2:text-2xl prose-h2:mb-2 prose-h3:text-lg prose-h3:mb-2 prose-p:text-muted-foreground prose-li:text-muted-foreground prose-code:bg-muted prose-code:text-foreground prose-code:px-1 prose-code:py-0.5 prose-code:rounded-sm prose-code:text-sm prose-code:before:content-none prose-code:after:content-none prose-pre:bg-muted prose-pre:text-foreground prose-pre:border prose-pre:border-border prose-pre:rounded-md [&_table]:!border-[color:var(--border)] [&_th]:!border-[color:var(--border)] [&_td]:!border-[color:var(--border)]","dangerouslySetInnerHTML":{"__html":"<p><strong>Audit UI code against Vercel's Web Interface Guidelines for design and accessibility compliance.</strong></p>\n<ul>\n<li>Fetches the latest guidelines from a remote source before each review, ensuring rules stay current</li>\n<li>Accepts file paths or patterns as arguments; prompts for files if none provided</li>\n<li>Outputs findings in a terse <code>file:line</code> format for quick scanning and remediation</li>\n<li>Covers design, accessibility, and UX best practices as defined in the guidelines repository</li>\n</ul>"}}] 23:T480,<h1>Web Interface Guidelines</h1>
<p>Review files for compliance with Web Interface Guidelines.</p> <h2>How It Works</h2> <ol> <li>Fetch the latest guidelines from the source URL below</li> <li>Read the specified files (or prompt user for files/pattern)</li> <li>Check against all rules in the fetched guidelines</li> <li>Output findings in the terse <code>file:line</code> format</li> </ol> <h2>Guidelines Source</h2> <p>Fetch fresh guidelines before each review:</p> <pre class="language-text"><code class="language-text code-highlight"><span class="code-line">https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md </span></code></pre> <p>Use WebFetch to retrieve the latest rules. The fetched content contains all the rules and output format instructions.</p> <h2>Usage</h2> <p>When a user provides a file or pattern argument:</p> <ol> <li>Fetch guidelines from the source URL above</li> <li>Read the specified files</li> <li>Apply all rules from the fetched guidelines</li> <li>Output findings using the format specified in the guidelines</li> </ol> <p>If no files specified, ask the user which files to review.</p>1d:["$","div",null,{"className":"prose prose-invert max-w-none prose-headings:font-semibold prose-headings:tracking-tight prose-h1:text-4xl prose-h1:mb-2 prose-h2:text-2xl prose-h2:mb-2 prose-h3:text-lg prose-h3:mb-2 prose-p:text-muted-foreground prose-li:text-muted-foreground prose-code:bg-muted prose-code:text-foreground prose-code:px-1 prose-code:py-0.5 prose-code:rounded-sm prose-code:text-sm prose-code:before:content-none prose-code:after:content-none prose-pre:bg-muted prose-pre:text-foreground prose-pre:border prose-pre:border-border prose-pre:rounded-md [&_table]:!border-[color:var(--border)] [&_th]:!border-[color:var(--border)] [&_td]:!border-[color:var(--border)]","dangerouslySetInnerHTML":{"__html":"$23"}}] 18:[["$","meta","0",{"charSet":"utf-8"}],["$","meta","1",{"name":"viewport","content":"width=device-width, initial-scale=1"}]] 16:nullAI-first code editor with Composer
Before installing skills in Cursor, ensure your development environment meets these requirements:
node --versionweb-design-guidelinesExecute the skills CLI command in your project's root directory to begin installation:
epx add vercel-labs/agent-skills --skill web-design-guidelinesFetches web-design-guidelines from vercel-labs/agent-skills and configures it for Cursor.
The CLI shows a list of agents. Use arrow keys and space to select Cursor:
Confirm successful installation by checking the skill directory location:
.cursor/skills/web-design-guidelines
Restart Cursor to activate web-design-guidelines. Access via /web-design-guidelinesin your agent's command palette.
Learn more:View source on GitHubSkills CLI docsAbout CursorWhat are agent skills?
Steps
Common Pitfalls
✓ Do
✗ Don't
💡 Pro Tips
✓ Use when
Use when skill capabilities match your task, clear ROI on time saved, and you can validate outputs. Best for repetitive tasks, learning, and quality improvement.
✗ Avoid when
Avoid when task requires deep expertise you can't validate, involves sensitive decisions, or when learning process is more valuable than speed of completion.
frontend-ui-ux
code-yeongyu/oh-my-opencode · Frontend · tag: frontend
react-vite-best-practices
asyrafhussin/agent-skills · Frontend · tag: react
react-native
jezweb/claude-skills · Frontend · tag: react
react-code-review
giuseppe-trisciuoglio/developer-kit · Frontend · tag: react
frontend-design
pbakaus/impeccable · Frontend · tag: frontend
react-query
mindrally/skills · Frontend · tag: react
web-design-guidelines reduced setup friction for our internal harness; good balance of opinion and flexibility.
web-design-guidelines is among the better-maintained entries we tried; worth keeping pinned for repeat workflows.
Keeps context tight: web-design-guidelines is the kind of skill you can hand to a new teammate without a long onboarding doc.
Solid pick for teams standardizing on skills: web-design-guidelines is focused, and the summary matches what you get after install.
web-design-guidelines has been reliable in day-to-day use. Documentation quality is above average for community skills.
Keeps context tight: web-design-guidelines is the kind of skill you can hand to a new teammate without a long onboarding doc.
web-design-guidelines is among the better-maintained entries we tried; worth keeping pinned for repeat workflows.
web-design-guidelines fits our agent workflows well — practical, well scoped, and easy to wire into existing repos.
We added web-design-guidelines from the explainx registry; install was straightforward and the SKILL.md answered most questions upfront.
Useful defaults in web-design-guidelines — fewer surprises than typical one-off scripts, and it plays nicely with `npx skills` flows.
showing 1-10 of 45