Web Design Guidelines
Helps with web development, design, guidelines as part of building frontend UIs and user experiences workflows.
Install on your platform
We auto-selected Claude Code based on this skill’s supported platforms.
Run in terminal (recommended)
claude mcp add connorads-web-design-guidelines npx -- -y @trustedskills/connorads-web-design-guidelines
Or manually add to ~/.claude/settings.json
{
"mcpServers": {
"connorads-web-design-guidelines": {
"command": "npx",
"args": [
"-y",
"@trustedskills/connorads-web-design-guidelines"
]
}
}
}Requires Claude Code (claude CLI). Run claude --version to verify your install.
About This Skill
What it does
This skill helps AI agents review files for compliance with web interface guidelines. It fetches the latest guidelines from a specified URL, reads user-provided files or prompts the user to select files, and then checks those files against the rules outlined in the guidelines. The results are presented in a "file:line" format.
When to use it
- When ensuring new web UI components adhere to established design standards.
- During code reviews for frontend development projects.
- To proactively identify potential guideline violations in existing codebase.
- When needing to quickly assess the compliance of multiple files against a set of web interface rules.
Key capabilities
- Fetches guidelines from
https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md. - Reads specified files or prompts user for file selection.
- Checks files against the fetched guidelines.
- Outputs findings in a "file:line" format, as defined by the guidelines.
Example prompts
- “Review
src/components/Button.jsagainst the web interface guidelines.” - “Check all
.jsxfiles in thepagesdirectory for guideline compliance.” - “What files should I review based on the current web interface guidelines?”
Tips & gotchas
- The skill requires access to the internet via a tool like WebFetch to retrieve the latest guidelines.
- The output format is strictly defined by the fetched guidelines; ensure your agent understands this format for proper interpretation of results.
- Fresh guidelines should be fetched before each review cycle to maintain accuracy.
Tags
TrustedSkills Verification
Unlike other registries that point to live repositories, TrustedSkills pins every skill to a verified commit hash. This protects you from malicious updates — what you install today is exactly what was reviewed and verified.
Security Audits
| Gen Agent Trust Hub | Pass |
| Socket | Pass |
| Snyk | Pass |
🌐 Community
Passed automated security scans.