# Cli Forge Choice Ux

> >

- **Type:** Skill
- **Install:** `agentstack add skill-destynova2-cli-code-skills-cli-forge-choice-ux`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [Destynova2](https://agentstack.voostack.com/s/destynova2)
- **Installs:** 0
- **Category:** [Cloud & Infrastructure](https://agentstack.voostack.com/c/cloud-infrastructure)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [Destynova2](https://github.com/Destynova2)
- **Source:** https://github.com/Destynova2/cli-code-skills/tree/main/cli-forge-choice-ux

## Install

```sh
agentstack add skill-destynova2-cli-code-skills-cli-forge-choice-ux
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

> **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:

| Flow | User intent | Main risk |
|------|-------------|-----------|
| Checkout/order | Complete purchase | Abandonment from friction or mistrust |
| Pricing/plan picker | Choose the right offer | Choice anxiety, hidden constraints |
| Signup/trial | Create account | Too many fields before value |
| Onboarding/setup | Reach first value | Tutorial fatigue, blank-slate confusion |
| Settings/config | Change behavior safely | Fear of breaking things |
| Product configurator | Build a valid option set | Invalid combinations, overload |
| Wizard | Complete guided setup | Asking too much too early |
| Resource lifecycle | Create, edit, clone, resize, delete a resource | User loses context between operations |

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:

| Operation | Same UI grammar | Different safety layer |
|-----------|-----------------|------------------------|
| Create | Same sections, labels, defaults, summary | Explain new resource impact |
| Edit/resize | Same sections pre-filled from current state | Show diff: before -> after |
| Clone | Same create flow pre-filled from source | Highlight inherited values |
| Delete/cancel | Same resource summary and naming | Require explicit destructive confirmation or undo |
| Restore/rollback | Same summary and status language | Show target restore point and data loss risk |

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:

```markdown
## 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

| Need | Recommend |
|------|-----------|
| General frontend polish | `frontend-design` or a project design system |
| Technical UI best-practice audit | Vercel-style web interface checklist |
| Marketing page copy/CRO beyond the flow | CRO/copywriting skill |
| Config wizard lifecycle | `/cli-audit-wizard` |
| Performance bottleneck | `/cli-forge-perf` |

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

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [Destynova2](https://github.com/Destynova2)
- **Source:** [Destynova2/cli-code-skills](https://github.com/Destynova2/cli-code-skills)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-destynova2-cli-code-skills-cli-forge-choice-ux
- Seller: https://agentstack.voostack.com/s/destynova2
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.