Solo Founder UX Design Skill: Flows and Navigation

What is the solo-founder ux-design skill?

Every page must answer four questions in visual priority order: where am I, what can I do here, what are the sub-sections, and what matters most. That rule sits under Page Content Hierarchy, the third Information Architecture subsection, after Core Principles and URL Structure.

It is one of six skills in the sf-design plugin of whawkinsiv/solo-founder-skills, a set aimed at non-technical founders building SaaS with AI tools. The SKILL.md leaves colors and typography to sibling skills.

Structure and navigation rules

• Keep navigation flat, with at most two levels, and group items by user task rather than data type.
• Hold each navigation group to 5 to 9 items, with the most-used items first.
• Mirror the architecture in URLs: nouns, lowercase with hyphens, three levels at most, filters in query parameters.
• Pick a pattern by complexity: top nav for 3 to 7 items, sidebar for 5 to 20, tabs for views of one object, a command palette on top.

Flows, feedback and errors

For flows, the skill says to list every step, find friction, then cut. Smart defaults, inline creation, bulk operations and remembered choices replace extra screens. Common tasks should need no more than three interactions from any start.

Every error message answers what happened, why and how to fix it. Validation runs on blur, not submit. Feedback must appear within 100ms, and the SKILL.md defaults to an undo toast over a confirmation dialog.

Who the ux-design skill suits

Best for

• Founders whose SaaS flows feel clunky or whose users get lost in navigation.
• Planning an app's page types, such as dashboard, list, detail, settings and empty state, before building.
• Agents that default to blocking spinners, vague errors and confirm-everything dialogs.

Not for

• Visual styling. The SKILL.md points to separate beautify and ui-patterns skills for that.
• Marketing sites with a handful of pages, where its dashboard and settings advice mostly goes unused. Try page-cro instead.
• Deep accessibility work from this file alone, which hands implementation to a companion ACCESSIBILITY.md.

Use it with UiChemy

This skill shapes how an app behaves, and its output is advice and code for your product, not WordPress pages. For a WordPress site, plan the navigation and flows with it, then build in UiChemy Composer. Click Get Started on uichemy.com.

Neighbouring skills help with specific parts: form-design for input flows, accessibility-review for checks, and interface-review for a final pass.

How to install Solo Founder UX Design Skill: Flows and Navigation

/plugin marketplace add whawkinsiv/solo-founder-skills
/plugin install sf-design@solo-founder-skills-marketplace

1. Add the marketplace

   In Claude Code, run /plugin marketplace add whawkinsiv/solo-founder-skills. The README also suggests installing sf-core first for orientation.

2. Install the design plugin

   Run /plugin install sf-design@solo-founder-skills-marketplace. This installs all six design skills, including ux-design, not the single skill alone.

3. Codex and other agents

   Clone the repository and run ./install.sh --codex sf-design, or point --dest at any skills folder. For one skill only, the README shows a $skill-installer install command with the skill's tree URL.

4. Invoke it

   The skill triggers automatically on requests about clunky flows or confusing navigation, or manually with the plugin-prefixed name for sf-design and ux-design.

Check that it loaded

Start a new session and ask for help planning navigation for a SaaS dashboard. The agent should invoke ux-design and answer with an IA, navigation pattern and flow recommendations.

Read the official instructions on GitHub

Key features

• Information architecture principlesFlat beats deep, labels are architecture, group by task, 5 to 9 items per group and most-used first, with alphabetical ordering called lazy.
• URL structure rulesNouns, lowercase hyphens, meaningful IDs where possible, no more than three path levels, and filter state kept in query parameters for sharing.
• Page type definitionsDashboard, list, detail, settings and empty state each get a short rule, such as saving per section and never showing an empty table with headers.
• Navigation decision tableTop nav, sidebar, tabs, command palette and breadcrumbs are matched to product complexity and item counts.
• Step reduction for flowsA four-part task analysis lists steps, finds friction, eliminates steps and targets three interactions for common tasks.
• Feedback timingVisible feedback inside 100ms, a spinner under a second, skeleton or progress up to ten seconds, and a progress bar with background processing beyond that.
• Undo over confirmationA table sorts actions into no confirmation, undo toast for five to eight seconds, and a dialog only for irreversible, high-stakes actions.
• Four-level progressive disclosureEssential, on interaction, on demand and discoverable levels, plus a list of things never to hide, such as errors and required fields.
• Three-question error messagesWhat happened, why, and how to fix it, with rules for inline validation, empty results, failed loads, partial failures and retry backoff.
• Perceived performanceOptimistic updates, skeleton screens, progress indicators, lazy loading and prefetching, with a rule to skip loaders for operations under 200ms.

Frequently asked questions