agentleFS
Sign inStart free
podopodo/design-agent-skills/skills/ui-craft/SKILL.md

ui-craft

Skill32 starsChanged 6 months agoMITView on GitHub

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.

18 other projects use a version of this, 1 of them edited.

Adopted by

Most recently taken up by

Used with

Projects with it also use writing-for-agents, prototype and 3 more.

Other files people use alongside this one.

Files found in the same public projects as a version of this one, more often than they turn up anywhere else. Each project counts once, large collections count for less, and this file's own repository is left out.
  • MicrosoftSkill

    writing-for-agents

    Writing documents for agents. Use when creating or editing skills, or modifying AGENTS.md or CLAUDE.md.

    Also in 3 projects that use this

  • GoogleSkill

    prototype

    Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

    Also in 3 projects that use this

  • MicrosoftSkill

    handoff

    Compact the current conversation into a handoff document for another agent to pick up.

    Also in 4 projects that use this

  • GoogleSkill

    tdd

    Test-driven development. Use when the user wants to build features or fix bugs test-first, mentions "red-green-refactor", or wants integration tests.

    Also in 3 projects that use this

  • +1 more from google

The file

We split this skill into the rules it gives an agent

1 rule. 0 are common, 0 are distinctive, and 1 is very specific to this project.

  • 0

    Common

    Most of the 16 edited versions we read keep these.

  • 0

    Distinctive

    This author's own choices. Worth a look.

  • 1

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Very specific:

    When you only need a single focused skill (consider taste-skill for lighter touch)

    line 81

“Common” is measured: kept by at least 6 in 10 of the 16 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

ui-craft

Catalogue stub — full package: educlopez/ui-craft

<!-- das:install:start — generated from stub.yaml by `npm run generate`; edit stub.yaml, not this block -->

Decision tree

  1. 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

  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
<!-- das:install:end -->

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)

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free