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 eva813-web-design-guidelines npx -- -y @trustedskills/eva813-web-design-guidelines
Or manually add to ~/.claude/settings.json
{
"mcpServers": {
"eva813-web-design-guidelines": {
"command": "npx",
"args": [
"-y",
"@trustedskills/eva813-web-design-guidelines"
]
}
}
}Requires Claude Code (claude CLI). Run claude --version to verify your install.
About This Skill
What it does
This skill provides access to web design guidelines. It allows AI agents to generate code and designs adhering to established best practices, ensuring consistency and accessibility in frontend development. The skill specifically focuses on Vue3 skills.
When to use it
- Generating a basic website layout with consistent styling.
- Creating accessible forms for user input.
- Developing reusable UI components that follow design system principles.
- Ensuring color contrast meets accessibility standards.
Key capabilities
- Vue3 specific guidelines
- Code generation based on established web design best practices
- Accessibility considerations (e.g., color contrast)
- Design consistency
Example prompts
- "Generate a Vue component for a navigation bar following standard web design principles."
- "Create an accessible form with labels and appropriate input types, adhering to web design guidelines."
- “Give me the best practices for designing buttons in Vue3.”
Tips & gotchas
The skill assumes some familiarity with Vue3. While it provides guidance, understanding basic frontend concepts will improve results.
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.