web-design-guidelines

1# Web Interface Guidelines
2 
3### When to Load
4 
5- **Trigger**: UI audit, accessibility checks, responsive design review, UX best practices evaluation
6- **Skip**: Backend-only work with no UI components
7 
8Self-contained guidelines for reviewing web interfaces. Apply these rules when auditing UI code.
9 
10## Output Format
11 
12Report findings as: `file:line — [RULE_ID] description`
13 
14Example: `src/Button.tsx:12 — [A11Y-01] Missing aria-label on icon button`
15 
16## 1. Accessibility (A11Y)
17 
18### A11Y-01: Semantic HTML
19 
20- Use `<button>` for actions, `<a>` for navigation, `<input>` for data entry
21- Never use `<div onClick>` or `<span onClick>` for interactive elements
22- Use `<nav>`, `<main>`, `<aside>`, `<header>`, `<footer>` for landmarks
23 
24### A11Y-02: ARIA Labels
25 
26- All interactive elements need accessible names
27- Icon-only buttons MUST have `aria-label`
28- Form inputs MUST have associated `<label>` or `aria-label`
29- Images need `alt` text (decorative images: `alt=""`)
30 
31### A11Y-03: Keyboard Navigation
32 
33- All interactive elements must be reachable via Tab
34- Custom components need proper `role`, `tabIndex`, and key handlers
35- Focus must be visible (never `outline: none` without replacement)
36- Modal/dialog must trap focus and return focus on close
37 
38### A11Y-04: Color & Contrast
39 
40- Text contrast ratio: 4.5:1 minimum (3:1 for large text)
41- Never use color alone to convey meaning (add icons, text, patterns)
42- Ensure UI is usable at 200% zoom
43 
44### A11Y-05: Screen Readers
45…