Builds complete, shippable UI surfaces using recipe templates for dashboards, landing pages, and auth.

Install

mkdir -p .claude/skills/craft-educlopez && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/17477" && unzip -o skill.zip -d .claude/skills/craft-educlopez && rm skill.zip

Installs to .claude/skills/craft-educlopez

Activation

This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.

One-shot build pipeline for a complete surface from an outcome recipe — inputs (or defaults) → composition → theme → build order → acceptance bar. Use when the user asks for a whole surface ("build me a dashboard", "hazme un dashboard") and expects a shippable result, not component-level help. Invoke when the user asks for craft on their UI, or mentions 'craft' alongside design / UI / frontend work.
402 chars✓ has a “when” triggerlonger than Claude Code's old 250-char listing cap (fine on current versions)
Advanced

Key capabilities

  • Load existing design specifications from `.ui-craft/spec.md`.
  • Run Stack Detection and Discovery for inputs.
  • Lock the plan with composition, theme, and density.
  • Build the surface following a recipe's build order.
  • Run the recipe's acceptance checklist against the built surface.
  • Perform visual self-checks with a screenshot tool if available.

How it works

This skill builds a complete UI surface by loading specifications, gathering inputs, locking a plan, following a recipe's build order, and then verifying against an acceptance bar.

Inputs & outputs

You give it
outcome recipe (dashboard, landing, auth) or user request for a surface
You get back
working code for a complete UI surface passing acceptance criteria

When to use craft

  • Build a new dashboard
  • Create landing page
  • Implement auth screens

About this skill

<!-- 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 the ui-craft skill. This command BUILDS — it ends with working code that passes the recipe's acceptance bar.

Recipes available: dashboardreferences/recipe-dashboard.md · landingreferences/recipe-landing.md · auth (sign-in/sign-up) → references/recipe-auth.md. If $ARGUMENTS names a surface with no recipe yet (settings, docs, e-commerce), say so and fall back to standard Build mode with the closest references — do not improvise a fake recipe.


Step 0 — Load spec (if present)

Before anything else: if .ui-craft/spec.md exists and contains a ## Surface: <name> section whose name matches $ARGUMENTS, load that section now. Its chosen composition, component inventory, state lattice, and acceptance bar take precedence over the recipe defaults for all downstream steps. Note which acceptance bar items came from the spec vs. recipe defaults.

Step 1 — Inputs

Run Stack Detection + Discovery Step 1 (existing tokens, .ui-craft/brief.md).

Load references/craft-intent.md.

Ask the recipe's Step 0 questions in ONE compact prompt, pre-filling anything $ARGUMENTS or the brief already answers. If the user declines, says "you decide", or has answered before in this session: apply the recipe defaults silently and say which were applied. Never ask twice; never block.

Set DESIGN_VARIANCE from craft-intent defaults for this surface type unless the user or brief specifies otherwise.

Step 2 — Craft Read + lock the plan

Output the Craft Read (one line, craft-intent §1) before any code. Include: surface kind, audience, product vs marketing language, theme/accent, variance, signature bet.

From the answers: composition + theme preset (or existing tokens) + density + variance + signature bet. If no brand direction, rotate one axis (craft-intent §6) and name it.

Print a short plan (5–7 lines): Craft Read, composition name, theme, signature bet, what's above the fold, what's deferred — then proceed unless the user objects.

Step 3 — Build

Follow the recipe's Build order EXACTLY (tokens → shell → hero tier → primary region → remaining tiers → states → keyboard → finish). Load the references each step names plus craft-intent.md patterns for this surface type. Build the signature bet in this pass — not later.

States and keyboard are build steps, not polish — a surface without empty/loading/error states is not done.

Step 4 — Acceptance bar

Run the recipe's acceptance checklist against the built surface. Fix every unchecked item before reporting — the bar is the definition of done, not a suggestion.

Visual self-check (when a screenshot tool is reachable): if a Playwright/browser MCP or similar is available, capture the built surface at desktop width and look at it before reporting — a render exposes spacing collisions, hierarchy ties, and dead zones that code review can't. Run the similar-prompt self-test (craft-intent §1) against the screenshot: would this exact page pass for a different brand in the category? If yes, strengthen the signature before reporting. No tool available → skip silently, never block.

Report to the user:

  1. The Craft Read (repeat)
  2. Which signature bet was built
  3. Checklist results
  4. Any item the user explicitly waived

Lead with intent, not a findings dump. Use the Review Format table only for fixes made in this pass.

At CRAFT_LEVEL ≥ 8, finish with the full /finalize gate instead of the recipe's minimum passes.

Next step: /finalize — run the pre-ship gate (rung 3). If this project has no brief yet, /brief first (rung 2).

When not to use it

  • Do not improvise a fake recipe if the target surface has no recipe yet.
  • Do not ask the user twice for input if they decline or say 'you decide'.
  • Do not treat states and keyboard as polish; they are build steps.

Limitations

  • The skill will not improvise a fake recipe if one does not exist for the target surface.
  • It requires a recipe to be available for the requested surface.
  • It will skip visual self-checks silently if a screenshot tool is not available.

How it compares

This skill provides a one-shot build pipeline for an entire UI surface based on predefined recipes and acceptance criteria, offering a more automated and structured approach than manual component assembly.

Compared to similar skills

craft side by side with the closest alternatives in the catalog.

SkillInstallsUpdatedSafetyDifficulty
craft (this skill)022dNo flagsAdvanced
ui-ux-pro-max1,9094moReviewIntermediate
ui-styling128moReviewBeginner
elegant-design214moReviewIntermediate

Try saying

Example prompts that trigger this skill in your AI assistant.

More by educlopez

View all by educlopez

brief

educlopez

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.

00

audit

educlopez

Technical UI audit — a11y, performance, responsive. Produces a prioritized findings table. Invoke when the user asks for audit on their UI, or mentions 'audit' alongside design / UI / frontend work.

00

distill

educlopez

Reduction pass — cuts content, structure, visuals, and dead code that doesn't answer a user question or drive an action, respecting CRAFT_LEVEL. Use when the UI feels cluttered, has too many CTAs, walls of text, or decorative noise, or when the user says "simplify this" / "it feels too busy". Invoke

00

ui-craft-dense-dashboard

educlopez

Dense dashboard / admin / Bloomberg / Retool / data-heavy internal tools. Locked knobs: CRAFT=7, MOTION=3, DENSITY=9. IBM Plex + mono numbers, semantic palette, 4/8px grid, sparklines, tabular-nums. Trigger on: dashboard, admin panel, data-dense, analytics, Bloomberg-like, Retool-like.

00

critique

educlopez

Design lens critique covering visual hierarchy, clarity, and anti-slop patterns — produces a findings table, no code edits unless asked. Use when the user wants a design review, says "what's wrong with this UI", or needs a second opinion before a handoff or presentation. Invoke when the user asks fo

00

adapt

educlopez

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 adding a new screen that hasn't been tested across viewports, or when the user says "make it responsive" / "fix mobile layout". Invoke when the us

00

You might also like

ui-ux-pro-max

nextlevelbuilder

UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.

1,9092,023

ui-styling

mrgoonie

Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.

12132

elegant-design

rand

Create world-class, accessible, responsive interfaces with sophisticated interactive elements including chat, terminals, code display, and streaming content. Use when building user interfaces that need professional polish and developer-focused features.

21108

web-design-reviewer

github

This skill enables visual inspection of websites running locally or remotely to identify and fix design issues. Triggers on requests like "review website design", "check the UI", "fix the layout", "find design problems". Detects issues with responsive design, accessibility, visual consistency, and layout breakage, then performs fixes at the source code level.

750

design-lab

0xdesign

Conduct design interviews, generate five distinct UI variations in a temporary design lab, collect feedback, and produce implementation plans. Use when the user wants to explore UI design options, redesign existing components, or create new UI with multiple approaches to compare.

735

frontend-design-pro

claudekit

Creates jaw-dropping, production-ready frontend interfaces AND delivers perfectly matched real photos (Unsplash/Pexels direct links) OR flawless custom image-generation prompts for hero images, backgrounds, and illustrations. Zero AI slop, zero fake URLs.

1011

Search skills

Search the agent skills registry