Web Interface Guidelines

Dispatch hub for UI/UX rules. Load the relevant reference file for full details.

Contents

1. Rule Categories
2. Workflows
3. Anti-patterns
4. Output Format
5. Reference Files

Rule Categories by Priority

Workflows

1. Review UI code

1. Read the target file(s).
2. Load the relevant reference file(s) from references/ based on what the code contains.
3. Check each applicable rule. Report violations in the output format below.

2. Build new component

1. Load references/accessibility-and-interaction.md — all components must meet CRITICAL rules.
2. Load additional references based on component type:
   • Form component -> references/forms-content-checklist.md
   • Layout/visual component -> references/layout-typography-animation.md
3. Follow rules during implementation.

3. Pre-delivery checklist

1. Load references/forms-content-checklist.md for the full checklist.
2. Load references/accessibility-and-interaction.md for the interaction checklist.
3. Walk through every checkbox before shipping.

Anti-patterns (flag these)

• user-scalable=no or maximum-scale=1 — disables zoom
• onPaste with preventDefault — blocks paste
• transition: all — list properties explicitly
• outline-none without :focus-visible replacement
• <div>/<span> with click handlers — use <button> or <a>
• <img> without width and height (causes CLS)
• Inline onClick navigation without <a> (breaks Cmd+click)
• Large .map() without virtualization (>50 items)
• Hardcoded date/number formats — use Intl.*
• Icon-only buttons without aria-label

Code Review Output Format

Group findings by file. Use file:line format (VS Code clickable). Be terse — state issue and location. Skip explanation unless fix is non-obvious.

See template.md for the expected output format.

Reference Files

Load these as needed during reviews and implementation:

• Accessibility & Interaction — Focus, ARIA, keyboard, touch targets, cursors, drag UX
• Layout, Typography & Animation — Performance, responsive, fonts, color, motion, charts
• Forms, Content & Checklist — Forms, content handling, navigation, dark mode, locale, hydration, pre-delivery checklist