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 antfu-web-design-guidelines npx -- -y @trustedskills/antfu-web-design-guidelines
Or manually add to ~/.claude/settings.json
{
"mcpServers": {
"antfu-web-design-guidelines": {
"command": "npx",
"args": [
"-y",
"@trustedskills/antfu-web-design-guidelines"
]
}
}
}Requires Claude Code (claude CLI). Run claude --version to verify your install.
About This Skill
What it does
The antfu-web-design-guidelines skill provides a structured set of best practices and design principles tailored for modern frontend development. It helps ensure consistency, accessibility, and responsiveness in web projects by offering actionable recommendations on layout, typography, color schemes, and component structure.
When to use it
- When starting a new frontend project and needing a foundation for consistent UI/UX design
- When redesigning an existing website to improve usability and visual appeal
- When preparing documentation or guidelines for a team working on web development
Key capabilities
- Offers responsive design strategies
- Includes accessibility-focused recommendations
- Provides component-based structure guidance
- Suggests typography and color best practices
Example prompts
- "What are the recommended font sizes for mobile responsiveness?"
- "How should I structure my layout for better accessibility?"
- "Can you provide guidelines on creating a consistent color palette?"
Tips & gotchas
- This skill is most effective when used in conjunction with modern frontend frameworks like Vue or React.
- Always review and adapt the guidelines to fit your project's specific needs rather than applying them rigidly.
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.