2d3cfb40bb
Add 11 source-only StyleSeed skills covering UI setup, page and pattern scaffolding, token management, accessibility review, UX flows, microcopy, audits, and feedback states. Also credit bitjaru/styleseed in the community contributors list so source attribution matches the new source_repo metadata. Fixes #478 Co-authored-by: sickn33 <sickn33@users.noreply.github.com>
2.3 KiB
2.3 KiB
name, description, category, risk, source, source_repo, source_type, date_added, author, tags, tools
| name | description | category | risk | source | source_repo | source_type | date_added | author | tags | tools | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ux-flow | Design user flows and screen structure using StyleSeed UX patterns such as progressive disclosure, hub-and-spoke navigation, and information pyramids. | design | safe | community | bitjaru/styleseed | community | 2026-04-08 | bitjaru |
|
|
UX Flow
Overview
Part of StyleSeed, this skill designs flows before screens. It uses proven UX patterns to define entry points, exits, screen inventory, and navigation structure so the implementation has a coherent user journey instead of a pile of disconnected pages.
When to Use
- Use when planning onboarding, checkout, account management, dashboards, or drill-down flows
- Use when a new feature spans multiple screens or modal states
- Use when users need a clear path through a task instead of a single isolated page
- Use when the UI needs navigation logic before components are built
How It Works
Information Architecture Principles
- progressive disclosure: reveal complexity only when needed
- Miller's Law: chunk content into manageable groups
- Hick's Law: minimize decision overload on each screen
Common Navigation Models
- hub and spoke for dashboards and detail views
- linear flow for onboarding, forms, and checkout
- tab navigation for 3 to 5 top-level areas
Flow Rules
- every flow has a clear entry point
- every flow has a clear exit or success condition
- key features should usually be reachable within three taps from home
- non-root screens need back navigation
- loading, empty, and error states need explicit recovery paths
Output
Provide:
- An ASCII flow diagram
- A screen inventory with each screen's purpose
- Edge cases for loading, empty, and error states
- Recommended page scaffolds and reusable patterns to implement next
Best Practices
- Optimize for clarity before density
- Let one screen answer one primary question
- Keep escape hatches visible for risky or destructive steps
- Define state transitions before drawing detailed layouts