← ClaudeAtlas

shapelisted

Wireframe-first pass — outputs an ASCII layout + state list + content inventory + question list before any code. Use when starting a new screen from scratch or when the user's brief is still ambiguous. Invoke when the user asks for shape on their UI, or mentions 'shape' alongside design / UI / frontend work.
educlopez/ui-craft · ★ 39 · Web & Frontend · score 83
Install: claude install-skill educlopez/ui-craft
<!-- AUTO-GENERATED. Do not edit here. Source: skills/ui-craft/ + commands/*.md. Regenerate with `node scripts/sync-harnesses.mjs`. --> **Context:** this sub-skill is one lens of the broader `ui-craft` skill. If the `ui-craft` skill is also installed, read its SKILL.md first for Discovery + Anti-Slop + Craft Test, then apply the specific lens below. Shape the UI for the target the user described before writing code. Load the `ui-craft` skill. This command produces a **shape artifact**, not JSX. The point is to force low-fi thinking — content inventory, layout regions, state coverage, open questions — before any component is written. Skipping this step is how generic AI UIs get built: straight to hi-fi, no discovery, every screen looks the same. **Step 1 — Clarify (3-5 questions).** Ask the user before shaping. Don't guess. Minimum questions: - What's the **primary user action** on this screen? (One verb, one object.) - What data is **visible by default** vs **hidden behind a click or tab**? - What does **success** look like — a state, a redirect, a toast? - Who's the **primary user** — first-timer, power user, mobile-first? **Step 2 — Content inventory.** Bullet list of every piece of content that will appear. Annotate each by priority: - **P0** — must be visible on first paint. Cut it and the screen fails. - **P1** — one click away (tab, accordion, drawer). - **P2** — settings-level; rarely accessed. Example: ``` - P0 Headline (one line, the value prop) - P0 Primar