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…
Write or update the project's durable design brief at .ui-craft/brief.md. Invoke when the user asks for brief on their UI, or mentions 'brief' alongside design / UI / frontend work.
$ npx -y skills add educlopez/ui-craft --skill brief --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
/briefContext preview
The summary Claude sees to decide when to auto-load this skill.
Write or update the project's durable design brief at .ui-craft/brief.md. Invoke when the user asks for brief on their UI, or mentions 'brief' alongside design / UI / frontend work.
name: brief description: "Write or update the project's durable design brief at .ui-craft/brief.md. Invoke when the user asks for brief on their UI, or mentions 'brief' 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.
Load `references/brief.md` for the brief format before proceeding.
Check whether `.ui-craft/brief.md` exists. Use Read or ls on `.ui-craft/`.
**If it exists:** load its contents. If `$ARGUMENTS` names a specific update ("update principles", "shift target user", "add out of scope"), focus the session there and skip unchanged sections. Otherwise summarize what's in the brief and ask: "What do you want to change?"
**If it doesn't exist:** proceed to Step 2. Also check the repo root for a `DESIGN.md` or `design-tokens.json` (an ecosystem convention some teams already maintain) — if present, read it and pre-fill the brief's answers from it instead of re-asking; note the source. The brief complements an existing design contract, never contradicts it.
Walk the user through the five required sections in a single pass. Ask ONE compact question per section. Do not open five separate prompts unless the user asks for depth.
Compact prompt template:
> "To write your design brief I need five things — answer as tersely as you like, I'll fill in structure: > 1. **Product purpose** — what does it do, in one sentence? > 2. **Primary user** — who, by role and context? > 3. **Principles** — what does this product believe? Give me three to five stances it takes. (If you don't have these yet, say so — I'll run the principles workshop.) > 4. **Success metric** — what does 'the user succeeded on this surface' look like in observable behavior? > 5. **Out of scope** — three to five things this surface deliberately does NOT do."
**Principles workshop case:** if the user says "I don't have principles yet" or gives vague answers ("make it good", "keep it simple"), do NOT fabricate principles from vague input. Load `references/principles-catalog.md` first. The catalog has 42 worked example principles across 8 product categories — use them as conversation seeds, not as templates to adopt literally. Show 2-3 from the closest category to the user's product, then ask which resonate or which they'd flip. Then run the principles workshop from `references/brief.md` as a focused sub-flow: ask for three past design decisions that were debated, then derive candidate principles from the patterns. Refuse to accept platitudes — push back and prompt for substance.
**Parsing long input:** if the user provides a product description or PRD, parse it into the five sections rather than re-asking for information already given. State what you extracted and ask for confirmation or corrections.
**Thin answers:** if an answer is too vague to constrain a design decision, ask one targeted follow-up. Maximum two follow-ups per section before flagging it as incomplete and moving on.
Always show the proposed brief in full before writing the file. Ask: "Does this look right, or anything to adjust?"
Do not write until confirmed.
Create `.ui-craft/` if it doesn't exist. Write the confirmed content to `.ui-craft/brief.md`.
The file must contain all five sections with the exact headings from `references/brief.md`. No omissions.
Tell the user the file is at `.ui-craft/brief.md`. Suggest committing it:
> "Commit `.ui-craft/brief.md` to the repo — it's documentation, not config. The agent reads it every session."
Do not auto-commit. Per project rules, commits require explicit user instruction.
**Next step:** `/tokens` — the brief decides the intent, the tokens encode it (rung 2).
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…