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 langgenius-web-design-guidelines npx -- -y @trustedskills/langgenius-web-design-guidelines
Or manually add to ~/.claude/settings.json
{
"mcpServers": {
"langgenius-web-design-guidelines": {
"command": "npx",
"args": [
"-y",
"@trustedskills/langgenius-web-design-guidelines"
]
}
}
}Requires Claude Code (claude CLI). Run claude --version to verify your install.
About This Skill
What it does
This skill provides comprehensive guidelines and best practices for modern web design, including responsive layout techniques, accessibility standards, and UI/UX principles. It helps AI agents generate clean, user-friendly interfaces that are optimized for performance and cross-browser compatibility.
When to use it
- You're designing a new website and need guidance on structuring HTML and CSS effectively.
- You want to ensure your web design meets accessibility standards like WCAG.
- You’re optimizing an existing site for mobile responsiveness and faster load times.
Key capabilities
- Responsive layout strategies using media queries and flexible grid systems
- Accessibility guidelines for color contrast, semantic markup, and keyboard navigation
- Performance optimization tips such as image compression and lazy loading
Example prompts
- "Generate a responsive web design guideline for a single-page application."
- "What are the best practices for ensuring accessibility in modern web design?"
- "How can I optimize my website’s performance using current web design standards?"
Tips & gotchas
- Always validate your HTML and CSS with tools like W3C Validator to ensure compliance.
- While this skill provides strong guidelines, it does not generate actual code—use it in conjunction with a code-writing AI agent for full implementation.
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.