agentsclimarketplace

Ux flow

Skill sickn33/agentic-awesome-skills/skills/ux-flow

AAS Core is the local, agent-first control plane for complete catalog discovery, agent-owned selection, stack validation, and planning, backed by 1,987+ agentic skills. Includes CLI, local MCP, catalog, plugins, and Workbench.

Install
npx -y skills add sickn33/agentic-awesome-skills --skill ux-flow

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

What its author says it does

Copied from the file, not written here

Design user flows and navigation structure following proven UX patterns

The file declares its own license as MIT. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.

SKILL.md

3.1 KB, as published. Nobody here has run it

UX Flow Designer

When to Use

Use this skill when you need design user flows and navigation structure following proven UX patterns.

When NOT to use

  • For implementing a single page → use /ss-page after the flow is settled
  • For copy on each step → use /ss-copy after the structure is settled
  • For information architecture of an entire product — narrow scope to one flow first
  • For high-fidelity mockups — this produces a flow map, not pixel-perfect designs

Design a user flow: $0 Description: $ARGUMENTS

Instructions

  1. Read the design system reference:

    • CLAUDE.md for component inventory
    • DESIGN-LANGUAGE.md for layout patterns (sections 13-14, 19-20)
    • components/patterns/ for available building blocks

  2. Apply these UX principles:

Information Architecture

  • Progressive Disclosure: Show only what's needed at each step. Hide complexity behind logical drill-downs.
  • Miller's Law: Chunk information into groups of 5-9 items maximum.
  • Hick's Law: Minimize choices per screen. Fewer options = faster decisions.

Navigation Patterns

  • Hub & Spoke: Dashboard → detail pages → back to dashboard (default for mobile apps)
  • Linear Flow: Step 1 → Step 2 → Step 3 (for forms, onboarding, checkout)
  • Tab Navigation: 3-5 top-level sections via BottomNav

Screen Flow Rules

  • Every flow must have a clear entry point and clear exit point
  • Maximum 3 taps to reach any key feature from the home screen
  • Back navigation must always be available (except root screens)
  • Error states must provide recovery paths (retry, go back, contact support)
  • Loading states must use skeleton screens (never spinners in cards)

Page Composition (from DESIGN-LANGUAGE.md)

  • Follow the Information Pyramid: Hero → KPI Grid → Details → Lists
  • Each screen should answer ONE primary question
  • Above the fold: the most important metric or action
  • Use the 4 section types: Full Card (A), Grid (B), Carousel (C), Hero (D)

  1. Output format:

    • Flow diagram in ASCII showing screen connections
    • Screen inventory listing each screen's purpose and key components
    • Edge cases (empty states, errors, loading) for each screen
    • Scaffolded pages using PageShell, TopBar, BottomNav patterns

  2. Generate the actual page files using /ss-page conventions.

Limitations

  • Use this skill only when the task clearly matches its upstream source and local project context.
  • Verify commands, generated code, dependencies, credentials, and external service behavior before applying changes.
  • Do not treat examples as a substitute for environment-specific tests, security review, or user approval for destructive or costly actions.

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.