Web Design Guidelines
VerifiedComprehensive web design principles covering layout, typography, color theory, accessibility, and responsive patterns.
$ Add to .claude/skills/ About This Skill
# Web Interface Guidelines
Review files for compliance with Web Interface Guidelines.
How It Works
- Fetch the latest guidelines from the source URL below
- Read the specified files (or prompt user for files/pattern)
- Check against all rules in the fetched guidelines
- Output findings in the terse `file:line` format
Guidelines Source
Fetch fresh guidelines before each review:
``` https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md ```
Use WebFetch to retrieve the latest rules. The fetched content contains all the rules and output format instructions.
Usage
- When a user provides a file or pattern argument:
- Fetch guidelines from the source URL above
- Read the specified files
- Apply all rules from the fetched guidelines
- Output findings using the format specified in the guidelines
If no files specified, ask the user which files to review.
Use Cases
- Apply comprehensive web design principles to new projects and redesigns
- Implement proper layout, typography, and color theory in web interfaces
- Ensure web designs meet accessibility standards and responsive requirements
- Create design guidelines documentation for team consistency
- Review existing web designs against established design principles
Pros & Cons
Pros
- +Comprehensive coverage — layout, typography, color, accessibility, and responsive
- +Principles-based approach provides lasting guidance rather than trend-specific advice
- +Accessibility included as a core design principle
Cons
- -Design principles without implementation code — theory rather than practice
- -No visual examples or reference implementations
FAQ
What does Web Design Guidelines do?
Comprehensive web design principles covering layout, typography, color theory, accessibility, and responsive patterns.
What platforms support Web Design Guidelines?
Web Design Guidelines is available on Claude Code, Cursor, OpenAI Codex CLI.
What are the use cases for Web Design Guidelines?
Apply comprehensive web design principles to new projects and redesigns. Implement proper layout, typography, and color theory in web interfaces. Ensure web designs meet accessibility standards and responsive requirements.
100+ free AI tools
Writing, PDF, image, and developer tools — all in your browser.
Next Step
Use the skill detail page to evaluate fit and install steps. For a direct browser workflow, move into a focused tool route instead of staying in broader support surfaces.