UI Craft skill
A skill and CLI for agents: UI without the templated look, 25 commands, rule-based anti-slop checks and a 0 to 100 quality score
- 432 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- The ui-craft binary writes settings into your agents' configuration, taking backups, and the install script arrives through a curl command
- The MCP server starts through npx, and the detector can open addresses you give to check the first screen
- The hooks layer runs checks in the project before files are written
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/ui-craftDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The ui-craft binary writes settings into your agents' configuration, taking backups, and the install script arrives through a curl command
- The MCP server starts through npx, and the detector can open addresses you give to check the first screen
- The hooks layer runs checks in the project before files are written
This is third-party code. Review the repository files before installing.
What it does
UI Craft teaches a coding agent to design interfaces that nobody mistakes for generated ones. The core is the `ui-craft` skill: before coding, the agent asks about accent, font and style, then follows rules for layout, typography, color, motion, accessibility, dashboards, tables and landing pages. Knobs set shared defaults: finish depth, motion intensity, density and composition variance. Three style variants cover different surfaces: minimal, editorial and dense dashboard. 25 commands come with the skill. `/craft dashboard` builds a screen and counts as done only after a 10-item acceptance bar. `/critique`, `/audit` and `/heuristic` review a finished interface against Nielsen's 10 heuristics, six design laws and five persona walkthroughs, and every finding is tagged by business impact. `/brief`, `/tokens` and `/remember` record context that every later session reads, and `/finalize` wires the checks into review and CI. Checks that need no model sit in a separate layer. The `ui-craft` binary installs the system into Claude Code, Cursor, Codex, Gemini and OpenCode, backs up their settings and can roll back. The `ui-craft-mcp` package offers seven tools, including an anti-slop scan with 43 rules and the UICraftScore.
Who it is for. For front-end developers and design engineers who hand an agent a UI and want a result worth shipping, plus an objective score in review and CI.
Good fit when
- You need a dashboard, landing page, login form or table and do not want gradient cards and bouncy animation by default
- A finished page must be reviewed against heuristics, design laws and persona walkthroughs with business-impact ratings
- You want the project's design context saved in files so every new session works in the same token system
- You need UI checks in CI: anti-slop rules, token drift and a 0 to 100 score as a merge gate
- You have one big surface that the skill should walk through all three levels in one run with `/sddesign`
Not a fit when
- You need a library of ready components: the skill ships no components, it sets rules and checks
- You need a check against a brand book: the skill respects the project's tokens, but you verify brand compliance yourself
- The project has no UI: server code and scripts do not need the skill
- You want only the skill with commands and none of the other layers: `npx skills add` fits, but the MCP checks and review agents must then be wired by hand
Example request
/craft dashboard for subscription analytics: a table, three metrics and a revenue chart, dense layoutLimitations
Of the six CLI binaries that ship, not all are exercised. macOS on Apple Silicon, Linux x86-64 and Windows x86-64 pass the test suite, while macOS on Intel, Linux arm64 and Windows arm64 are built and published but never run. On Windows the suite has been green only since version 1.0.16: five bugs were found there earlier. Installing with a nearly full disk and two simultaneous installs were not tested on any system.
Installing the skill through `npx skills add` gives the skill and commands only, with no agents, MCP or hooks. A global install through that command puts files in `~/.agents/skills`, while Claude Code reads `~/.claude/skills`, so you need a link or another route. The UICraftScore comes from static analysis on three signals and is a guide, not a designer's verdict. Accessibility checks cover five static rules. The install script from the curl command downloads and verifies a checksum, so read it before running.
How to disable. Run `ui-craft uninstall`, which removes the written blocks and wired components. `ui-craft rollback` restores saved settings, and backups sit in `~/.ui-craft/backups/`. The Claude Code plugin is removed with `/plugin uninstall ui-craft`.
FAQ
How do I install UI Craft in Claude Code?
There are three routes. The binary installs everything: `curl -fsSL https://skills.smoothui.dev/install | bash`, then `ui-craft install`. The Claude Code plugin: `/plugin marketplace add educlopez/ui-craft` and `/plugin install ui-craft`. The skill only: `npx skills add educlopez/ui-craft`.
What are rungs 0 to 3?
Rung 0 is simply asking for UI as before. Rung 1 is single commands such as `/craft` and `/polish`. Rung 2 records context with `/brief`, `/tokens` and `/remember`. Rung 3 adds checks in review and CI. Climb when you need the next capability.
How do the MCP checks differ from the skill?
The skill covers taste and decisions and relies on the model. The `ui-craft-mcp` package covers checks that return the same output for the same input: anti-slop signals, token drift, an acceptance list and a composite score.
What makes up the UICraftScore?
The score starts at 100 and loses points for anti-slop findings by severity, 2 points per token deviation and accessibility violations. The formula, weights and grade bands are published in the repository, and a regression set of 8 fixtures separates slop from designer work.
Can it check only the changes in a commit?
Yes. The scanner takes `--scope` and `--base`, and `--fail-on` sets the failure threshold. `npx ui-craft-detect init-hook` installs a pre-commit hook, and `npx ui-craft-detect@latest ci install` installs a GitHub Actions workflow with a pull request comment.
Which agents are supported?
Claude Code, Cursor, Codex, Gemini and OpenCode. The review agents `design-reviewer` and `a11y-auditor` work in Claude Code and OpenCode, and other components install into any environment with MCP.
Discussion
No questions or reviews yet.
Related
SkillsSkills for design engineers: quick UI cleanup, accessibility, metadata and animation performance fixes
A registry of installable design skills: ready SKILL.md and DESIGN.md files with tokens, component rules and accessibility for different styles
Make interfaces feel better
make-interfaces-feel-better
A skill about the small interface details: animations, typography, icons, shadows, radii, optical alignment and hit areas
An MCP server and skill for interfaces: 31 design systems for shadcn/ui, UI and UX principles and accessibility review for agent-written code
A kit of skills, tokens and rules that turns Claude into a design architect: DTCG tokens, components, accessibility and objective quality gates
A skill that bans the stock AI interface with floating cards, gradients and glass and sets plain sizes, radii and shadows like Linear
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Repository stars | Main difference |
|---|---|---|---|
| UI Craft (this card) | no | 432 | |
| Impeccable | no | 104,096 | 23 commands, live browser iteration and 61 detector rules, without the install CLI layer or the UICraftScore |
| Interface Design | no | 5,930 | interface memory and consistency for Claude Code, without MCP checks or a score |
| Make interfaces feel better | no | 3,926 | small interface details: animation, typography, shadows and radii, without commands or checks |
README in short
The description opens with the promise of designer-grade UI and a four-rung ladder, then compares results with and without the skill. It details three install routes, a platform support table with honest test gaps, the commands by rung and thirty-two domain references. The agents, the anti-slop detector, the quality score and the MCP server follow.
README badge
Original SKILL.md
--- name: ui-craft description: "Use for UI design and implementation work to avoid generic AI-looking interfaces. Provides anti-slop rules, a required discovery phase before coding, and guidance for layout, typography, color, motion, accessibility, dashboards, tables, landing pages, theming, and polish. Trigger when editing UI code or reviewing and refining components, pages, screens, layouts, animations, responsive behavior, or design systems." argument-hint: "[action: build|animate|review|polish|audit] [target]" --- # UI Craft You are a design engineer. Every decision below is one you make deliberately and can defend — never a default you inherited. ## The Ladder (use this when explaining ui-craft to the user) One progression, four rungs. Never describe ui-craft as "layers" or "modes" — use these rung names, and name the rung the user is on before suggesting a command. | Rung | User wants | They do | They get | Effort | |------|-----------|---------|----------|--------| | **0 · Ask** | better UI, zero effort | ask for UI as always | taste by default: real hierarchy, system tokens, no slop | none | | **1 · Direct** | control one pass | `/craft`, `/critique`, `/polish`, `/animate`, … | a focused pass on one surface | one command | | **2 · Persist** | consistency across sessions | `/brief`, `/tokens`, `/remember` | durable design context every future session reads | write once | | **3 · Enforce** | it can't regress | `/finalize`, review agents, MCP gates, score, `ui-craft-detect` | gates in review/CI + a 0-100 number | wire once | `/sddesign` is **not** a rung — it is the express lane that walks rungs 1 to 3 for one big surface. When a pass finishes, name the natural next step (`/craft` → `/finalize`, `/brief` → `/tokens`, `/audit` → `/harden`). ## Knobs (ask during Discovery, 1-10) Knobs are **fallback defaults applied only when the user declines to specify**. When the user gives explicit guidance during Discovery — "make it dense", "minimal motion", "ship-fast" — those override the defaults. Knobs are not a starting position; they are a graceful fallback. - **CRAFT_LEVEL** (default 7) — refinement depth. 3 ships fast, 9 is pixel-perfect. - **MOTION_INTENSITY** (default 5) — 1 = hover only, 10 = scroll-triggered, magnetic, page transitions. - **VISUAL_DENSITY** (default 5) — 1 = whitespace-heavy editorial, 10 = dashboard-dense. - **DESIGN_VARIANCE** (default by surface — see [craft-intent.md](references/craft-intent.md)) — 1 = symmetric/safe layout, 10 = experimental composition. Dashboards default 4; landings 7; portfolios 8. Gates layout risk separately from density. Behavior: **CRAFT_LEVEL 8+** → run Polish Pass ([review.md](references/review.md)). **≤4** → skip it. **MOTION_INTENSITY ≤3** → hover only, no entrance/stagger/scroll animations. **4-7** → standard entrances + hover, one scroll reveal max per section. **8+** → scroll-linked, page transitions, magnetic cursor OK (still honor `prefers-reduced-motion`); load [stack.md](references/stack.md) if user opts in. **VISUAL_DENSITY ≤3** → wide spacing, 1-2 items/row. **8+** → dashboard-dense ([dashboard.md](references/dashboard.md)). **DESIGN_VARIANCE ≤4** → symmetric grids, safe product layouts. **5-7** → split heroes, alternating rows, one layout break. **8+** → display-scale drama, asymmetric marketing compositions; **9-10** only when user asks for experimental or brief demands it ([craft-intent.md](references/craft-intent.md)). ## Quick Start: Top 12 The rules that make the biggest difference between "AI-generated" and "designed by a human": 0. **Ask before assuming** — never default accent, font, or style. Analyze project, then ask. Use Knob defaults only when the user explicitly declines to specify. 1. **Sentence case by default** — uppercase = template. Exception: 11-13px category labels with wide tracking — an eyebrow above every heading is template grammar; budget formula in [recipe-landing.md](references/recipe-landing.md) (Eyebrow budget).