ui-craft

Q: How do I install ui-craft?

Run npx skills add https://github.com/podo/design-agent-skills --skill ui-craft in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/ui-craft/ (personal) or .claude/skills/ui-craft/ (project).

by podoFrontend & Design

Design engineering skill for AI coding agents: opinionated rules for how interfaces should look, move, and feel, a required discovery phase before coding, domain references, three style variants (minimal, editorial, dense-dashboard), and an anti-slop approach that flags generic patterns such as centered hero sections, Inter-only typography, and three-column card grids. Covers premium UI taste, component patterns, and design-engineering workflows.

Installs: 231
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/podo/design-agent-skills --skill ui-craft

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads ui-craft automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

ui-craft

Catalogue stub — full package: educlopez/ui-craft

Decision tree

Is the full skill already installed? This package installs 4 skills (ui-craft, ui-craft-minimal, ui-craft-editorial, ui-craft-dense-dashboard); checking the first.
- Global: f=~/.agents/skills/ui-craft/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
- Project: f=.agents/skills/ui-craft/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
- installed → the skill is installed as ui-craft, invoke it and proceed
- pointer → go to step 2

Detect scope, then install:

[ -e ~/.agents/skills/ui-craft ] && echo "global" || echo "project"

Global:

npx skills add educlopez/ui-craft --skill ui-craft ui-craft-minimal ui-craft-editorial ui-craft-dense-dashboard -g -y

Project:

npx skills add educlopez/ui-craft --skill ui-craft ui-craft-minimal ui-craft-editorial ui-craft-dense-dashboard -y

Claude Code: send a command as a chat message starting with ! to run it without leaving the conversation.

Claude Code plugin route:

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

Heads-up

Requires: Plugin route only: bundles the ui-craft-mcp quality-gate MCP server, which Claude Code starts with npx (downloads and runs an npm package)
License: MIT

Invoke after install

Skill names: ui-craft, ui-craft-minimal, ui-craft-editorial, ui-craft-dense-dashboard
Trigger phrases: "ui-craft", "anti-slop", "design engineering", "slash commands for design"

What it does

UI Craft gives AI coding agents the design knowledge they are missing: not templates or component libraries, but craft rules about layout, typography, color, motion, accessibility, dashboards, tables, landing pages, theming, and polish, plus a discovery step that reads the project's existing tokens before building. The main ui-craft skill routes by intent (build, animate, review, polish, audit) and tests every UI against "would someone believe AI made this?". Three variants lock the knobs for a style: ui-craft-minimal (clean, whitespace-heavy, Linear/Notion-like), ui-craft-editorial (magazine and long-form), and ui-craft-dense-dashboard (data-heavy admin tools).

The skills CLI route installs the skill and its variants only. Upstream also ships separate command-pass skills with generic names (craft, critique, polish, audit, animate, brief, tokens, and others), a Go CLI, review agents, and an MCP quality-gate server (the Claude Code plugin bundles the agents and the server). The command passes are left out of the default install because their short names collide with unrelated skills (animate); add any of them by name after --skill if you want them.

When NOT to use

Backend, API, or data tasks with no UI component
When you only need a single focused skill (consider taste-skill for lighter touch)

FAQ

What does the ui-craft skill do?

How do I install ui-craft?

Run npx skills add https://github.com/podo/design-agent-skills --skill ui-craft in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/ui-craft/ (personal) or .claude/skills/ui-craft/ (project).

Which AI agents can use ui-craft?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is ui-craft safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains ui-craft?

It is published by podo in podo/design-agent-skills. It has 231 recorded installs.

More from podo/design-agent-skills

View all →

distinctive-frontend

podo/design-agent-skills

Generates distinctive interfaces that avoid generic AI aesthetics, using extreme typography, cohesive themes (Cyberpunk, Brutalist, Vaporwave, Nordic Minimalism), orchestrated staggered animations, and layered backgrounds. Originally published as Koomook/claude-frontend-skills; installed from a verbatim mirror.

Frontend & Design589 installs