# UX

> UX design workflows: quick wireframes and approach comparisons, full SvelteKit prototypes, or CSS design token synthesis from a live URL. Triggers on: "ux explore", "ux prototype", "ux style-synthesize", "ux allow", "ux help", "quick wireframe", "wireframe this", "explore approach", "single file prototype", "html mockup", "ux prototype", "synthesize styles", "extract design tokens".

- Skill: `cloudvoyant/ux` (Agent Skill, multi-file: 14 files)
- Install (CLI): `npx skillmds@latest add cloudvoyant/ux`
- Raw SKILL.md: https://api.skillmd.com/api/skills/cloudvoyant/ux/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: MIT
- Author: cloudvoyant (https://skillmd.com/u/cloudvoyant)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/cloudvoyant/ux

---


# ux

UX design skill dispatcher.

## Inline Usage

Pass your intent directly on the invocation line — `explore` and `prototype` proceed immediately with no opening question when a description is provided.

```
/ux explore checkout flow
/ux explore nav layouts --slideshow
/ux prototype admin dashboard
```

## Critical Rules

- **Never execute workflow logic here** — this file only parses args and dispatches
- **Step 0 always runs first** — no exceptions
- **Unknown verb → run `help.md`** — never error silently
- **Pass all remaining args through** — workflow receives `$REMAINING_ARGS` unchanged
- **Markdown output: soft-wrap prose, never hard-wrap** — when any ux workflow writes a `.md` artifact (style reports, approach notes, prototype docs), write each paragraph as one continuous line; do not insert manual newlines to wrap prose at a fixed column width. Newlines still separate paragraphs, list items, headings, and code fences. (Full guidance: `references/style-report-template.md`.)

## Step 0: Parse Arguments

The raw invocation args (filled by Claude Code / OpenCode slash commands): `$ARGUMENTS`. If this line is not filled in, read the verb and remaining args from the user's current message.

```bash
VERB="[first non-flag argument, or empty]"
REMAINING_ARGS="[everything after VERB, preserving order and flags]"

case "$VERB" in
  "")           VERB="help" ;;
  "synth")      VERB="style-synthesize" ;;
  "synthesize") VERB="style-synthesize" ;;
esac
```

## Step 1: Dispatch to Workflow

Read and execute `references/workflows/{VERB}.md`, passing `$REMAINING_ARGS` as the argument string.

If `references/workflows/{VERB}.md` does not exist, fall back to `references/workflows/help.md` and note the unknown verb.

## Workflow Index

- **allow** (`references/workflows/allow.md`) — pre-approve permissions for background agents
- **explore** (`references/workflows/explore.md`) — quick wireframe or approach comparison (single HTML file)
- **help** (`references/workflows/help.md`) — print command reference
- **prototype** (`references/workflows/prototype.md`) — full SvelteKit prototype with components
- **style-synthesize** (`references/workflows/style-synthesize.md`) — extract and synthesize CSS design tokens from a URL