friction-log
File contributor or agent papercuts as GitHub issues labeled friction, or investigate those issues as the daily friction-log Cloud Agent. Use when you hit repo…
Full spec-driven pipeline — walks brief → tokens → shape (spec) → craft (build) → converge → ship in one guided run. Writes `.ui-craft/spec.md`. Run when starting a net-new surface from scratch. Invoke when the user asks for sddesign on their UI, or mentions 'sddesign' alongside
$ npx -y skills add educlopez/ui-craft --skill sddesign --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
/sddesignContext preview
The summary Claude sees to decide when to auto-load this skill.
Full spec-driven pipeline — walks brief → tokens → shape (spec) → craft (build) → converge → ship in one guided run. Writes `.ui-craft/spec.md`. Run when starting a net-new surface from scratch. Invoke when the user asks for sddesign on their UI, or mentions 'sddesign' alongside
name: sddesign description: "Full spec-driven pipeline — walks brief → tokens → shape (spec) → craft (build) → converge → ship in one guided run. Writes `.ui-craft/spec.md`. Run when starting a net-new surface from scratch. Invoke when the user asks for sddesign on their UI, or mentions 'sddesign' alongside design / UI / frontend work."
<!-- HARNESS MIRROR — do not edit here. Canonical source: skills/ or commands/. After editing source, copy into cli/assets/<harness>/ and repo-root harness mirrors. -->
**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.
Run the spec-driven design pipeline for `$ARGUMENTS`. Load the `ui-craft` skill.
---
This command **sequences existing phase commands**. It MUST NOT re-implement or duplicate any logic from them. Every composition rule, wireframe algorithm, craft rule, and convergence engine lives in the phase commands. This command contributes only:
1. Gate detection (does the artifact exist?) 2. Offer prompts (run phase X or skip?) 3. Progress reporting (the checklist) 4. Degraded-mode honesty (what was skipped and what that costs)
When in doubt: call the phase command, don't inline its steps.
---
Print this at the start and update it after each gate resolves:
[ ] brief [ ] tokens [ ] shape (spec) [ ] craft (build) [ ] converge [ ] ship
Use `[✓]` for completed/skipped-with-artifact, `[>]` for the current gate, `[–]` for skipped-without-artifact (degraded).
---
Check: does `.ui-craft/brief.md` exist?
**If yes:** mark `[✓] brief`. Note that brief §6 learned constraints and the a11y/correctness floor are in effect for all downstream gates — they take precedence over any spec.md composition choice.
**If no:** offer to run `/brief` now.
Check: does a token spine exist? (Look for CSS variables `--color-*`, `--font-*`, `--accent-*`, a Tailwind `theme.extend` with tokens, or a token file.)
**If yes:** mark `[✓] tokens`.
**If no:** offer to run `/tokens` now.
**Existing-surface guard:** Before running `/shape`, check if `.ui-craft/spec.md` already contains a `## Surface: <name>` block for this surface. If it does, do NOT re-run shape and blindly append a duplicate section — offer to update the existing section or skip shape (the spec already exists).
Run `/shape` for the surface described in `$ARGUMENTS`. Shape produces its full five-step output (content inventory, ASCII layout, state list, open questions).
**Persist in pipeline (default):** Inside the `/sddesign` pipeline, shape's Step 6 spec persist is the default — it is auto-confirmed unless the user explicitly opts out of the spec gate. The persist writes `.ui-craft/spec.md` (or appends the surface section). This is the whole point of the pipeline.
Run `/craft <surface>` where `<surface>` matches the description in `$ARGUMENTS`.
`/craft` declares the **Craft Read** (`references/craft-intent.md`) before building — surface kind, audience, theme/accent, DESIGN_VARIANCE, and the one **signature bet**. The signature bet is built inside this gate, not deferred to converge or polish. If the spec section names a composition, the Craft Read must be consistent with it.
`/craft` loads `.ui-craft/spec.md` before building. If `[✓] shape (spec)` was set, the spec's chosen composition, component inventory, state lattice, and acceptance bar take precedence over recipe defaults — every acceptance bar item from the spec must be green before craft reports done.
If `[–] shape (spec, unsaved)`, craft builds against the shape output printed to the terminal. Note in the checklist.
Mark `[✓] craft (build)` when the build completes.
Run the `visual-anti-slop` preset from `../skills/ui-craft/references/loops.md`. This iterates — evaluate → fix one → re-evaluate — until the zero-critical gate passes or the budget is exhausted (default budget: 3 iterations).
Run `/finalize` verdict. Finalize reports READY / NOT READY / BLOCKED based on the 10-pass finish bar and the brief/token gate.
Print the final verdict and the complete resolved checklist:
[✓] brief [✓] tokens [✓] shape (spec) [✓] craft (build) [✓] converge [✓] ship
**Degraded-mode honesty.** If any gate was marked `[–]`, list them in the ship verdict with their downstream impacts:
> "Skipped gates: tokens (skipped) → token spine not validated; shape (spec, unsaved) → acceptance bar not persisted. These gaps reduce the ship verdict's confidence."
---
Brief §6 learned constraints and the a11y/correctness floor take precedence over spec.md composition choices at every gate. If a constraint conflicts with a spec.md decision, the constraint wins — update the
Ship designer-grade UI by default. A design engineering system for AI coding agents — install it as a skill or as the ui-craft CLI, and your agent starts designing like it has taste. Ask for a dashboard, get one you'd put in production.
Repo: educlopez/ui-craft
File contributor or agent papercuts as GitHub issues labeled friction, or investigate those issues as the daily friction-log Cloud Agent. Use when you hit repo…
Dense dashboard / admin / Bloomberg / Retool / data-heavy internal tools. Locked knobs: CRAFT=7, MOTION=3, DENSITY=9. IBM Plex + mono numbers, semantic…
Editorial / magazine / long-form / Medium / Substack / content-heavy UIs. Locked knobs: CRAFT=9, MOTION=4, DENSITY=3. Serif display + humanist body, wide…
Minimal / clean / Linear / Notion / Vercel / whitespace-heavy UIs. Locked knobs: CRAFT=8, MOTION=3, DENSITY=2. Monochrome + one accent, Inter/Geist, hairline…
Use for UI design and implementation work to avoid generic AI-looking interfaces. Provides anti-slop rules, a required discovery phase before coding, and…
Responsive layout pass covering breakpoints, touch targets, safe areas, and fluid type. Use when the UI has layout or touch issues on mobile/tablet, when…