zenit UI dev Skill

Claude Code などの AI Agent 向けの開発マニュアルです。インストールすると、Agent は zenit の UI を書くときにまず既存コンポーネントを選び、token と recipe でスタイルを付け、zenit のライフタイムに沿って状態を管理し、引き渡す前に自らビルドしてスクリーンショットで確認します。

ダウンロード

アーカイブの中身は標準的な Agent Skill フォルダーです。エントリーの SKILL.md は短く、ルールと判断表だけを載せています。詳細は references/ に分割されており、Agent は必要なときだけ読むのでコンテキストを圧迫しません。

インストール

1. 1
   Skill フォルダーに置く

   個人で使うなら ~/.claude/skills/ に置けば全プロジェクトで有効です。チームで共有するならリポジトリの .claude/skills/ に置いてコミットすれば、クローンした全員が使えます。

2. 2
   Agent のセッションを再起動

   Claude Code はセッション開始時に Skill をスキャンします。新しいセッションを開き、/skills に zenit-ui-dev が表示されればインストール完了です。

3. 3
   いつもどおり依頼する

   zenit の UI に関わるタスクでは自動で読み込まれます。「zenit-ui-dev skill を使って」と明示してもかまいません。

ダウンロード後、ユーザーフォルダーに展開します（全プロジェクトで有効）：

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

または、プロジェクトに展開してコミットします（チームで共有）：

.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

中身

おすすめ：Pencil でデザイン

Pencilpen.dev

推奨ワークフロー · PENCIL + SKILL

Pencil と組み合わせて、デザインから AI で実装

Pencil で画面を描き、この Skill を使って Agent に実装させるのがおすすめです。.pen の Flex レイアウト、間隔、角丸、文字サイズ、lucide アイコンは zenit のモデルとよく似ています。Skill にはフィールド対応表と design_diff 比較ツールが付属しているので、Agent は感覚ではなく数値で再現できます。

Pencil について

1. 01.penPencil のデザイン
2. 02MCPAgent が正確な数値を読む
3. 03zigwidgets + token で zenit コード
4. 04diffデザインとの数値比較

1. 1
   Pencil MCP を接続

   Agent で Pencil の MCP server を有効にし、.pen ファイルを開きます。Skill は .pen を MCP 経由でしか読みません。MCP はデザイン変数を展開し、解決後の実寸を返します。この 2 つこそ忠実な再現に必要なものです。

2. 2
   画像ではなく数値を読む

   Agent はまず Get(nodeId, { resolveVariables: true }) で gap、padding、角丸、文字サイズ、色を取得し、対応表に従って zenit に書き換えます：fill_container → .fill()、chevron-down → ui.icons.chevron_down。

3. 3
   一致するまで数値比較

   デザインを scale 2 で書き出し、tools/shot.ts で実ウィンドウをキャプチャします。tools/design_diff.ts がずれ、サイズ差、ヒートマップ、配色のずれを報告し、Agent はそのヒントに沿って修正します。1 ラウンドは約 5 秒です。

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

使い方

特別な構文は不要です。欲しい UI や問題を説明するだけです。うまくいく依頼の例をいくつか挙げます：

Pencil MCP で開いている .pen の「Settings」フレームを読み取り、zenit で設定ウィンドウとして再現して、design_diff のスコアが 90 を超えたら渡してください。
zenit でこのアプリに設定ウィンドウを追加してください。左にカテゴリ一覧、右にフォーム、変更は即時反映です。
src/views/sidebar.zig に手書きされたスタイルを styles.zig + recipe に移行してください。
ファイルツリーが 5 万ノードになるとスクロールがカクつきます。原因を調べて修正し、修正後のスクリーンショットを見せてください。

内容の出典

Skill のルールは 2 つのプロジェクトに由来します。zenit フレームワーク本体（公開 API、サンプル、コンポーネントカタログ、テストツール）と、zenit で開発された本番運用の macOS エディター（大規模アプリの階層化、ネイティブ統合、修正履歴）です。サンプルコードは可能な限りこの 2 つのリポジトリでコンパイルが通るコードから取り、本マニュアルと一致させています。

ソースはサイトリポジトリの skill/zenit-ui-dev/ にあり、ビルド時に scripts/pack-skill.mjs でパッケージされます。SKILL.md を直接読むこともできます。