Cursor Rule: Web Interface Guidelines

1---
2description: Web Interface Guidelines
3globs: *
4alwaysApply: false
5---
6Concise rules for building accessible, fast, delightful UIs Use MUST/SHOULD/NEVER to guide decisions
7 
8## Interactions
9 
10- Keyboard
11  - MUST: Full keyboard support per [WAI-ARIA APG](https://www.w3.org/WAI/ARIA/apg/patterns/)
12  - MUST: Visible focus rings (`:focus-visible`; group with `:focus-within`)
13  - MUST: Manage focus (trap, move, and return) per APG patterns
14- Targets & input
15  - MUST: Hit target ≥24px (mobile ≥44px) If visual <24px, expand hit area
16  - MUST: Mobile `<input>` font-size ≥16px or set:
17    ```html
18    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover">
19    ```
20  - NEVER: Disable browser zoom
21  - MUST: `touch-action: manipulation` to prevent double-tap zoom; set `-webkit-tap-highlight-color` to match design
22- Inputs & forms (behavior)
23  - MUST: Hydration-safe inputs (no lost focus/value)
24  - NEVER: Block paste in `<input>/<textarea>`
25  - MUST: Loading buttons show spinner and keep original label
26  - MUST: Enter submits focused text input In `<textarea>`, ⌘/Ctrl+Enter submits; Enter adds newline
27  - MUST: Keep submit enabled until request starts; then disable, show spinner, use idempotency key
28  - MUST: Don’t block typing; accept free text and validate after
29  - MUST: Allow submitting incomplete forms to surface validation
30  - MUST: Errors inline next to fields; on submit, focus first error
31  - MUST: `autocomplete` + meaningful `name`; correct `type` and `inputmode`
32  - SHOULD: Disable spellcheck for emails/codes/usernames
33  - SHOULD: Placeholders end with ellipsis and show example pattern (eg, `+1 (123) 456-7890`, `sk-012345…`)
34  - MUST: Warn on unsaved changes before navigation
35  - MUST: Compatible with password managers & 2FA; allow pasting one-time codes
36  - MUST: Trim values to handle text expansion trailing spaces
37  - MUST: No dead zones on checkboxes/radios; label+control share one generous hit target
38- State & navigation
39  - MUST: URL reflects state (deep-link filters/tabs/pagination/expanded panels) Prefer libs like [nuqs](https://nuqs.dev)
40  - MUST: Back/Forward restores scroll
41  - MUST: Links are links—use `<a>/<Link>` for navigation (support Cmd/Ctrl/middle-click)
42- Feedback
43  - SHOULD: Optimistic UI; reconcile on response; on failure show error and rollback or offer Undo
44  - MUST: Confirm destructive actions or provide Undo window
45// … truncated