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 andrelandgraf-web-design-guidelines npx -- -y @trustedskills/andrelandgraf-web-design-guidelines
Or manually add to ~/.claude/settings.json
{
"mcpServers": {
"andrelandgraf-web-design-guidelines": {
"command": "npx",
"args": [
"-y",
"@trustedskills/andrelandgraf-web-design-guidelines"
]
}
}
}Requires Claude Code (claude CLI). Run claude --version to verify your install.
About This Skill
The web-design-guidelines skill provides a curated set of best practices for building modern, accessible, and performant websites. It helps developers align their frontend code with industry standards for layout, typography, and responsiveness.
When to use it
- Ensuring new components follow established design systems before implementation.
- Auditing existing codebases for accessibility compliance and visual consistency.
- Generating boilerplate structures that adhere to clean coding principles.
- Resolving conflicts between custom styles and standard browser rendering behaviors.
Key capabilities
- Enforces consistent spacing, typography, and color usage across interfaces.
- Promotes mobile-first responsive design patterns and fluid layouts.
- Integrates accessibility guidelines (WCAG) directly into development workflows.
- Optimizes performance metrics through efficient asset loading and rendering strategies.
Example prompts
- "Generate a responsive navigation bar using the web-design-guidelines standards."
- "Audit this component for accessibility issues based on the provided guidelines."
- "Create a CSS grid layout that follows the recommended spacing system from the guidelines."
Tips & gotchas
Ensure your project environment supports the specific version of design tokens referenced in the guidelines. While these rules cover general best practices, complex legacy integrations may require manual overrides to maintain functionality without breaking established patterns.
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.