ui-craft

UI Craft

Ship designer-grade UI by default. A design engineering skill for AI coding agents — ask for a dashboard, get one you'd put in production. Not gradient cards and bounce animations.

Website: skills.smoothui.dev

Ask for a surface. Ship it.

/craft dashboard

Three questions (or none — the defaults are strong), a named composition, a production theme preset, and a build that must pass a 10-item acceptance bar before it reports done: "would a designer retouch this?" If a box fails, it isn't done.

For everything else — reviews, animations, forms, polish — the skill routes by intent: just describe what you're building.

What it does

UI Craft gives AI coding agents the design knowledge they're missing. Not templates. Not component libraries. Actual craft knowledge — 30 domain references of opinionated rules about how interfaces should look, move, and feel, plus 21 slash commands to run focused passes on existing code. Stack-agnostic by design.

Every UI gets tested against a single question: "Would someone believe AI made this?" If yes, it starts over.

What makes this different: the only AI design skill that produces a scoreable, defensible critique — Nielsen's 10 usability heuristics × 6 classic design laws (Fitts, Hick, Doherty, Cleveland-McGill, Miller, Tesler) × 5 persona walkthroughs, with every finding tagged by business impact (blocks-conversion / adds-friction / reduces-trust / minor-polish). Paste the scorecard straight into any issue tracker.

Same prompt, different result

Without UI Craft	With UI Craft

More before/after comparisons on the landing page.

Install

Claude Code — recommended

Install as a native plugin (the skill + all 21 slash commands):

/plugin marketplace add educlopez/ui-craft
/plugin install ui-craft

This uses Claude Code's own plugin system, so it's not affected by the global-path issue noted below.

Codex, Cursor, Gemini, OpenCode, Windsurf — and any Agent Skills agent

npx skills add educlopez/ui-craft

Works with any agent that supports the Agent Skills spec. Each agent gets a pre-built mirror under a dedicated folder (.codex/, .cursor/, .gemini/, .opencode/, .agents/). The main ui-craft skill lands as a peer skill; each slash command is materialized as its own sub-skill in non-Claude harnesses (other agents trigger them by intent: "audit my UI", "polish this page").

[!note] Using npx skills add -g with Claude Code? The skills CLI installs global skills to ~/.agents/skills, but Claude Code reads ~/.claude/skills (vercel-labs/skills#693). If the skill isn't picked up, use the plugin install above, install per-project (drop -g), or symlink it:

ln -s ~/.agents/skills/ui-craft ~/.claude/skills/ui-craft

Full reference docs: skills.smoothui.dev/docs.

Other ways

# Clone
git clone https://github.com/educlopez/ui-craft.git ~/.skills/ui-craft
# Git submodule
git submodule add https://github.com/educlopez/ui-craft.git .skills/ui-craft

Discovery phase

Before building anything, the skill analyzes your project for existing design decisions — CSS variables, Tailwind config, font imports, component themes. If your project already has a design system, it respects it. If not, it asks 4 quick questions (style, accent color, font, optional animation stack) so it never defaults to generic blue/Inter.

Knobs

Three numeric knobs (1-10) that the skill asks about during Discovery. They change behavior, not just tone.

Knob	1	10
CRAFT_LEVEL (default 7)	ships fast, skips Polish Pass	pixel-perfect, compound details applied
MOTION_INTENSITY (default 5)	hover states only	scroll-linked, page transitions, magnetic cursor
VISUAL_DENSITY (default 5)	whitespace-heavy editorial	dashboard-dense

At MOTION_INTENSITY 8+ the skill loads references/stack.md only if the user opts into Motion / GSAP / Three.js during Discovery.

Style variants

Three opt-in sibling skills that pre-commit to a style and lock the knobs to matching values. Agents pick them when the user mentions a specific aesthetic or product reference.