🔍 Web Design Guidelines
UI/UX best practices and accessibility guidelines. Use when reviewing UI code, checking accessibility, auditing forms, or ensuring web interface best practices. Triggers on "review UI", "check accessibility", "audit design", "review UX", or "check best practices".
npx playbooks add skill asyrafhussin/agent-skills --skill web-design-guidelines
About Web Design Guidelines
UI/UX best practices and accessibility guidelines. Use when reviewing UI code, checking accessibility, auditing forms, or ensuring web interface best practices. Triggers on "review UI", "check accessibility", "audit design", "review UX", or "check best practices".
The 35-word prompt provides structured code review & quality guidance — covering detailed methodology and consistent output formats. Install it in one command.
Use Cases
- Catching bugs and security vulnerabilities before merge
- Enforcing code style and architectural consistency
- Reviewing PRs for performance and maintainability
- Generating detailed code review comments
Example Prompts
System Prompt (35 words)
UI/UX best practices and accessibility guidelines. Use when reviewing UI code, checking accessibility, auditing forms, or ensuring web interface best practices. Triggers on "review UI", "check accessibility", "audit design", "review UX", or "check best practices".
Frequently Asked Questions
What is Web Design Guidelines?
Web Design Guidelines is a free code review & quality skill for AI coding agents. UI/UX best practices and accessibility guidelines. Use when reviewing UI code, checking accessibility, auditing forms, or ensuring web interface best practices. Triggers on "review UI", "check accessibility", "audit design", "review UX", or "check best practices".. It provides a specialized system prompt that configures your agent with code review & quality expertise.
How do I use Web Design Guidelines with Claude Code?
Run npx playbooks add skill asyrafhussin/agent-skills --skill web-design-guidelines in your terminal to install Web Design Guidelines into your Claude Code session. It works immediately after installation.
Which AI coding agents work with Web Design Guidelines?
Web Design Guidelines is compatible with Claude Code, Cursor, GitHub Copilot, Windsurf, OpenClaw, Cline, and any AI agent that supports custom system prompts or .cursorrules files.
Is Web Design Guidelines free to use?
Yes, Web Design Guidelines is completely free and open source. The full source is available on GitHub at https://github.com/asyrafhussin/agent-skills/tree/main/skills/web-design-guidelines. You only need a subscription to the AI agent you use it with.
