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.
Installs into .claude/skills of the current project.
Are you the author of Ui Flow?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/sylphxai-ui-flow)
---
name: ui-flow
description: "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."
---
# 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.
