UI Skills — Design Engineers 向けエージェントスキル集

Positioning

UI Skills（ibelick/ui-skills）は、フロントエンド実装を AI エージェントに任せるときの品質ガードレールを SKILL.md として配布するプロジェクト。公式サイトは ui-skills.com。

リポジトリは 2 層になっている。ローカル 4 スキル（リポジトリ同梱の skills/*/SKILL.md）と、外部レジストリ（registry.ts に列挙された他リポジトリの SKILL）を Astro サイトが統合カタログとして公開する。

4ローカル SKILL

npmui-skills CLI

Astro 5カタログサイト

MITライセンス

タグライン: install.sh の ASCII バナーは The open taste layer for agent-generated UI. と定義している。baseline-ui が中心で、レビュー系 3 スキルが周辺を補う構成。

3 つの導線

方法	コマンド / 操作	用途
シェル installer	`curl -fsSL https://ui-skills.com/install.sh \| sh`	デフォルトは `baseline-ui` のみ。`--all` で 5 スキル一括。
npm グローバル	`npx ui-skills add baseline-ui`	`bin/ui-skills` が `install.sh` をラップ。
手動コピー	`skills/<slug>/SKILL.md` をエージェントの skills ディレクトリへ	オフライン・カスタム配置向け。

# デフォルト（baseline-ui のみ）
curl -fsSL https://ui-skills.com/install.sh | sh

# 同梱 4 スキル + frontend-design（レジストリ経由）
curl -fsSL https://ui-skills.com/install.sh | sh -s -- --all

# npm CLI
npx ui-skills add fixing-accessibility
npx ui-skills add "baseline-ui fixing-metadata"

配置先（install.sh が検出する代表例）

プロジェクト直下に .cursor/skills、.claude/skills、.codex/skills などが存在すると、各 <slug>/SKILL.md を自動配置する。Cursor / Claude Code では .cursor/commands/<slug>.md、.claude/commands/<slug>.md にコマンド版もコピーされる。

ローカルに SKILL が無いスキル（例: frontend-design）は、https://ui-skills.com/skills/registry.txt の URL か skills/<slug>/llms.txt からダウンロードする。

ローカル 4 本

slug	pathSlug	役割	呼び出し
baseline-ui	`ibelick/baseline-ui`	Tailwind / motion / typography / layout の opinionated ベースライン。AI slop 防止の中核。	`/baseline-ui` または `/baseline-ui <file>`
fixing-accessibility	`ibelick/fixing-accessibility`	ARIA、キーボード、フォーカス、コントラスト、フォームエラーの監査と最小修正。	`/fixing-accessibility`
fixing-metadata	`ibelick/fixing-metadata`	title / description / canonical / OG / Twitter / JSON-LD / robots の SEO メタ監査。	`/fixing-metadata`
fixing-motion-performance	`ibelick/fixing-motion-performance`	compositor-only アニメ、scroll-linked motion、blur コストなどパフォーマンス監査。	`/fixing-motion-performance`

--all の 5 本目: frontend-design はローカル同梱ではなく、Anthropic の skills レジストリから取得する外部スキル。install.sh の ALL_SKILLS に含まれる。

MUST / NEVER の軸

baseline-ui は「明示的に依頼されない限りアニメーションを足さない」「紫グラデ・glow を避ける」など、禁止パターンを先に列挙するスタイル。主要カテゴリは次のとおり。

Stack & Components

Tailwind デフォルト値を基本とする
JS アニメは motion/react
キーボード UI は Base UI / React Aria / Radix
破壊的操作は AlertDialog

Animation & Layout

transform / opacity のみ（200ms 以内）
h-dvh、safe-area、固定 z-index スケール
prefers-reduced-motion を尊重
見出し text-balance、本文 text-pretty

カテゴリ	代表 NEVER
Design	グラデーション、glow を主 affordance にしない、ビューあたりアクセント 1 色
Animation	layout プロパティのアニメ、ループの off-screen 停止なし、カスタム easing
Performance	大きな blur / backdrop-filter アニメ、常時 `will-change`
Interaction	input の paste ブロック、エラーを離れた場所だけに表示

Astro カタログ

公開サイト本体も同リポジトリ内の Astro 5 + React 19 + Tailwind 4 アプリ。src/data/skills.ts がローカル SKILL（glob で skills/*/SKILL.md）と registry.ts の外部エントリをマージし、トピックタグ付きカタログを生成する。

skills/*/SKILL.md + registry.ts → skills.ts → /skills/[...slug] → llms.txt / registry.txt

レイヤ	技術	メモ
フレームワーク	Astro 5, React 19	`@astrojs/react`
スタイル	Tailwind CSS 4	`@tailwindcss/vite`
UI プリミティブ	Base UI	`@base-ui/react`
アニメ	Motion	`motion/react`
デプロイ	Cloudflare Workers	`wrangler.toml`
公開 API	llms.txt, registry.txt	installer と LLM 向けテキスト出力

registry.ts には Remotion、Vue/Nuxt、Three.js、Next.js など多数の外部 SKILL が登録されている。サイト上では isRegistry: true としてローカル SKILL と区別される。

公式

GitHub: ibelick/ui-skills
ui-skills.com — スキルカタログと install スクリプトの配布元
registry.txt — 外部 SKILL の raw URL 一覧
Base UI — baseline-ui が推奨するプリミティブ