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 asyrafhussin-web-design-guidelines npx -- -y @trustedskills/asyrafhussin-web-design-guidelines
Or manually add to ~/.claude/settings.json
{
"mcpServers": {
"asyrafhussin-web-design-guidelines": {
"command": "npx",
"args": [
"-y",
"@trustedskills/asyrafhussin-web-design-guidelines"
]
}
}
}Requires Claude Code (claude CLI). Run claude --version to verify your install.
About This Skill
What it does
This skill provides a comprehensive set of web design guidelines to ensure consistent, professional, and user-friendly interfaces. It defines standards for layout, typography, color usage, and responsive behavior that AI agents can apply during frontend development tasks.
When to use it
- Building new landing pages or marketing sites requiring brand consistency.
- Refactoring existing codebases to align with modern design best practices.
- Generating component libraries that need standardized spacing and visual hierarchy.
- Creating responsive layouts that adapt seamlessly across mobile, tablet, and desktop devices.
Key capabilities
- Enforces consistent typography scales and font pairings.
- Defines color palettes for backgrounds, text, and interactive elements.
- Specifies grid systems and spacing units (margins/padding).
- Outlines responsive breakpoints for fluid layouts.
- Provides accessibility standards for contrast and navigation.
Example prompts
- "Generate a hero section layout following the web design guidelines for maximum conversion."
- "Refactor this CSS to match the approved color palette and typography rules."
- "Create a mobile-first navigation bar adhering to the responsive breakpoints defined in the guidelines."
Tips & gotchas
Ensure your project's base styles are initialized before applying these guidelines to avoid conflicts. Always verify that generated components meet accessibility contrast ratios specified in the documentation.
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.