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.zipInstalls 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.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
When to use craft
- →Build a new dashboard
- →Create landing page
- →Implement auth screens
About this skill
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: dashboard → references/recipe-dashboard.md · landing → references/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:
- The Craft Read (repeat)
- Which signature bet was built
- Checklist results
- 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.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| craft (this skill) | 0 | 22d | No flags | Advanced |
| ui-ux-pro-max | 1,909 | 4mo | Review | Intermediate |
| ui-styling | 12 | 8mo | Review | Beginner |
| elegant-design | 21 | 4mo | Review | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by educlopez
View all by educlopez →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.
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.
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.
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.
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.
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.