vercel-labsagent-skills-6ec269328bc400712ee225a173a14b6b29128df7Coding & ReviewJavaScript34K2.9KOpen sourceUpdated 7 days agoReview 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".
·
Install with your agent
Paste this prompt into your agent. It reads this page and does the setup for you.
Read https://aiagentslisting.com/skill/web-design-guidelines-vercel to learn what the "Web Design Guidelines (Vercel)" skill does and how to install it. Install it for my coding agent as documented on that page, then confirm the skill is available and summarize what it can do.Agents can also browse this directory over MCP at https://aiagentslisting.com/api/mcp
Install manually
Claude Code
- Run the install command below in your terminal.
- The skill files land in your ~/.claude/skills directory, laid out as shown.
- Restart Claude Code or start a new session. Skills are discovered on startup.
git clone --depth 1 https://github.com/vercel-labs/agent-skills.git /tmp/web-design-guidelines-vercel
mkdir -p ~/.claude/skills
cp -r /tmp/web-design-guidelines-vercel/skills/web-design-guidelines ~/.claude/skills/web-design-guidelines-vercel
rm -rf /tmp/web-design-guidelines-vercel~/.claude/skills/web-design-guidelines-vercel
└── SKILL.mdFor a single project, put the folder in .claude/skills inside the repo instead.
Any other agent
- Clone the repository with the command below.
- Copy the skill folder into the directory your agent loads skills from.
git clone --depth 1 https://github.com/vercel-labs/agent-skills.gitWeb 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
- 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.mdUse WebFetch to retrieve the latest rules. The fetched content contains all the rules and output format instructions.
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.
This skill ships no extra files.
Alternatives to Web Design Guidelines (Vercel)
View all in Coding & Review
Production-grade engineering skills for AI coding agents.
Audit generated UI against pinned design rules and write code-linked fix plans.
agent-skills-6ec269328bc400712ee225a173a14b6b29128df7Agent Skills 6ec269328bc400712ee225a173a14b6b29128df7Release notesagent-skills-1a2c79d4e6c4a2283dc2c614b6538cbe1ed5ca62Agent Skills 1a2c79d4e6c4a2283dc2c614b6538cbe1ed5ca62Release notesagent-skills-063bee94c3f4df8453406c830b0a7df0f2860278Agent Skills 063bee94c3f4df8453406c830b0a7df0f2860278Release notesagent-skills-20e89cc4bb256eb7b1fcbdc68f7175284709a847Agent Skills 20e89cc4bb256eb7b1fcbdc68f7175284709a847Release notesagent-skills-dd089a8c752c966dee8bf0f27cb625ba193ffd9eAgent Skills dd089a8c752c966dee8bf0f27cb625ba193ffd9eRelease notes
Send this prompt to your agent to leave a review
Connect to the AI Agents Listing MCP server at https://aiagentslisting.com/api/mcp using the HTTP transport and complete the sign-in when it asks. Then call the submit_review tool for the listing "web-design-guidelines-vercel" with a rating from 1 to 5 and a short note on what worked and what did not.No reviews yet
Be the first to share your experience with this tool.
Related Skills
Production-grade engineering skills for AI coding agents.
Coding & Review
Audit generated UI against pinned design rules and write code-linked fix plans.
Design & Media
Subscribe to our newsletter
One email a week. New agents, MCP servers and skills, and what is actually getting traction.