From ts-dev-kit
Reviews web UI code against guidelines for accessibility, touch interaction, performance, layout, typography, forms, content, and UX best practices.
How this skill is triggered — by the user, by Claude, or both
Slash command
/ts-dev-kit:ui-ux-guidelinesThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Dispatch hub for UI/UX rules. Load the relevant reference file for full details.
Dispatch hub for UI/UX rules. Load the relevant reference file for full details.
| 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 |
<phase_1_review_ui>
references/ based on what the code contains.<phase_2_build_component>
references/accessibility-and-interaction.md -- all components must meet CRITICAL rules.references/forms-content-checklist.mdreferences/layout-typography-animation.md<phase_3_pre_delivery>
references/forms-content-checklist.md for the full checklist.references/accessibility-and-interaction.md for the interaction checklist.<anti_patterns>
user-scalable=no or maximum-scale=1 -- disables zoomonPaste with preventDefault -- blocks pastetransition: all -- list properties explicitlyoutline-none without :focus-visible replacement<div>/<span> with click handlers -- use <button> or <a><img> without width and height (causes CLS)onClick navigation without <a> (breaks Cmd+click).map() without virtualization (>50 items)Intl.*aria-label</anti_patterns>
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.
Load these as needed during reviews and implementation:
npx claudepluginhub jgamaraalv/ts-dev-kit --plugin ts-dev-kitAudits UI code against web accessibility, performance, and responsive design guidelines. Invoke for UI review, accessibility audit, or design best practices check.
Audits UI code against 100+ web interface guidelines from Vercel covering accessibility, forms, dark mode, typography, animation, images, performance, navigation, touch, and internationalization.
Reviews UI code for compliance with Web Interface Guidelines, covering accessibility, design, and UX. Activated by phrases like 'review my UI' or 'audit design'.