Web Interface Guidelines

How It Works

1. Read the guidelines from

   #[[file:references/guideline.md]]

2. Read the specified files (or prompt user for files/pattern)
3. Check against all rules in the guidelines
4. Output findings in the terse

   file:line

   format

Guidelines Reference

#[[file:references/guideline.md]]

• Accessibility (ARIA, semantic HTML, keyboard navigation)
• Focus states and keyboard interaction
• Forms (autocomplete, validation, labels)
• Animation (reduced motion, performance)
• Typography (proper characters, number formatting)
• Content handling (overflow, empty states)
• Images (dimensions, lazy loading)
• Performance (virtualization, DOM reads)
• Navigation & state (URL sync, deep linking)
• Touch & interaction (tap delays, safe areas)
• Dark mode & theming
• Locale & i18n
• Hydration safety
• Common anti-patterns to flag

Usage

1. Read the guidelines from

   references/guideline.md

2. Read the specified files
3. Apply all rules from the guidelines
4. Output findings using the format specified in the guidelines

Output Format

• Group findings by file
• Use

  file:line

  format (VS Code clickable)
• Terse, high signal-to-noise
• State issue + location
• Skip explanation unless fix is non-obvious