# UI Flow

> Design or implement one product UI flow with loading, empty, error, and success states, verified on a real render. Use when the user asks to build a screen, fix a form, design a flow, or match an existing design system. Do not use to review an existing flow, extract a design system, or produce store screenshots.

- Skill: `sylphxai/ui-flow` (Agent Skill, multi-file: 5 files)
- Install (CLI): `npx skillmds@latest add sylphxai/ui-flow`
- Raw SKILL.md: https://api.skillmd.com/api/skills/sylphxai/ui-flow/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: SylphxAI (https://skillmd.com/u/sylphxai)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/sylphxai/ui-flow

---


# UI Flow

Match surrounding design-system density. Verify on a real render, not a description of the UI. Essential meaning has a visual or textual path — audio, haptics, and color never carry unique required state. A happy-path mock is not the flow.

Open [interface craft rules](references/interface-craft-rules.md) for hierarchy. Open [states, forms, and recovery](references/states-forms-and-recovery.md) for stateful flows. Open [responsive mobile and input](references/responsive-mobile-and-input.md) for layout. Open [sensory feedback](references/sensory-feedback.md) when sound, haptics, camera, or effects matter.

Use `ui-review` to judge an existing render. Use `accessibility-conformance` for a conformance claim.