Web Design Guidelines

What it does

This skill provides a set of self-contained guidelines for reviewing web interfaces and auditing UI code, focusing on accessibility, performance, and responsive design best practices. It helps ensure that frontend UIs and user experiences adhere to established standards. The skill outputs findings in a structured format, identifying specific rule violations with file paths and descriptions.

When to use it

• During UI audits to identify areas for improvement.
• When performing accessibility checks on web interfaces.
• As part of responsive design reviews to ensure usability across devices.
• To evaluate UX best practices in a codebase.
• Specifically when building frontend UIs and user experience workflows.

Key capabilities

• Accessibility (A11Y) Checks: Evaluates semantic HTML usage, ARIA label implementation, keyboard navigation, color contrast, and screen reader compatibility.
• Performance (PERF) Optimization: Provides guidance on image optimization, bundle size reduction, rendering efficiency, and Core Web Vitals improvements.
• Responsive Design (RD) Guidelines: Enforces mobile-first design principles, fluid layouts using relative units, and touch target considerations.
• Structured Reporting: Outputs findings in a file:line — [RULE_ID] description format for easy identification and remediation.

Example prompts

• "Audit this component for accessibility issues: src/Button.tsx"
• "Review the performance of these images."
• "Check if this UI follows responsive design best practices."
• "Evaluate this code snippet for A11Y-02 ARIA label violations."

Tips & gotchas

• This skill is intended for use during code review and auditing, not general web development tasks.
• The skill focuses on identifying rule violations; it does not automatically fix them.
• Pay attention to the RULE_ID in the output report to understand the specific guideline being violated.