The zenit UI dev Skill

A development manual for Claude Code and other AI agents. With it installed, an agent writing zenit UI reaches for existing components first, styles with tokens and recipes, manages state on zenit’s lifetimes, and builds and screenshots its own work before handing it over.

Download

The archive is a standard Agent Skill folder: a short SKILL.md entry point holding rules and decision tables, with details split into references/ that the agent reads only when needed.

Install

1. 1
   Put it in a skills folder

   For yourself, use ~/.claude/skills/ (every project). For a team, commit it to the repo’s .claude/skills/ so everyone who clones gets it.

2. 2
   Restart the agent session

   Claude Code scans skills at session start. Open a new session; /skills should list zenit-ui-dev.

3. 3
   Ask as usual

   Any zenit UI task loads it automatically; you can also say “use the zenit-ui-dev skill”.

After downloading, unzip it into your user folder (every project):

~/.claude/skills/
└── zenit-ui-dev/
    ├── SKILL.md
    ├── references/
    └── tools/

Or unzip it into the project and commit it (shared with the team):

.claude/skills/
└── zenit-ui-dev/
    ├── SKILL.md
    ├── references/
    └── tools/

# Codex and other agents that read AGENTS.md: unpack into the repo and reference it
unzip -oq zenit-ui-dev.zip -d .agents/skills
echo '- zenit UI: read .agents/skills/zenit-ui-dev/SKILL.md before writing UI code' >> AGENTS.md

What’s inside

Recommended: design in Pencil

Pencilpen.dev

RECOMMENDED WORKFLOW · PENCIL + SKILL

Pair it with Pencil: design, then build with AI

We recommend designing in Pencil and letting your agent build it with this Skill. Flex layout, spacing, radii, type sizes and lucide icons in a .pen file sit close to zenit’s model; the Skill includes a field mapping and a design_diff tool so the agent ports by the numbers rather than by eye.

About Pencil

1. 01.penPencil design
2. 02MCPAgent reads exact values
3. 03zigzenit code from widgets + tokens
4. 04diffNumeric diff against the design

1. 1
   Connect the Pencil MCP

   Enable Pencil’s MCP server in your agent and open the .pen file. The Skill only reads .pen through the MCP, which resolves design variables and computed sizes. A faithful port needs both.

2. 2
   Read values, not pixels

   The agent first pulls gap, padding, radius, type size and color with Get(nodeId, { resolveVariables: true }), then maps them onto zenit: fill_container -> .fill(), chevron-down -> ui.icons.chevron_down.

3. 3
   Diff until it matches

   Export the design at scale 2, capture the real window with tools/shot.ts, and tools/design_diff.ts reports offset, size delta, a heat map and palette drift; the agent fixes from the hints, about 5 s per round.

SKILL=~/.claude/skills/zenit-ui-dev
bun $SKILL/tools/design_diff.ts --self-test
ZENIT_E2E_FILE_RPC_DIR=$RPCDIR bun $SKILL/tools/shot.ts /tmp/actual.png
bun $SKILL/tools/design_diff.ts /tmp/design/<nodeId>.png /tmp/actual.png

Using it

No special syntax. Describe the UI or the problem; here are a few prompts that work well:

Read the "Settings" frame from the open .pen file with the Pencil MCP, rebuild it in zenit as a settings window, and hand it back once design_diff scores above 90.
Add a settings window to this app with zenit: a category list on the left, a form on the right, changes applied live.
Move the hand-written styles in src/views/sidebar.zig into styles.zig + a recipe.
Scrolling stutters when the file tree has 50,000 nodes. Find the cause, fix it, and show me a screenshot afterwards.

Where it comes from

The rules come from two projects: the zenit framework itself (public API, examples, component catalog, test tooling) and a production macOS editor built on zenit (large-app layering, native integration and fix history). Code samples are taken from compiling code in those repos where possible and match this manual.

Sources live in the site repo under skill/zenit-ui-dev/ and are packed at build time by scripts/pack-skill.mjs. You can also read SKILL.md directly.