UI Skills — Design Engineers 向け Agent Skills（ibelick/ui-skills）

何か

UI Skills は、コーディングエージェント（Codex / Cursor / Claude Code など）に渡す UI 向けスキル集と、タスクに合わせて最小文脈を選ぶ CLI のセット。サイト本体は Astro（Cloudflare）、スキル本文は SKILL.md、カタログは src/data/registry.ts が正本。

6 同梱 SKILL.md

179 レジストリ条目

≤3 同時ロード上限

MIT ライセンス

使い方の起点: npx ui-skills start がルーティング用の ui-skills-root を出し、カテゴリ確認 → 最小スキル選択 → 実装、の順に進める。

コマンド

パッケージ名 ui-skills（bin: ui-skills）。エントリは bin/ui-skills.ts（配布は bin/ui-skills.js）。

npx ui-skills
npx ui-skills start
npx ui-skills categories
npx ui-skills list --category motion
npx ui-skills get baseline-ui

コマンド	役割
`start`	`skills/ui-skills-root/SKILL.md` をそのまま出力（ルーティング層）
`categories`	トピック（カテゴリ）一覧
`list [--category]`	レジストリ由来のスキル一覧。カテゴリ未登録はエラー
`get <slug>`	フル Markdown。同梱ならローカル `skills/<slug>/SKILL.md`、なければ remote `rawUrl`

プロトコル

エージェントが UI タスクを受け取ったときの入口。目標が曖昧なら短い質問を 1 つ。明確ならカテゴリを決め、CLI で確認し、最小スキルだけ載せる。

01–02

UI 判定

UI 関連でなければ no skill needed。関連ならカテゴリを推定。

03–05

選定

categories / list で確認し、最小のスキル集合を選ぶ（原則 1、最大 3）。

06–07

実装

選んだスキルだけ読み込み、その制約で実装する。

%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#d9eef3", "primaryTextColor": "#0a3a48", "primaryBorderColor": "#0d6b7c", "lineColor": "#0d6b7c", "secondaryColor": "#f5f0e0", "tertiaryColor": "#eef7f9", "fontFamily": "Onest, system-ui, sans-serif", "fontSize": "14px"}}}%%
flowchart TD
  A[UI タスク] --> B{UI 関連?}
  B -->|No| C[no skill needed]
  B -->|Yes| D[カテゴリ推定]
  D --> E[CLI で list / get]
  E --> F[最小スキルを選択]
  F --> G[実装]
  F -.->|上限| H[最大 3 スキル]

選定ルール: トピック → スタック → 具体性の順。広いスキルより狭いスキル。フレームワークが明白なら専用スキル。クイック掃除なら craft / visual / layout の狭い方。迷ったらカテゴリを見て狭い安全側を取る。

skills/

リポジトリが本文をホストするのは次の 6 つ。それ以外のレジストリ条目は外部 raw URL を指す。

router

ui-skills-root

ルーティング層。npx ui-skills start が返す入口スキル。

craft

baseline-ui

余白・階層・タイポ・小さなレイアウト問題を直す高速クリーンアップ。

audit

improve-ui

既存サーフェスを設計証拠に照らして監査。製品ソースは読取専用、design-plans/ のみ書く。

a11y

fixing-accessibility

名前・キーボード・フォーカス・フォームなど WCAG 寄りの最小修正。

seo

fixing-metadata

title / description / canonical / OG / Twitter / JSON-LD の監査と修正。

motion

fixing-motion-performance

レイアウトスラッシング、compositor 以外のアニメ、blur など性能問題の修正。

データ層

AGENTS.md より: スキル追加は src/data/registry.ts のみ。slug / user / repo / rawUrl / githubUrl / name / description / topics を埋める。新トピックが必要なら TopicSlug と topicsBySlug 等を更新。

ファイル	役割
`src/data/registry.ts`	カタログ正本（約 179 条目）。外部スキルは raw GitHub URL
`src/data/skills.ts`	表示用ラベル生成。並びは root → baseline → pathSlug
`src/data/topics.ts`	カテゴリ定義と関連トピック
`src/data/agents.ts`	サイト上のエージェント向けメタ

コアデザイン・トピック

primaryDesignTopicSlugs は次の 8 つ: accessibility, motion, systems, visual, interaction, performance, craft, taste。CLI の --category はこのトピック slug に対応する。

同梱との関係: ローカルに skills/* を増やすのは、このリポジトリが本文をホストする場合だけ。カタログ追加だけなら registry 更新で足りる。

実装 vs 監査

baseline-ui（実装制約）

AI 生成 UI のスロップを防ぐ意見付きベースライン。主な束:

Stack: Tailwind 既定値、JS アニメは motion/react、cn（clsx + tailwind-merge）
Components: キーボード/フォーカスは Base UI / React Aria / Radix。同一面でプリミティブ混在禁止。新規は Base UI 優先
Animation: 依頼なしで追加しない。compositor のみ（transform / opacity）。フィードバックは 200ms 以下。prefers-reduced-motion
Design: グラデ・紫グラデ・glow を主アフォーダンスにしない。アクセントはビューあたり 1

improve-ui（読取専用監査）

1 つの一貫した製品サーフェスを、実際に支配している設計証拠に照らして監査する。製品ソースは変更しない。成果物は design-plans/ の自己完結プラン。

サーフェス選定（ルート/レイアウトからレンダー経路を辿る）
ローカル設計言語の再構成（現行で支配している文書だけ）
発見の証明: Contract + Runtime + Correction の 3 点が揃うまで候補にしない
反証して残ったものだけ表に載せる（最大 3）
ユーザーが選んだ項目だけ references/plan-template.md に沿ってプラン化

境界: 依存インストール・フォーマット・コミット・デザイン文書更新はしない。a11y / 壊れたルート / 性能などの指摘は、ユーザーが明示するか製品固有の設計契約がある場合のみ。

ディレクトリ

ibelick/ui-skills/
├── README.md              # CLI 例とサイト導線
├── AGENTS.md              # サイト文体ルール + registry 追記手順
├── bin/                   # ui-skills CLI
├── skills/                # 同梱 6 スキル
│   ├── ui-skills-root/
│   ├── baseline-ui/
│   ├── improve-ui/      # + references/plan-template.md
│   ├── fixing-accessibility/
│   ├── fixing-metadata/
│   └── fixing-motion-performance/
├── src/data/              # registry / skills / topics / agents
├── src/pages/             # Astro ページ・llms.txt・sitemap
└── package.json           # name: ui-skills, Astro + Cloudflare

サイトルール（AGENTS.md）: 本文は parchment ニュートラル、カード等は白面で分離。コードは JetBrains Mono。ラベルは sentence case。装飾は薄く、余白は多め。

公式・関連

GitHub: ibelick/ui-skills — 本ページの解説元
ui-skills.com — 公開サイト
npm: ui-skills — CLI 配布
Base UI — baseline-ui が新規プリミティブで優先するライブラリ