# UI

> UI/UE (user interface & user experience) skill for designing and reviewing interfaces. Use for tasks like creating UI specs, interaction states, component guidelines, visual hierarchy, responsive layouts, accessibility, design tokens, and handoff-ready requirements for engineers.

- Skill: `majiayu000/ui` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/ui`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/ui/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend, Coding & Dev Tools
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/ui

---


# ui

Use this skill for UI/UE 设计与评审：把“体验”落到可交付的界面规范与交互细节。

## Outputs (choose what the task needs)

- Screen list + navigation map
- Wireframe-level UI spec (layout, components, spacing)
- Interaction spec (states, transitions, micro-interactions)
- Component guidelines (variants, props, usage rules)
- Design tokens (colors, typography, spacing, radii, shadows)
- Accessibility checklist (WCAG basics)
- Engineer handoff notes (assets, copy, edge cases)

## Workflow

1) Clarify context
- Platform: Web / mobile / mini program.
- Users and primary tasks; define success for the screen.

2) Define information hierarchy
- What is primary CTA? What must be seen first?
- Use progressive disclosure for secondary actions.

3) Specify layouts and components
- Grid system / spacing rules.
- Component inventory and reuse plan.
- Responsive behavior (breakpoints) where relevant.

4) Define states (must-have)
- Empty / loading / error / success
- Disabled / hover / focus / pressed
- Validation states for forms

5) Interaction details
- Feedback timing, confirmations, undo patterns.
- Prevent errors; provide clear recovery paths.

6) Visual design consistency
- Tokenize: colors, typography scale, spacing, radii.
- Ensure contrast and readable typography.

7) Accessibility
- Keyboard navigation, focus order, ARIA labels (web).
- Dynamic type and screen reader labels (mobile).

## UI acceptance criteria template

- Given [state], when [action], then [UI updates] within [time].
- Copy: [exact text], error message: [exact text].
- Responsive: at [breakpoint], [layout change].
- Accessibility: [tab order], [label], [contrast].