web-design-guidelines▌
supercent-io/skills-template · updated May 17, 2026
MDX-style export adds YAML metadata + attribution linking explainx.ai and this canonical listing URL.
Automated UI code review against Vercel's Web Interface Guidelines.
- ›Fetches the latest guidelines from the official Vercel repository before each review to ensure current rule compliance
- ›Analyzes React, Vue, Svelte, HTML, CSS, and JavaScript/TypeScript files against all fetched rules
- ›Reports violations in file:line format with actionable feedback on how to fix each issue
- ›Supports file paths and glob patterns for flexible scope selection across projects
Web Interface Guidelines Review
Review files for compliance with Vercel's Web Interface Guidelines.
When to use this skill
- UI code review: check compliance with Web Interface Guidelines
- Accessibility check: when asked "check accessibility"
- Design audit: when asked "audit design"
- UX review: when asked "review UX"
- Best practices review: when asked "check my site against best practices"
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
- Output findings in the terse
file:lineformat
Guidelines Source
Fetch fresh guidelines before each review:
https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md
Use WebFetch to retrieve the latest rules. The fetched content contains all the rules and output format instructions.
Instructions
Step 1: Fetch Guidelines
Use WebFetch:
WebFetch URL: https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md
Prompt: "Extract all UI rules and guidelines"
Step 2: Analyze Files
Read and analyze the files or patterns provided by the user.
Files to analyze:
- React/Vue/Svelte components
- HTML files
- CSS/SCSS files
- TypeScript/JavaScript files
Step 3: Apply Rules
Apply all rules from the fetched guidelines to the files and output violations.
Input Format
Required info
- File or pattern: file path or glob pattern to review
Input examples
Review my UI code:
- File: src/components/Button.tsx
Check accessibility:
- Pattern: src/**/*.tsx
Output Format
Follow the format specified in the guidelines (typically file:line):
src/components/Button.tsx:15 - Button should have aria-label for icon-only buttons
src/components/Modal.tsx:42 - Modal should trap focus within itself
src/pages/Home.tsx:8 - Main content should be wrapped in <main> element
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.
Constraints
Required Rules (MUST)
- Use latest guidelines: fetch fresh guidelines from the source URL for every review
- Apply all rules: check every rule from the fetched guidelines
- Accurate locations: specify violation locations in
file:lineformat
Prohibited (MUST NOT)
- Use stale cache: always fetch the latest guidelines
- Partial check: do not apply only some rules
Best practices
- Limit file scope: be careful about context overflow when reviewing too many files at once
- Prioritize: report critical issues first
- Suggest fixes: include how to fix along with each violation
References
Metadata
Version
- Current version: 1.0.0
- Last updated: 2026-01-22
- Supported platforms: Claude, ChatGPT, Gemini
- Source: vercel/agent-skills
Related Skills
- web-accessibility: WCAG accessibility implementation
- ui-component-patterns: UI component patterns
Tags
#UI #review #web-interface #guidelines #vercel #design-audit #UX #frontend
How to use web-design-guidelines on Cursor
AI-first code editor with Composer
Prerequisites
Before installing skills in Cursor, ensure your development environment meets these requirements:
- ›Cursor installed and configured on your development machine
- ›Node.js version 16.0+ with npm package manager (verify with
node --version) - ›Active project directory or workspace where you want to add web-design-guidelines
Execute installation command
Execute the skills CLI command in your project's root directory to begin installation:
The skills CLI fetches web-design-guidelines from GitHub repository supercent-io/skills-template and configures it for Cursor.
Select Cursor when prompted
The CLI will show a list of available agents. Use arrow keys to navigate and space to select Cursor:
Verify installation
Confirm successful installation by checking the skill directory location:
Reload or restart Cursor to activate web-design-guidelines. Access the skill through slash commands (e.g., /web-design-guidelines) or your agent's skill management interface.
Security & Verification Notice
We perform automated surface-level scans (Gen AI Scanner, Socket, Snyk) during installation. These checks detect common vulnerabilities but do not guarantee complete security. Always review skill source code and verify the publisher's reputation before production use.
Skills execute code in your development environment. Always verify the publisher's identity, review recent commits, and test in isolated environments before production deployment.
List & Monetize Your Skill
Submit your Claude Code skill and start earning
Use Cases▌
Task Automation & Efficiency
Automate repetitive workflows and reduce manual effort
Example
Generate reports, summarize documents, draft communications
Save 3-5 hours per week on routine tasks
Knowledge Enhancement
Learn new skills, understand complex topics, get expert guidance
Example
Explain concepts, provide examples, suggest learning resources
Accelerate learning and skill development by 2x
Quality Improvement
Enhance output quality through reviews, suggestions, and refinements
Example
Review drafts, suggest improvements, catch errors
Improve work quality by 30-40% with less effort
Implementation Guide▌
Prerequisites
- ›Claude Desktop or compatible AI client with skill support
- ›Clear understanding of task or problem to solve
- ›Willingness to iterate and refine outputs
Time Estimate
15-45 minutes depending on use case complexity
Installation Steps
- 1.Install skill using provided installation command
- 2.Test with simple use case relevant to your work
- 3.Evaluate output quality and relevance
- 4.Iterate on prompts to improve results
- 5.Integrate into regular workflow if valuable
Common Pitfalls
- ⚠Expecting perfect results without iteration
- ⚠Not providing enough context in prompts
- ⚠Using skill for tasks outside its intended scope
- ⚠Accepting outputs without review and validation
Best Practices▌
✓ Do
- +Start with clear, specific prompts
- +Provide relevant context and constraints
- +Review and refine all outputs before using
- +Iterate to improve output quality
- +Document successful prompt patterns
✗ Don't
- −Don't use without understanding skill limitations
- −Don't skip validation of outputs
- −Don't share sensitive information in prompts
- −Don't expect skill to replace human judgment
💡 Pro Tips
- ★Be specific about desired format and style
- ★Ask for multiple options to choose from
- ★Request explanations to understand reasoning
- ★Combine AI efficiency with human expertise
When to Use This▌
✓ 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.
Learning Path▌
- 1Familiarize yourself with skill capabilities and limitations
- 2Start with low-risk, non-critical tasks
- 3Progress to more complex and valuable use cases
- 4Build expertise through regular use and experimentation
Discussion
Product Hunt–style comments (not star reviews)- No comments yet — start the thread.
Ratings
4.5★★★★★63 reviews- ★★★★★Diya Ndlovu· Dec 28, 2024
web-design-guidelines fits our agent workflows well — practical, well scoped, and easy to wire into existing repos.
- ★★★★★Naina Thomas· Dec 28, 2024
Useful defaults in web-design-guidelines — fewer surprises than typical one-off scripts, and it plays nicely with `npx skills` flows.
- ★★★★★Meera Robinson· Dec 24, 2024
web-design-guidelines has been reliable in day-to-day use. Documentation quality is above average for community skills.
- ★★★★★Omar Agarwal· Dec 24, 2024
Registry listing for web-design-guidelines matched our evaluation — installs cleanly and behaves as described in the markdown.
- ★★★★★Pratham Ware· Dec 20, 2024
Useful defaults in web-design-guidelines — fewer surprises than typical one-off scripts, and it plays nicely with `npx skills` flows.
- ★★★★★Kofi Martin· Dec 8, 2024
web-design-guidelines has been reliable in day-to-day use. Documentation quality is above average for community skills.
- ★★★★★Meera Garcia· Dec 4, 2024
Registry listing for web-design-guidelines matched our evaluation — installs cleanly and behaves as described in the markdown.
- ★★★★★Soo Torres· Dec 4, 2024
Solid pick for teams standardizing on skills: web-design-guidelines is focused, and the summary matches what you get after install.
- ★★★★★Hiroshi Ghosh· Nov 27, 2024
web-design-guidelines fits our agent workflows well — practical, well scoped, and easy to wire into existing repos.
- ★★★★★Zara Ghosh· Nov 23, 2024
We added web-design-guidelines from the explainx registry; install was straightforward and the SKILL.md answered most questions upfront.
showing 1-10 of 63