agent product skill risk: low

StyleSeed UX Flow and Screen Designer

Designs user flows and screen structures using StyleSeed UX patterns such as progressive disclosure, hub-and-spoke navigation, and information pyramids. Outputs an ASCII flow diagr…

SKILL 1 file

SKILL.md

Download

---
name: antigravity-awesome-skills-ux-flow-3a84671e
description: "Design user flows and screen structure using StyleSeed UX patterns such as progressive disclosure, hub-and-spoke navigation, and information pyramids."
---
# UX Flow

## Overview

Part of [StyleSeed](https://github.com/bitjaru/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:
1. An ASCII flow diagram
2. A screen inventory with each screen's purpose
3. Edge cases for loading, empty, and error states
4. 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

## Additional Resources

- [StyleSeed repository](https://github.com/bitjaru/styleseed)
- [Source skill](https://github.com/bitjaru/styleseed/blob/main/seeds/toss/.claude/skills/ux-flow/SKILL.md)

## Limitations
- Use this skill only when the task clearly matches the scope described above.
- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.

REQUIRED CONTEXT

description of the feature or task that spans multiple screens

OPTIONAL CONTEXT

preferred navigation model
target user journey constraints

ROLES & 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
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
Use this skill only when the task clearly matches the scope described above
Do not treat the output as a substitute for environment-specific validation, testing, or expert review
Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing

EXPECTED OUTPUT

Format

markdown

Schema

numbered_list · 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

Constraints

include ASCII flow diagram
include screen inventory with purpose for each screen
include edge cases for loading/empty/error states
include recommended page scaffolds and reusable patterns

SUCCESS CRITERIA

Provide an ASCII flow diagram
Provide a screen inventory with each screen's purpose
Provide edge cases for loading, empty, and error states
Provide recommended page scaffolds and reusable patterns to implement next

CAVEATS

Missing context

Concrete feature, user task, or product context to design a flow for

QUALITY

OVERALL: 0.81
CLARITY: 0.88
SPECIFICITY: 0.78
REUSABILITY: 0.82
COMPLETENESS: 0.80

IMPROVEMENT SUGGESTIONS

Add an explicit 'Inputs' section listing required details (e.g., feature description, user roles, platform constraints) before the 'How It Works' section.
Number or label the four required output elements so they map directly to the numbered list in the Output section.

USAGE

Copy the prompt above and paste it into your AI of choice — Claude, ChatGPT, Gemini, or anywhere else you're working. Replace any placeholder sections with your own context, then ask for the output.