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 uni-helper-web-design-guidelines npx -- -y @trustedskills/uni-helper-web-design-guidelines
Or manually add to ~/.claude/settings.json
{
"mcpServers": {
"uni-helper-web-design-guidelines": {
"command": "npx",
"args": [
"-y",
"@trustedskills/uni-helper-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 patterns, and checks them against those rules. The results are then presented in a terse "file:line" format, highlighting any deviations from the established guidelines.
When to use it
- When ensuring consistency across web development projects.
- During code reviews to identify potential design flaws early on.
- To automatically check new or modified frontend files against established standards.
- For teams wanting to enforce a specific set of web interface rules.
Key capabilities
- Fetches the latest guidelines from
https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md. - Reads specified files or patterns provided by the user.
- Checks files against all rules within the fetched guidelines.
- Outputs findings in a "file:line" format.
- Prompts the user for file selection if no files are initially specified.
Example prompts
- "Review
src/components/button.jsagainst web design guidelines." - "Check all
.cssfiles in thestylesdirectory for compliance." - "What web interface guidelines should I be following?" (This will prompt the agent to fetch and display the latest guidelines.)
Tips & gotchas
- The skill relies on
WebFetchto retrieve the guidelines; ensure this tool is available. - The output format is strictly "file:line," as defined in the fetched guidelines.
- Always fetch fresh guidelines before each review for up-to-date standards.
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.