Plan screens, navigation, user flows, content structure, and cross-screen logic before building UI.
SkillScore41Maintained
Automatic
◆Design & UX Review pack
Last verified 8/3/2026
What it changes
Passed 9 of 22 test cases with the skill, and 6 of 22 without it.
Without skill27%
With skill41%
Checks it passed that the model alone missed
Flags cross-screen patient data for state management.
Identifies primary and secondary actions for column mapping.
Defines loading, empty, and error state layouts for data widgets.
and 3 more in the full report
5 fixed4 passed either way11 still failing2 broke
Pass-rate lift
+14 pp
Tokens
+27%
Agent turns
0%
Response time
+3%
Model gemini-3.6-flashMeasured 8/3/2026v19 of 22 cases passed with skill
Tokens, turns and time describe resource use, not a dollar price.
See it in action
One of 5 test cases the skill fixed. Same model, same prompt, with and without the skill.
1 of 5
Prompt
We're adding a new multi-step merchant registration process to our React app. We need to map out the complete user journey, including screen sequences, entry and exit points for each view, action placements, and how state transitions between steps, before we start writing UI components. Can you design the end-to-end user flow and screen hierarchy for this feature?
What was checked, without and with the skill
Checked
Without skill
With skill
Defines explicit entry points for each screen step in the registration flow.
Passed
Passed
Defines explicit exit points for each screen step in the registration flow.
Passed
Passed
Defines loading, empty, and error variants for registration screens.
Missed
Passed
case-01 · gemini-3.6-flash · 8/3/2026 · answers are capped and redacted
What's inside
The instructions your model reads when the skill loads.
SKILL.md65 linessingle file
UX Flow and Information Architecture Skill
Purpose
Define how users move through the app and how content/information is structured, so screens and navigation are coherent before component-level work begins.
When to Use
A feature spans multiple screens or steps (e.g. onboarding, checkout, multi-step forms).
Navigation structure needs to be added or changed (new routes, tabs, modals vs. pages).
A screen's content hierarchy or grouping is unclear.
Different user states/roles need different flows or views.
When Not to Use
A single, self-contained screen with an obvious, simple layout.
The flow is already defined and just needs implementation.
Required Inputs
The feature/goal driving the flow.
Existing navigation structure (routes, tabs, nav bars, modals) from Understand the Project Skill.
User roles/permissions if relevant.
Assumptions
Navigation patterns should match the framework's routing conventions (Next.js App Router segments, Expo Router file-based routes, Vite + React Router routes).
Simpler flows are preferred when they meet the requirement.
Step-by-Step Workflow
Define the user goal: what is the user trying to accomplish, end to end?
List the steps/screens required to accomplish it, in order.
For each step, define:
Entry point (how the user gets here).
Exit points (where the user can go next: continue, back, cancel, error).
Required content/data on that screen.
Primary action and secondary actions.
Identify branching: different roles, permissions, or states (e.g. logged in vs. guest, empty vs. populated) that change the flow.
Decide navigation structure: new route(s) vs. modal/sheet vs. inline expansion — follow existing patterns in the app for similar flows.
Define information hierarchy per screen: what's primary, secondary, tertiary; group related content; avoid unnecessary nesting.
Note cross-screen state: what data/state needs to persist or pass between screens (and flag for Manage State Skill).
Check for unnecessary steps: can any screen/step be removed or merged without hurting clarity?
Rules and Best Practices
Keep flows predictable: consistent placement of primary actions, back/cancel behavior, and navigation patterns across the app.