Ui Ux Guidelines

Web Interface Guidelines

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

Rule Categories by Priority

| Priority | Category | Impact | Reference File | | -------- | -------------------- | -------- | ------------------------------- | | 1 | Accessibility | CRITICAL | accessibility-and-interaction | | 2 | Touch & Interaction | CRITICAL | accessibility-and-interaction | | 3 | Performance | HIGH | layout-typography-animation | | 4 | Layout & Responsive | HIGH | layout-typography-animation | | 5 | Typography & Color | MEDIUM | layout-typography-animation | | 6 | Animation | MEDIUM | layout-typography-animation | | 7 | Forms | HIGH | forms-content-checklist | | 8 | Content & Navigation | MEDIUM | forms-content-checklist | | 9 | Charts & Data | LOW | layout-typography-animation |

Workflows

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.

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

1. Follow rules during implementation.

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
• `/ with click handlers -- use or `
• ` without width and height` (causes CLS)
• Inline onClick navigation without `` (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](template.md) for the expected output format.

Reference Files

Load these as needed during reviews and implementation:

• [Accessibility & Interaction](references/accessibility-and-interaction.md) -- Focus, ARIA, keyboard, touch targets, cursors, drag UX
• [Layout, Typography & Animation](references/layout-typography-animation.md) -- Performance, responsive, fonts, color, motion, charts
• [Forms, Content & Checklist](references/forms-content-checklist.md) -- Forms, content handling, navigation, dark mode, locale, hydration, pre-delivery checklist

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: jgamaraalv
• Source: jgamaraalv/ts-dev-kit
• License: MIT

Install and usage instructions live in the source repository linked above.