UI Craft
A design engineering system for AI coding agents — install it as a skill or CLI, and your agent ships production-grade UI instead of generic AI slop.
The installer writes only each harness's native config, with --dry-run, interactive component selection, pre-write backups, and automatic rollback on failure — scope is proportionate to purpose; the MCP side pulls an external npm package via a pinned `npx -y [email protected]`, a controlled external effect. Deductions: the recommended install is `curl | bash` of a remote script, so transparency rests on the remote payload; state/backups and design memory (project context) live under ~/.ui-craft with data-handling boundaries not spelled out; a past rollback bug deleted files it existed to protect (acknowledged as fixed). Author and MIT license are clear, though the publisher is unverified.
Unusually strong internal consistency: mirror-sync, distribution-contract, version-consistency and deadcode-ratchet checks, `version --check-parity`, all corroborated by the CI workflows present. Deductions: runtime dependency on npm availability for the pinned MCP package (mitigated by check-pin-published at release); failure-message quality is inferred from command descriptions, not directly observed in this static review.
Audience layering is explicit (rungs 0-3), intent-based routing for rung 0, style variants keyed to trigger phrases with locked knobs, and the platform-support table names untested platforms outright — capability boundaries are the repo's strongest suit. Deductions: darwin/amd64 and arm64 binaries are shipped but never tested; disk-nearly-full and concurrent-install conditions are untested on every platform, so real environment coverage is below the advertised surface.
Excellent information architecture (25 commands organized by rung, 32 domain references categorized, install-path comparison table), multi-path install notes with a documented upstream pitfall (skills CLI global-path issue), and limitations stated with rare honesty (five pre-v1.0.16 Windows bugs, untested Intel macOS). Deductions: no FAQ; dual version tracks (repo v0.35.x vs npm package 0.13.0) are declared but confusing; maintenance is single-person with updates keyed to a personal repo.
Output forms are usable (markdown scorecards pasted into trackers, -- output, itemized acceptance bars); the value proposition is specific (design craft knowledge plus a scoreable critique). Deductions: no effectiveness claim (before/after quality, the 10-item bar, the scorer's discrimination) was executed or verified in this static review — all rest on README assertions and screenshots, and adoption costs (installer, learning the rungs) sit with the user.
Several claims cross-corroborate: README's CI/test claims match cli-ci.yml and cli-release.yml; actions are pinned by commit SHA with version comments; a concrete release smoke test is defined; the platform matrix explicitly separates verified from unverified. Deductions: the provided evidence set (README, LICENSE, package., workflows) does not include the 32 domain references, the detector source, or the Go CLI, so most capability claims (heuristic scoring, acceptance bar) cannot be traced to implementations here — fact/inference boundaries must be treated conservatively.
- The recommended install pipes a remote script through `curl | bash`, which cannot be audited before execution; use Homebrew/Scoop or a clone in sensitive environments.
- MCP quality gates pull an external npm package via pinned `npx -y ui-craft-mcp`; version-pinned but still a supply-chain trust surface.
- darwin/amd64, linux/arm64 and windows/arm64 binaries ship untested; disk-nearly-full and concurrent-install conditions are untested on every platform.
- Before v1.0.16, Windows rollback deleted files it was meant to protect — upgrade before relying on rollback.
- Effectiveness claims (scorer, acceptance bar, before/after quality) were not executed or verified; static review does not cover them.
- Repo version (v0.35.x) and npm detector version (0.13.0) run on dual tracks — cite component versions precisely.
What does this agent do, and when should you use it?
UI Craft (educlopez/ui-craft, MIT) packages design craft knowledge for AI coding agents into one system: 32 domain references (typography, color, motion, accessibility, data viz, forms, and more), 25 slash commands, two read-only review agents (design-reviewer and a11y-auditor), seven deterministic MCP tools, plus the ui-craft-detect anti-pattern scanner and a 0-100 UICraftScore. Installation options include a cross-harness Go CLI installer that auto-detects Claude Code, Cursor, Codex, Gemini, and OpenCode and writes native configs, a Claude Code plugin marketplace entry, and npx skills add for any Agent Skills-compatible harness. The skill is stack-agnostic, adapting to Tailwind, CSS Modules, styled-components, vanilla CSS, and Vue/Svelte/Astro SFC styles. Its execution boundary is clear: the skill and commands write code inline in your session; agents are read-only reviewers in fresh contexts; MCP tools and the CLI provide deterministic, reproducible checks that gate CI or git hooks. The documentation is unusually candid about untested platform gaps, such as the never-tested macOS Intel build.
After install, the skill runs a Discovery phase: it reads your project's CSS variables, Tailwind config, and font imports to find existing design decisions, or asks four quick questions (style, accent, font, animation stack) if none exist. /craft produces a named composition, theme preset, and build that must pass a 10-item acceptance bar; /heuristic scores the UI against Nielsen's 10 usability heuristics, 6 design laws (Fitts, Hick, Doherty, Cleveland-McGill, Miller, Tesler), and 5 persona walkthroughs, tagging findings by business impact. /brief and /tokens persist durable design context to .ui-craft/. The standalone ui-craft-detect CLI runs 43 anti-pattern rules with diff-scoped scanning (--scope changed, --base, --fail-on), live URL scanning, agent edit-time hooks for Claude Code and Cursor, and one-command GitHub Action setup via ci install. UICraftScore combines anti-slop, token-discipline, and a11y subscores into a deterministic 0-100 grade (A≥90 … F<60), exposed via the score_ui MCP tool and scripts/eval.mjs.
- A full-stack developer on Claude Code or Cursor who wants /craft dashboard, /craft landing, or /craft auth to produce shippable surfaces instead of generic AI gradient-card layouts
- An engineering team wiring ui-craft-detect into CI with --scope changed --fail-on error so only newly introduced anti-patterns block merges
- A team with an existing design system that wants agents to respect current tokens — Discovery reads existing CSS variables and Tailwind config rather than imposing defaults
- A maintainer wanting independent, uncontaminated judgment on a PR by delegating design-reviewer and a11y-auditor in parallel for a combined design plus a11y sweep
- A product owner who needs a defensible critique scorecard with impact tags (blocks-conversion, adds-friction, reduces-trust) to paste directly into an issue tracker
- A developer on Codex, Gemini, or OpenCode installing via npx skills add and triggering passes by intent ("audit my UI", "polish this page")
What are this agent's strengths and limitations?
- The only design system producing a scoreable, defensible critique: Nielsen 10 heuristics × 6 design laws × 5 personas, every finding tagged by business impact and ready for any issue tracker
- Clean layering of taste vs. deterministic checks: the 43-rule anti-slop detector, token lint, and the fully published UICraftScore formula/weights give reproducible output suitable for CI gates
- Mature cross-harness installer: one static Go binary detects five harnesses, offers à-la-carte component selection, snapshots configs before writes, auto-rolls back on failure, and supports --yes for CI
- Discovery respects your existing design system instead of defaulting to generic blue/Inter; three style variants (minimal/editorial/dense-dashboard) and playful/brutalist presets cover different aesthetics
- Uneven platform test coverage: macOS Intel and Windows arm64 binaries ship untested; Windows support only dates to v1.0.16, before which a Windows-only bug deleted files during rollback
- The npx skills add path is deliberately incomplete — skill only, no review agents, MCP gates, or hooks — and global installs with Claude Code hit the ~/.agents/skills vs ~/.claude/skills path mismatch (vercel-labs/skills#693)
- MCP gates require Node/npx ([email protected]) and the puppeteer URL-scan engine is an optional extra dependency; the system is distributed across a Go binary, npm packages, and skill files with version coherence managed via distribution-manifest.
- Full value requires multi-step setup: Rung 0 is zero effort, but CI gates, design memory, and enforcement demand writing commands, hooks, and workflow files — the ladder costs real effort at each rung
How do you install or deploy this agent?
Recommended: the CLI installer. macOS/Linux: curl -fsSL https://skills.smoothui.dev/install | bash; Windows: irm https://skills.smoothui.dev/install.ps1 | iex. The script downloads a checksum-verified static Go binary, then run ui-craft install to detect harnesses (Claude Code/Cursor/Codex/Gemini/OpenCode), select components interactively (or --yes for CI), and write native configs — all writes are idempotent and backed up to ~/.ui-craft/backups/. Alternatives: Homebrew (brew install --cask educlopez/tap/ui-craft), Scoop, the Claude Code plugin (/plugin marketplace add educlopez/ui-craft then /plugin install ui-craft, which bundles a pinned .mcp. auto-registering the MCP gates), or npx skills add educlopez/ui-craft for any Agent Skills-compatible harness (skill only — no MCP gates, review agents, or hooks). Manual MCP wiring: { "mcpServers": { "ui-craft": { "command": "npx", "args": ["-y", "[email protected]"] } } }.
How do you use this agent?
Start with /ui-craft:start — it reads your project (framework, tokens, brief, existing UI) and names the rung you're on plus the next command. Rung 0: just request UI as you always would ("Build a pricing page") and the skill routes by intent to build, motion, review, or polish passes. Higher rungs: /craft dashboard|landing|auth for one-shot builds; /heuristic <path> for the scored critique; /critique, /audit, /polish, /animate for focused passes; /brief and /tokens to persist design context across sessions; /finalize as the pre-ship gate running the 10-pass finish bar. On the command line, run npx ui-craft-detect ./src -- to scan source or a deployed URL, and node scripts/eval.mjs src/components/ --threshold 80 to score files or directories as a CI gate.
How does this agent compare with similar options?
The README positions itself against templates and component libraries, and shows with/without before-after screenshots, but the source material does not name any specific competing repository.