ui-ux-guidelines

Original：🇺🇸 English

Translated

Review UI code for Web Interface Guidelines compliance. Use when asked to review UI, check accessibility, audit design, review UX, or check against best practices.

2installs

Sourcejgamaraalv/ts-dev-kit

Added on2026-02-26

NPX Install

npx skill4agent add jgamaraalv/ts-dev-kit ui-ux-guidelines

SKILL.md Content

View Translation Comparison →

Web Interface Guidelines

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

Rule Categories by Priority


accessibility-and-interaction
accessibility-and-interaction
layout-typography-animation
layout-typography-animation
layout-typography-animation
layout-typography-animation
forms-content-checklist
forms-content-checklist
layout-typography-animation

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

1. Review UI code

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

2. Build new component

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

3. Pre-delivery checklist

Load
```
references/forms-content-checklist.md
```
for the full checklist.

Load

references/accessibility-and-interaction.md

for the interaction checklist.

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.

text

## src/Button.tsx

src/Button.tsx:42 - icon button missing aria-label
src/Button.tsx:18 - input lacks label
src/Button.tsx:55 - animation missing prefers-reduced-motion
src/Button.tsx:67 - transition: all -> list properties explicitly

## src/Modal.tsx

src/Modal.tsx:12 - missing overscroll-behavior: contain
src/Modal.tsx:34 - "..." -> "..."

## src/Card.tsx

pass

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