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 tech-leads-club-web-design-guidelines npx -- -y @trustedskills/tech-leads-club-web-design-guidelines
Or manually add to ~/.claude/settings.json
{
"mcpServers": {
"tech-leads-club-web-design-guidelines": {
"command": "npx",
"args": [
"-y",
"@trustedskills/tech-leads-club-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 curated set of web design guidelines specifically tailored for AI agents to ensure consistent, professional frontend output. It acts as a reference standard to help agents adhere to best practices in layout, typography, and visual hierarchy during development tasks.
When to use it
- Generating new landing pages or marketing sites that require strict brand alignment.
- Refactoring existing components to meet modern accessibility and responsiveness standards.
- Creating documentation for frontend teams on how AI agents should structure code.
- Validating AI-generated HTML/CSS against a specific design system before deployment.
Key capabilities
- Enforces consistent visual language across generated assets.
- Provides structured rules for layout, spacing, and color usage.
- Guides agents in producing semantically correct and accessible markup.
- Ensures responsive designs that adapt to various screen sizes.
Example prompts
- "Generate a hero section for a SaaS product following the Tech Leads Club web design guidelines."
- "Refactor this existing navbar component to align with the established frontend style guide."
- "Create a responsive card grid layout using the specified typography and spacing rules from the guidelines."
Tips & gotchas
Ensure your AI agent has access to the full text of these guidelines, as they are not automatically embedded in the model's training data. This skill is most effective when paired with specific project requirements to avoid generic outputs that miss unique brand nuances.
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.