Frontend Product UX Planning
Use this skill before visual styling or implementation when the task involves a
page, app, dashboard, workflow, landing page, or product surface.
Workflow
- Define the product job in one sentence.
- Identify the audience, domain, frequency of use, and content density.
- Map the primary workflow and the secondary workflows.
- Choose the first screen by user intent, not by marketing convention.
- List required states: empty, loading, error, success, permission, offline, long-content, and small-screen.
- Decide what information must be real, user-provided, or clearly sample.
- Remove filler copy, decorative labels, fake telemetry, and themed wording for standard actions.
Output Standard
- Navigation is predictable and supports moving in and out of major views.
- Standard actions use standard labels.
- Screens show meaningful content, not ornamental status text.
- Dashboards and operational tools prioritize scanning, comparison, and repeated action.
- Marketing pages make the product, object, place, or offer visible in the first viewport.
Handoff
After planning, route to:
frontend-visual-direction for the visual system.frontend-design-system-tokens for reusable tokens.frontend-implementation-react-tailwind for production code.
1---2name: product-ux-planning3description: Plan frontend products before implementation: purpose, audience, information architecture, navigation, user flows, states, content discipline, and feature scope. Use when starting a new app/page, redesigning UX, or reviewing whether a frontend experience is coherent.4---5# Frontend Product UX Planning67Use this skill before visual styling or implementation when the task involves a8page, app, dashboard, workflow, landing page, or product surface.910## Workflow11121. Define the product job in one sentence.132. Identify the audience, domain, frequency of use, and content density.143. Map the primary workflow and the secondary workflows.154. Choose the first screen by user intent, not by marketing convention.165. List required states: empty, loading, error, success, permission, offline, long-content, and small-screen.176. Decide what information must be real, user-provided, or clearly sample.187. Remove filler copy, decorative labels, fake telemetry, and themed wording for standard actions.1920## Output Standard2122- Navigation is predictable and supports moving in and out of major views.23- Standard actions use standard labels.24- Screens show meaningful content, not ornamental status text.25- Dashboards and operational tools prioritize scanning, comparison, and repeated action.26- Marketing pages make the product, object, place, or offer visible in the first viewport.2728## Handoff2930After planning, route to:3132- `frontend-visual-direction` for the visual system.33- `frontend-design-system-tokens` for reusable tokens.34- `frontend-implementation-react-tailwind` for production code.
YuukiAS