CLI Forge Choice UX

Optimization: This skill uses on-demand loading. Detailed laws, numeric heuristics, and pattern libraries live in references/.

Language rule: Skill instructions are written in English. User-facing output should use the user's language.

Choice UX Forge

Simplify interfaces where users must choose, configure, buy, subscribe, or complete setup. The goal is not "prettier UI"; the goal is fewer doubts, fewer fields, fewer dead ends, and faster confident action.

Use this skill for both:

• Design: create or redesign a choice flow.
• Audit: inspect an existing UI and produce prioritized fixes.

Source Synthesis

This skill is a clean local synthesis, not an installed third-party skill. It condenses patterns from:

• Vercel-style web interface checks: accessibility, forms, focus, motion, copy, content resilience.
• Bencium-style controlled UX: intentional visual decisions, progressive disclosure, immediate feedback, accessibility.
• CRO/signup/onboarding/pricing playbooks: value clarity, field reduction, CTA hierarchy, trust, activation, pricing anxiety.
• Established UX laws: Nielsen heuristics, Hick's Law, Fitts's Law, Miller's Law, Jakob's Law, Baymard checkout findings, WCAG target sizing.
• Local cli-* ergonomics: ask once, derive the rest, use defaults, recap before apply, make re-runs safe and stateful.
• Material/GOV.UK patterns: one primary action, explicit states, confirmation/acknowledgement, check answers, back/change/resume behavior.

Read references/principles.md when you need the detailed rule table, scorecard, numeric thresholds, and pattern catalog.

Workflow

1. Classify the Flow

Identify the flow type before making changes:

If the flow is unclear, infer from route names, copy, component names, screenshots, or user context. Ask only if ambiguity changes the solution materially.

2. Map the Decision Load

For each step/screen, list:

• Required decisions: must happen now to progress.
• Derivable decisions: can be inferred from data, environment, prior answers, defaults, or user profile.
• Deferrable decisions: can happen after purchase/signup/activation.
• Advanced decisions: should be hidden behind "Advanced", "Customize", or expert mode.

Rule: if a decision is not required now, do not put it in the main path.

3. Preserve the User's Mental Model

For lifecycle resources (VMs, projects, clusters, plans, subscriptions, accounts), design one reusable grammar across operations:

Do not make users relearn the UI for each operation. The screen may differ, but the vocabulary, section order, summary panel, validation, state labels, and primary/secondary action hierarchy should stay consistent.

Borrow the local CLI ergonomics laws for UI:

• Ask once: never ask again for values already known; prefill and carry forward.
• Defaults are decisions: every default should produce a useful, safe result.
• Recap before apply: show a review/diff before creating, resizing, deleting, or billing.
• Re-run safe: returning to the flow restores prior state, not a blank form.

4. Apply the 7 Friction Cuts

Work in this order:

1. Clarify value: user can say what they get and what happens next.
2. Reduce choices: group, recommend, default, or defer options.
3. Reduce fields: remove, infer, prefill, combine, or ask later.
4. Strengthen CTA hierarchy: one primary action per decision region.
5. Prevent errors: constraints, inline validation, valid defaults, reversible actions.
6. Add feedback: loading, saving, selected, invalid, success, progress.
7. Build trust: price clarity, security/privacy cues, no surprise fees, confirmation recap.

5. Design the Main Path First

The main path should feel like:

Recognize goal -> choose recommended path -> verify recap -> commit -> recover if needed

Prefer these moves:

• Recommended option with explicit reason.
• Smart defaults from context.
• Guest checkout where possible.
• "Full name" instead of first/last unless legally required.
• Single email field; no confirmation duplicate.
• Visible labels, not placeholder-only labels.
• Optional account creation after purchase, not before checkout.
• Basic settings visible, advanced collapsed.
• Inline edit for simple settings; full form only for complex edits.
• Recap before destructive or costly apply.

6. Use Math as Constraint, Not Decoration

Use proven interaction math first:

• Hick: fewer competing choices reduce decision time.
• Fitts: larger/closer targets are faster and safer.
• Miller/chunking: group fields and options into small meaningful sets.
• Tesler: complexity cannot disappear; move it from user decision time into system defaults, validation, and progressive disclosure.

Use visual math second:

• 4/8 px spacing scale for rhythm.
• Type scale around 1.2-1.333 for hierarchy.
• 45-75 characters per text line.
• Touch targets: 44 px preferred; 24 px absolute WCAG 2.2 minimum where space constrained.
• Golden ratio may inspire composition, but never outranks usability, accessibility, responsiveness, or clarity.

7. Audit Output

When auditing, produce:

## Choice UX Report

**Flow:** [checkout / pricing / signup / settings / configurator / wizard]
**Primary action:** [what user must complete]
**Main blocker:** [top friction source]

### Score

| Dimension | Score /10 | Notes |
|-----------|-----------|-------|
| Decision Load |  |  |
| Field Friction |  |  |
| CTA Clarity |  |  |
| Error Prevention |  |  |
| Feedback & State |  |  |
| Trust & Reassurance |  |  |
| Accessibility |  |  |
| Lifecycle Consistency |  |  |

### Must Fix
- [impact] [fix] [location if available]

### Should Fix
- [impact] [fix] [location if available]

### Nice To Test
- [hypothesis] [metric]

### Proposed Flow
1. [step]
2. [step]
3. [step]

### Copy / UI Rewrites
- CTA: "[old]" -> "[new]"
- Label: "[old]" -> "[new]"
- Error: "[old]" -> "[new]"

8. Implementation Rules

When editing code:

• Preserve existing framework, component library, tokens, and routing.
• Use existing design-system primitives before creating new components.
• Keep changes close to the flow under review.
• Do not add decorative cards, hero sections, or marketing copy unless the flow needs them.
• Add visible focus states, semantic controls, proper labels, and usable disabled/loading/error states.
• Verify responsive behavior if the project has a runnable frontend.

Decision Gate

Before finalizing, confirm:

• Main path has only one primary CTA per step.
• Every required field is justified.
• Every optional/advanced choice is hidden or deferred.
• User always knows current state, next step, and how to recover.
• Create/edit/delete/clone flows reuse the same vocabulary, section order, summary, and state model.
• Checkout/signup/settings can be completed by keyboard.
• Mobile targets and text fit without overlap.
• Visual hierarchy guides the eye without relying on decoration.

Handoffs

Recommend handoffs; do not auto-run them unless the user asks.