flow-checker — Claude Code skill: what it does, how to install
Audits UX flows before wireframing and before production release. Catches friction in onboarding, forms, pricing tables, dashboards, and empty states.
npx skills add uxuiprinciples/agent-skills --skill flow-checker -a claude-codeWhat flow-checker does
The skill evaluates user journeys in two distinct phases. Preflight raises core architectural questions before any UI work starts, catching missing constraints early. Postflight runs a binary verification pass on existing designs, assigning severity levels from low to critical. If any critical item fails, it flags the flow as not ready to ship.
Audits target five specific product flows: onboarding, forms, pricing, dashboard, and empty states. Each maps to a product metric like activation or conversion. If you only provide initial concepts without design specs, the agent runs preflight checks alone. Output arrives strictly formatted as JSON.
Without a pro UXUI_API_KEY, the skill relies solely on built-in rules, leaving out dynamic smell linkage and live severity ratings.
What it helps with
- verify onboarding steps before handing layouts to engineering
- audit multi-step form validation against common UX defects
- identify missing requirements in zero-data empty states
- check pricing page decisions before writing production code
Example prompts for the agent
- Run a preflight audit on our new workspace invitation flow
- Check this multi-step checkout form design against the forms checklist
- Evaluate our empty-state onboarding screens and check if they are ship-ready
How to install flow-checker
1Skills CLI (Vercel)
npx skills add uxuiprinciples/agent-skills --skill flow-checker -a claude-code2Manually: put the files in place
~/.claude/skills/flow-checker/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/flow-checker/
1Skills CLI (Vercel)
npx skills add uxuiprinciples/agent-skills --skill flow-checker -a codex2Manually: put the files in place
.agents/skills/flow-checker/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add uxuiprinciples/agent-skills --skill flow-checker -a cursor2Manually: put the files in place
.cursor/skills/flow-checker/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install uxuiprinciples/agent-skills flow-checker2Manually: put the files in place
.github/skills/flow-checker/SKILL.md1Skills CLI (Vercel)
npx skills add uxuiprinciples/agent-skills --skill flow-checker -a gemini-cli2Platform CLI
gemini skills install https://github.com/uxuiprinciples/agent-skills --path flow-checkerManually: put the files in place
.devin/skills/flow-checker/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add uxuiprinciples/agent-skills --skill flow-checker -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about flow-checker
How do I install flow-checker in Claude Code?
Run npx skills add uxuiprinciples/agent-skills --skill flow-checker -a claude-code in your terminal.
What does flow-checker do?
It audits product flows against preflight and postflight checklists, returning structured JSON findings with clear release gates.
Do I need a pro subscription to use this skill?
No, but missing a pro UXUI_API_KEY forces the skill into an offline fallback mode that lacks enriched severity tags.
