Agent skill

Brief

by educlopez in educlopez/ui-craft

Write or update the project's durable design brief at .ui-craft/brief.md.

MITAuto-check passedFrontend & Design

Install Brief

skills CLI
$ npx skills add educlopez/ui-craft --skill brief -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install educlopez/ui-craft brief --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/educlopez/ui-craft.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.codex/skills/brief .claude/skills/brief && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
brief
GitHub stars
371
Token cost
~1.1k tokens
SKILL.md length
641 words
Files
1
Skills in repo
13
Repo updated
First seen
Licence
MIT

At a glance

Write or update the project's durable design brief at .ui-craft/brief.md.

  • Works in 5 steps: Detect existing brief → Draft a new brief (absent case) → Show before writing → …
  • Asks for brief on their UI
  • SKILL.md covers Step 1: Detect existing brief, Step 2: Draft a new brief…, Step 3: Show before writing and Step 4: Write the file, plus 2 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Brief is an agent skill from educlopez/ui-craft. 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.

Its SKILL.md is about 1.1k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design. The repository describes itself as: Design engineering system for AI coding agents — ship UI with craft-level quality. Install as an agent skill. The licence is MIT.

When your agent uses it

  • Asks for brief on their UI
  • Mentions brief alongside design / UI / frontend work

Example prompts

  • “/brief”

Workflow steps

5 steps, taken from the step headings in SKILL.md.

  1. Detect existing brief
  2. Draft a new brief (absent case)
  3. Show before writing
  4. Write the file
  5. After writing

What it can do on your machine

Read from SKILL.md and the folder at commit ceecc8e. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Brief loads about 1.1k tokens when it runs. Until then it costs about 47 tokens; SKILL.md has 641 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~47
When it runs · the whole SKILL.md, loaded when a task matches
~1.1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from educlopez/ui-craft at commit ceecc8e, republished under its MIT licence (© educlopez). 641 words, ~1,144 tokens.

Download SKILL.mdSave it as .claude/skills/brief/SKILL.md (or your agent's skills folder).
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.

Step 1: Detect existing brief

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.

Step 2: Draft a new brief (absent case)

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.

Show full SKILL.md (180 more words)Show less

Step 3: Show before writing

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.

Step 4: Write the file

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.

Step 5: After writing

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.

Constraints

  • All five sections are required. If one is genuinely unknown, write it as a dated placeholder with [TO DEFINE — YYYY-MM-DD] so the gap is visible.
  • The brief is append-mostly on updates. Never delete past content — mark deprecated with date and reason.
  • No brand names, product examples, or generic SaaS language inside the user's brief. The brief describes their product, not the template.

Next step: /tokens — the brief decides the intent, the tokens encode it (rung 2).

© educlopez, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .codex/skills/brief of educlopez/ui-craft.

Open the folder on GitHubat commit ceecc8e

Compare with similar skills

Brief next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Brief compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Brief this skilleduclopez/ui-craft371—~1.1kAutomated safety check: PassMIT
Web Artifacts Builderanthropics/skills180k41 repos~769Automated safety check: PassApache-2.0
React Doctormakeplane/plane61k12 repos~657Automated safety check: PassAGPL-3.0
Impeccablebestofjs/bestofjs3.1k27 repos~2.6kAutomated safety check: PassMIT
Figma Design System Builderwarpdotdev/warp65k2 repos~4.4kAutomated safety check: PassAGPL-3.0
Web Interface Guidelines Reviewervercel-labs/openreview1.7k98 repos~308Automated safety check: PassNone

Similar skills

  • Web Artifacts Builder

    anthropics/skills

    Official

    Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file.

    180k GitHub starsUsed in 41 repos~769 tokens
    Frontend & DesignAuto-check passed
  • React Doctor

    makeplane/plane

    Scans React code for lint, accessibility, bundle size and architecture issues, reports a health score and checks that changes do not lower it.

    61k GitHub starsUsed in 12 repos~657 tokens
    Frontend & DesignAuto-check passed
  • Impeccable

    bestofjs/bestofjs

    A skill your agent uses when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a…

    3.1k GitHub starsUsed in 27 repos~2.6k tokens
    Frontend & DesignAuto-check passed
  • Builds or updates a design system in Figma from a codebase in ordered phases: discovery, variables and tokens, components, theming and documentation, with checkpoints.

    65k GitHub starsUsed in 2 repos~4.4k tokens
    Frontend & DesignAuto-check passed
  • Web Interface Guidelines Reviewer

    vercel-labs/openreview

    Official

    Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my…

    1.7k GitHub starsUsed in 98 repos~308 tokens
    Frontend & DesignAuto-check passed
  • Tailwindcss Development

    anonaddy/anonaddy

    Always invoke when the user's message includes 'tailwind' in any form.

    4.9k GitHub starsUsed in 10 repos~865 tokens
    Frontend & DesignAuto-check passed

More from educlopez/ui-craft

All 13 skills in this repo
  • Finalize

    educlopez/ui-craft

    Pre-ship gate — runs detector, verifies brief and tokens, applies the 10-pass finish bar, ranks findings by feedback hierarchy.

    371 GitHub stars~1.9k tokensUpdated 1 mo ago
    Auto-check passed
  • Friction Log

    educlopez/ui-craft

    File contributor or agent papercuts as GitHub issues labeled friction, or investigate those issues as the daily friction-log Cloud Agent.

    371 GitHub stars~1.6k tokensUpdated 1 mo ago
    Auto-check passed
  • Remember

    educlopez/ui-craft

    Record a learned design constraint from a correction into the project brief.

    371 GitHub stars~585 tokensUpdated 1 mo ago
    Auto-check passed
  • Sddesign

    educlopez/ui-craft

    Full spec-driven pipeline — walks brief → tokens → shape (spec) → craft (build) → converge → ship in one guided run.

    371 GitHub stars~1.5k tokensUpdated 1 mo ago
    Auto-check passed
  • Start

    educlopez/ui-craft

    Front door. An agent skill from educlopez/ui-craft.

    371 GitHub stars~1.5k tokensUpdated 1 mo ago
    Auto-check passed
  • Tokens

    educlopez/ui-craft

    Audit or establish the project's 3-layer token spine. An agent skill from educlopez/ui-craft.

    371 GitHub stars~1.4k tokensUpdated 1 mo ago
    Auto-check passed

Questions about Brief

What does Brief do?

Write or update the project's durable design brief at .ui-craft/brief.md. Brief is an agent skill from educlopez/ui-craft.md.

When should I use Brief?

Brief fits situations like: asks for brief on their UI; mentions brief alongside design / UI / frontend work.

How do I install Brief in Claude Code?

Run `npx skills add educlopez/ui-craft --skill brief -a claude-code`. Or copy the skill folder (.codex/skills/brief in educlopez/ui-craft) into .claude/skills/brief in your project. Claude Code loads it when a task matches its description.

How do I install Brief in Codex?

Run `npx skills add educlopez/ui-craft --skill brief -a codex`. Or copy the skill folder (.codex/skills/brief in educlopez/ui-craft) into .agents/skills/brief in your project. Codex loads it when a task matches its description.

Can I use Brief in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add educlopez/ui-craft --skill brief -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/brief, .gemini/skills/brief, .github/skills/brief and .opencode/skills/brief in your project.

What does Brief need to run?

SKILL.md names no scripts, command-line tools or credentials: Brief is instructions for the agent only.

Does Brief access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Brief safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Brief use?

Brief is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Brief use?

About 1.1k tokens (SKILL.md is roughly 4.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Brief?

Skills that share tags, products or a category with Brief: Web Artifacts Builder (anthropics/skills, 180k stars), React Doctor (makeplane/plane, 61k stars), Impeccable (bestofjs/bestofjs, 3.1k stars) and Figma Design System Builder (warpdotdev/warp, 65k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Brief?

educlopez (a GitHub user) maintains it in educlopez/ui-craft, which has 371 GitHub stars. The repository holds 13 skills in this directory. The repository was last updated on September 3, 2026.

Source: educlopez/ui-craft on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.