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 dmmulroy-web-design-guidelines npx -- -y @trustedskills/dmmulroy-web-design-guidelines
Or manually add to ~/.claude/settings.json
{
"mcpServers": {
"dmmulroy-web-design-guidelines": {
"command": "npx",
"args": [
"-y",
"@trustedskills/dmmulroy-web-design-guidelines"
]
}
}
}Requires Claude Code (claude CLI). Run claude --version to verify your install.
About This Skill
The web-design-guidelines skill provides AI agents with a structured framework to generate high-quality, consistent frontend code. It enforces specific design patterns and best practices to ensure that generated interfaces are visually coherent and functionally robust across different projects.
When to use it
- Building new landing pages or marketing sites requiring a unified visual identity.
- Refactoring legacy codebases to align with modern web design standards.
- Generating component libraries where consistency in spacing, typography, and layout is critical.
- Creating responsive templates that must adhere to strict accessibility and usability guidelines.
Key capabilities
- Enforces consistent styling rules across all generated frontend assets.
- Applies best practices for layout, color theory, and visual hierarchy.
- Generates code that aligns with established industry design patterns.
- Ensures outputs meet specific aesthetic and functional requirements defined by the author.
Example prompts
"Generate a responsive hero section using web-design-guidelines that features a clear call-to-action and modern typography." "Create a navigation bar component following the dmmulroy web-design guidelines, ensuring it is accessible on mobile devices." "Refactor this existing CSS file to adhere to the strict spacing and color palette rules defined in the web-design-guidelines skill."
Tips & gotchas
- This skill is specifically tuned for frontend development; do not attempt to use it for backend logic or database operations.
- For best results, provide context about your specific brand colors or design system when requesting code generation.
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.