New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Sddesign

by educlopez in educlopez/ui-craft

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

MITAuto-check passedFrontend & Design

Install Sddesign

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

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

GitHub CLI
$ gh skill install educlopez/ui-craft sddesign --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/sddesign .claude/skills/sddesign && 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
sddesign
GitHub stars
371
Token cost
~1.5k tokens
SKILL.md length
764 words
Files
1
Skills in repo
13
Repo updated
First seen
Licence
MIT

At a glance

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

  • Works in 4 steps: Gate detection (does the artifact exist?) → Offer prompts (run phase X or skip?) → Progress reporting (the checklist) → …
  • Asks for sddesign on their UI
  • SKILL.md covers ORCHESTRATE-ONLY RULE, Progress Checklist, Pipeline Gates and Precedence
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

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

Its SKILL.md is about 1.5k 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, covering Spec-driven development. 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 sddesign on their UI
  • Mentions sddesign alongside design / UI / frontend work

Example prompts

  • “sddesign”
  • “/sddesign”

Workflow steps

4 steps, taken from the first numbered list in SKILL.md.

  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)

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

Sddesign loads about 1.5k tokens when it runs. Until then it costs about 79 tokens; SKILL.md has 764 words of instructions outside code blocks.

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

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). 764 words, ~1,549 tokens.

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

ORCHESTRATE-ONLY RULE

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.

Progress Checklist

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).

Pipeline Gates

Gate 1 — Brief

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.

  • User confirms → run /brief. When it completes, mark [✓] brief.
  • User declines → mark [–] brief. Note downstream impact: "no brief → craft will use skill defaults; composition will not be anchored to project principles."
Gate 2 — Tokens

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.

  • User confirms → run /tokens. When it completes, mark [✓] tokens.
  • User declines → mark [–] tokens. Note downstream impact: "no token spine → craft will establish a minimal inline token set; it won't match an existing system."
Gate 3 — Shape (spec)

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.

  • Persist completes → .ui-craft/spec.md is written (or the surface section is appended). Mark [✓] shape (spec).
  • User explicitly opts out of persist → mark [–] shape (spec, unsaved). Note downstream impact: "no spec.md → craft (build) will build against shape's printed output; acceptance bar will not be persisted."
Show full SKILL.md (315 more words)Show less
Gate 4 — Craft (build)

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.

Gate 5 — Converge

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).

  • If the loop gate passes (zero critical findings) → mark [✓] converge.
  • If budget exhausted with open findings → mark [>] converge (open findings). List unresolved findings from the loop report.
Gate 6 — Ship

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."

Precedence

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 spec section to reflect the winning choice and note the brief §6 reference.

Next step: Ship. The pipeline already walked rungs 1 to 3; .ui-craft/spec.md is the record for the next session.

© 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/sddesign of educlopez/ui-craft.

Open the folder on GitHubat commit ceecc8e

Compare with similar skills

Sddesign 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.

Sddesign compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Sddesign this skilleduclopez/ui-craft371—~1.5kAutomated safety check: PassMIT
Design First UI Promptingnirholas/three.ws2271 repos~764Automated safety check: PassApache-2.0
Aceharness Spec CodingTheAceTeam/AceHarness105—~2.7kAutomated safety check: PassCustom licence
OpenSpec Guided OnboardingFission-AI/OpenSpec71k1 repos~4.5kAutomated safety check: PassMIT
CCPM Project Managementautomazeio/ccpm8.4k—~1.1kAutomated safety check: PassMIT
Preline UI Components via MCPhtmlstreamofficial/preline6.5k—~2.9kAutomated safety check: PassCustom licence

Similar skills

  • Design First UI Prompting

    nirholas/three.ws

    A skill your agent uses when you need design-first, spec-driven, skimmable prompts for UI generation.

    227 GitHub starsUsed in 1 repo~764 tokens
    Frontend & DesignAuto-check passed

  • Aceharness Spec Coding

    TheAceTeam/AceHarness

    ACEHarness Spec Coding skill for generating, reviewing, revising, and executing spec-first requirements/design/tasks artifacts tied to workflow steps.

    105 GitHub stars~2.7k tokensUpdated 1 mo ago
    DevelopmentAuto-check passed

  • OpenSpec Guided Onboarding

    Fission-AI/OpenSpec

    Walks you through a complete OpenSpec workflow cycle with narration while doing real work in your codebase.

    71k GitHub starsUsed in 1 repo~4.5k tokens
    Agent WorkflowsAuto-check passed

  • CCPM Project Management

    automazeio/ccpm

    Runs a spec-driven workflow from PRD to epic to GitHub issues to parallel agents, with status, standup and blocked-work reports from bundled scripts.

    8.4k GitHub stars~1.1k tokensUpdated 6 mo ago
    Product & Project ManagementAuto-check passed

  • Preline UI Components via MCP

    htmlstreamofficial/preline

    Adds Preline UI components and blocks to HTML files by querying the Preline MCP server, with rules for exact slugs and for clarifying vague requests.

    6.5k GitHub stars~2.9k tokensUpdated 1 mo ago
    Frontend & DesignAuto-check passed

  • Improve UI Audit and Plans

    ibelick/ui-skills

    Audits one product surface against its own design evidence and writes self-contained implementation plans for another agent, without touching product source.

    9.5k GitHub stars~2k tokensUpdated yesterday
    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

  • 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

  • Shape

    educlopez/ui-craft

    Wireframe-first pass — outputs an ASCII layout + state list + content inventory + question list before any code.

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

Categories

Questions about Sddesign

What does Sddesign do?

Full spec-driven pipeline — walks brief → tokens → shape (spec) → craft (build) → converge → ship in one guided run. Sddesign is an agent skill from educlopez/ui-craft. Full spec-driven pipeline — walks brief → tokens → shape (spec) → craft (build) → converge → ship in one guided run.

When should I use Sddesign?

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

How do I install Sddesign in Claude Code?

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

How do I install Sddesign in Codex?

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

Can I use Sddesign 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 sddesign -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/sddesign, .gemini/skills/sddesign, .github/skills/sddesign and .opencode/skills/sddesign in your project.

What does Sddesign need to run?

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

Does Sddesign 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 Sddesign 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 Sddesign use?

Sddesign 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 Sddesign use?

About 1.5k tokens (SKILL.md is roughly 6.2k 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 Sddesign?

Skills that share tags, products or a category with Sddesign: Design First UI Prompting (nirholas/three.ws, 227 stars), Aceharness Spec Coding (TheAceTeam/AceHarness, 105 stars), OpenSpec Guided Onboarding (Fission-AI/OpenSpec, 71k stars) and CCPM Project Management (automazeio/ccpm, 8.4k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Sddesign?

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.