UI・UX エージェントスキルガイド

UI・UX向けのスキルを、用途から選ぶ。

UI・UX向けのエージェントスキル12件を、用途・導入条件・確認した原典とあわせて掲載しています。4件の指針を適用した動く作例もあります。

スキル・スキル集: 12件
作例に適用: 4件
補助ライブラリ: 1件

スキル一覧

作例への適用と、資料のみの確認を区別しています。原典は2026-10-13に確認しています。

01見た目・設計追加調査

Frontend Design

スキル作例に適用 ↗

新しい画面の、見た目の軸をつくる。

対象サービスに合う文字、色、余白、レイアウトを考える、Anthropicのフロントエンド向けスキル。画面を新しくつくるときや、既存UIの印象を変える入口に。

向いていることLP、サービスサイト、ダッシュボードの視覚方針と実装。

Claude CodeLPタイポグラフィ配色

使い方・導入・確認した原典

必要なもの

Claude Codeなど、SKILL.mdを扱うエージェント。実装先の言語や既存デザイン規約は依頼に添える。

範囲と限界

視覚設計が中心。ユーザー調査、導線の実証、アクセシビリティ適合をこのスキルだけで保証するものではない。

導入例

Claude Code内で入力。公式READMEのexample-skillsセット導入手順で、frontend-design単体のインストールではない。

/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills

原典の導入例を紹介しています。導入コマンドは未実行です。「作例に適用」はSKILL.mdを読み、設計・実装・点検に使ったものを示します。コマンドは実行時の最新版を取得する場合があります。

依頼文のたたき台

frontend-designを使って、このサービスのトップ画面を設計してください。対象ユーザーは【誰】、最優先の行動は【何】です。既存のブランド規約と実際の文言を使い、文字・色・余白の方針を短く示してから実装してください。スマートフォンとキーボード操作も確認してください。

ライセンス：Apache-2.0

frontend-design配下のLICENSE.txtを確認。リポジトリ全体へ一律に適用しない。

確認したSKILL.md ↗導入手順の原典 ↗ライセンスの根拠 ↗

確認日 2026-10-13 · commit dbd4588f9e1033efb41dad4bef2f7947c8993d44

anthropics/skills

02レビュー・改善追加調査

Impeccable

スキル＋CLI

つくった画面を、具体的な指示で磨く。

見た目の講評、文言、余白、端末対応、エラー状態などを目的別に扱うスキルとツール。既存の画面に対し、どこを直すかを絞って反復したいときに。

向いていること既存UIの改善、UX文言の整理、画面品質の点検。

Claude CodeCodexレビューUXライティング

使い方・導入・確認した原典

必要なもの

対応エージェントと対象プロジェクト。npx経由の導入はNode.jsが必要。エンジンを同梱または初回取得し、導入時にはフック設定も提示される。

範囲と限界

自動検出とAI講評は利用者による使いやすさの検証とは別。ライブ編集の利用には起動できるWebプロジェクトが必要。

導入例

対象プロジェクトのターミナルで実行。公式の対話式インストーラーで対象エージェントと範囲を選ぶ。

npx impeccable install

依頼文のたたき台

Impeccableで【画面】をレビューしてください。利用者が【目的】を達成する流れをたどり、視覚的な優先順位、説明文、入力エラー、空の状態を確認してください。問題の場所と理由を示し、影響の大きい3点を修正してください。

ライセンス：Apache-2.0

LICENSEを確認。Anthropic frontend-designを起点とする旨をREADMEが記載。

確認したSKILL.md ↗導入手順の原典 ↗ライセンスの根拠 ↗

確認日 2026-10-13 · commit 245ad82def45831dc56a21b683c7a1ff530b06cc

pbakaus/impeccable

03見た目・設計追加調査

UI UX Pro Max

スキル＋検索データ

用途に合うデザインの候補を探す。

業種や画面の目的から、配色、書体、スタイル、UXの注意点を検索するスキル。新しいプロダクトの設計方針を整理し、実装スタックに合わせて具体化する。

向いていること新規プロダクトの設計案、デザインシステムのたたき台。

design systemデザインシステム配色Python

使い方・導入・確認した原典

必要なもの

CLI導入はNode.js/npm、検索スクリプトはPython 3.x。利用者、業種、用途、実装スタックを具体的に指定する。

範囲と限界

検索結果は設計候補。既存ブランド、業務要件、実ユーザーの行動に合わせて選別する。ここでは公開リポジトリのみを対象とし、別提供の有料機能は含めない。

導入例

プロジェクトのターミナルで実行。公式READMEに記載された、グローバル導入を省く方法。

npx ui-ux-pro-max-cli init --ai claude

依頼文のたたき台

ui-ux-pro-maxで【用途】のUI方針を提案してください。対象は【利用者】、実装は【スタック】です。既存の色・書体・操作規約を優先し、候補を理由付きで比較してください。選んだ方針を画面ごとのルールへ落とし込み、推測と確定要件を分けてください。

ライセンス：MIT

公開リポジトリのLICENSEを確認。外部の有料提供や参照素材の条件は別。

確認したSKILL.md ↗導入手順の原典 ↗ライセンスの根拠 ↗

確認日 2026-10-13 · commit 7246805992a42b7bba37d4cac83b01416f0c6c44

nextlevelbuilder/ui-ux-pro-max-skill

04レビュー・改善追加調査

Web Design Guidelines

レビュースキル作例に適用 ↗

操作できるかを、コードから点検する。

VercelのWeb Interface Guidelinesを取得し、指定したUIコードを点検するスキル。フォーカス、フォーム、キーボード操作、動きを減らす設定などの実装レビューに。

向いていること実装後の操作性・アクセシビリティ・フォームのコード点検。

Vercelアクセシビリティフォームキーボード

使い方・導入・確認した原典

必要なもの

対象ファイルを読めるエージェントと、最新版ガイドラインを取得するネットワーク接続。

範囲と限界

実行時に外部ガイドラインを取得するため、同じスキル版でも判定規則は変わり得る。コードレビューだけでWCAG適合や実機での使いやすさを保証しない。

導入例

公式READMEのリポジトリ導入コマンド。選択画面でweb-design-guidelinesを選ぶ。

npx skills add vercel-labs/agent-skills

依頼文のたたき台

web-design-guidelinesで【対象ファイル】をレビューしてください。フォームのラベル、エラーの伝達、Tab移動、フォーカスの戻り先、動きを減らす設定を確認してください。根拠のある指摘をファイル位置付きで示し、ブラウザで追加確認すべき点も分けてください。

ライセンス：MIT（README表記）

agent-skillsのREADMEはMITと記載。ただし確認版のツリーにLICENSE条文ファイルはなく、GitHub APIのlicense値もnull。参照先web-interface-guidelinesは別リポジトリでMIT。

確認したSKILL.md ↗導入手順の原典 ↗ライセンスの根拠 ↗参照されるガイドライン（確認時点）

確認日 2026-10-13 · commit 063bee94c3f4df8453406c830b0a7df0f2860278

vercel-labs/agent-skills

05操作・動き追加調査

Emil Design Engineering

スキル作例に適用 ↗

押す、開く、閉じる。その感触を整える。

Emil KowalskiのUI設計とアニメーションの判断をまとめたスキル。動かす必要性、反応速度、途中で操作された場合の挙動など、コンポーネントの細部を扱う。

向いていることボタン、ポップオーバー、ツールチップ、ドラッグ操作の仕上げ。

microinteractionマイクロインタラクションボタンeasing

使い方・導入・確認した原典

必要なもの

既存のUIコードと、確認できるブラウザ。現行スキル名はemil-design-eng。

範囲と限界

デザインエンジニアリングと動きが中心。情報設計や調査を含むUX全工程の代替ではない。

導入例

公式READMEの導入コマンド。選択画面でemil-design-engを選ぶ。

npx skills@latest add emilkowalski/skills

依頼文のたたき台

emil-design-engを使って【コンポーネント】の操作感を整えてください。頻繁に使う操作は待たせず、開閉を連打した場合や途中で逆操作した場合も確認してください。動きを減らす設定とタッチ操作を含め、変更前後と理由を示してください。

ライセンス：MIT

LICENSEを確認。ガイドでは現行リポジトリ内のemil-design-engを紹介。

確認したSKILL.md ↗導入手順の原典 ↗ライセンスの根拠 ↗

確認日 2026-10-13 · commit 2d228630ba1446365f614a108cb8252f1feda202

emilkowalski/skills

06操作・動き元投稿 #10

Motion.dev Animations Skill

スキル

Motionを使うUIアニメーションの実装へ。

Motionのスクロール、ホバー、ドラッグ、レイアウト遷移を実装するためのClaude Codeスキル。元投稿の15項目から、操作画面向けの1件をこのガイドへ分離。

向いていることReact / Next.jsなどの、操作や状態変化を伝えるWeb UI。

MotionClaude CodeReactNext.js

使い方・導入・確認した原典

必要なもの

Claude Code、Git、実装先のMotion環境。原典はReact 19+、Next.js 15+、Svelte 5+、Astro 4+を対象に記載。実案件のバージョン適合は別確認。

範囲と限界

READMEの120fpsなどは著者の目標・説明で、本ガイドの実測結果ではない。Vueはmotion-vの別API。CSSだけで済む小さな動きや映像書き出しには用途を見直す。

導入例

Git管理している対象プロジェクトで実行。公式READMEのプロジェクト内導入例で、.gitmodulesも作成・更新する。

git submodule add https://github.com/199-biotechnologies/motion-dev-animations-skill.git .claude/skills/motion-dev-animations

依頼文のたたき台

motion-dev-animationsで【UIの状態変化】を実装してください。使用中のフレームワークとMotionの版を先に確認し、動きの目的を【位置関係／操作への反応／状態説明】から明確にしてください。操作を妨げず、キーボードと動きを減らす設定に対応し、対象端末で確認してください。

ライセンス：MIT

LICENSEを確認。Motionライブラリ本体とは別の第三者スキル。

確認したSKILL.md ↗導入手順の原典 ↗ライセンスの根拠 ↗

確認日 2026-10-13 · commit 3feedfb4dba8adae40fc9a5f9a23e3dda2121205

199-biotechnologies/motion-dev-animations-skill

07見た目・設計追加調査

Taste Skill v2

スキル（実験版）

LPの個性と情報密度を、狙って調整する。

デザインの変化量、動きの強さ、情報密度を調整し、ブランドの文脈から視覚方針を組み立てるスキル。新しいLPやポートフォリオ、既存サイトの再設計に使う。

向いていることLP、ブランドサイト、ポートフォリオの視覚設計と再設計。

Claude CodeCodexLPポートフォリオ

使い方・導入・確認した原典

必要なもの

SKILL.mdを扱うエージェントと実装先。導入コマンドにはNode.js/npmが必要。既存のブランド、内容、技術構成を依頼に添える。

範囲と限界

確認時点の既定版はv2 experimental。ダッシュボード、データ表、多段階の業務UIは対象外と明記される。強い造形上の好みを含み、一般的なUXの正解を保証しない。

導入例

公式READMEの単体導入コマンド。フォルダ名ではなくfrontmatterの導入名を指定する。v1と同じ導入名でv2へ更新されるため、既存利用者は版の違いを確認する。

npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

依頼文のたたき台

design-taste-frontendで【LP／ポートフォリオ】を設計してください。対象読者は【誰】、伝える内容は【内容】、最優先の行動は【行動】です。既存のブランド規約を読み、変化量・動き・情報密度の方針を示して実装してください。実在する文言と素材を使い、狭い画面と動きを減らす設定も確認してください。

ライセンス：MIT

固定コミットのLICENSEを確認。画像素材や外部ライブラリの条件は別。

確認したSKILL.md ↗導入手順の原典 ↗ライセンスの根拠 ↗

確認日 2026-10-13 · commit d237dd399d57524945c0c81327da5da19f7a468d

Leonxlnx/taste-skill

08レビュー・改善追加調査

UI Skills

スキル集作例に適用 ↗

フォームやダイアログの、操作上の穴を直す。

UIの基準、アクセシビリティ修正、コンポーネント比較などを目的別に扱うスキル集。fixing-accessibilityはラベル、キーボード、フォーカス、入力エラーなどを対象に、小さく修正する方針を持つ。

向いていること既存UIのアクセシビリティ修正と、コンポーネントの状態・バリエーション確認。

アクセシビリティフォームキーボードフォーカス

使い方・導入・確認した原典

必要なもの

対象UIのコードと、それを読めるエージェント。baseline-uiにはTailwindやMotion for Reactを前提とした規則もあるため、使うスキルを選ぶ。

範囲と限界

スキル集のうちbaseline-ui、fixing-accessibility、component-canvasの本文を確認。全スキルの実行検証ではない。自動レビューだけで支援技術の動作やWCAG適合を保証しない。

導入例

公式READMEの取得コマンド。CLIの実装上、Markdownを標準出力へ表示するもので、自動インストールではない。選んだskills/<名前>/の内容をエージェントの対応するスキル配置先へ保存して使う。

npx ui-skills get baseline-ui

依頼文のたたき台

UI Skillsのfixing-accessibilityを使って【対象画面】を確認してください。入力の名前とエラーの関連付け、Tab移動、見えるフォーカス、ダイアログを閉じた後の戻り先を点検し、既存構造を保って必要な箇所を修正してください。コードの確認とブラウザで実際に試した結果を分けて報告してください。

ライセンス：MIT

固定コミットのLICENSEを確認。

確認したSKILL.md ↗導入手順の原典 ↗ライセンスの根拠 ↗baseline-ui component-canvas

確認日 2026-10-13 · commit 9a0cb1e610e3a1a4f0f2723bf2e7680ac1b89cf5

ibelick/ui-skills

09見た目・設計追加調査

Bencium Controlled UX Designer

スキル

設計の選択肢を確認しながら、業務UIを組み立てる。

配色、書体、レイアウトを人と確認しながら進めるUX設計スキル。余白や文字の尺度に加え、入力のフィードバック、エラーからの回復、段階的な情報開示を扱う。

向いていること方針を相談しながら進める業務画面、フォーム、既存UIの整備。

Claude Codeshadcn/ui業務UIフォーム

使い方・導入・確認した原典

必要なもの

Claude Codeと対象プロジェクト。本文は@/components/uiにある導入済みshadcn/ui v4とindex.cssのテーマを前提とする。

範囲と限界

確認を挟む設計スタイルで、承認済みの変更まで毎回止める必要はない。影を使わないなど作者の造形規則も含む。アクセシビリティや業務適合の実証は別途必要。

導入例

Claude Code内で入力する、公式READMEの個別プラグイン導入手順。shadcn/ui自体を導入するコマンドではない。

/plugin marketplace add bencium/bencium-marketplace
/plugin install bencium-controlled-ux-designer@bencium-marketplace

依頼文のたたき台

bencium-controlled-ux-designerで【業務画面】を設計してください。利用者の仕事は【目的】です。確定済みの色・書体・コンポーネント規約はそのまま使い、未決定の重要な選択だけ比較してください。入力中、エラー、保存中、完了の状態と、失敗から回復する方法を含めて実装してください。

ライセンス：MIT

固定コミットのLICENSEを確認。旧bencium-claude-code-design-skill URLは現在のmarketplaceへ転送される。

確認したSKILL.md ↗導入手順の原典 ↗ライセンスの根拠 ↗

確認日 2026-10-13 · commit 5de46a39b4640fa419560cd0b67e4c4b50dac802

bencium/bencium-marketplace

10デザインシステム追加調査

Allonsy Design System

スキル＋設計リファレンス

部品の名前、API、操作規則をそろえる。

コンポーネントの分類と命名、プロパティやイベント、デザイントークン、ARIA、国際化を整理するスキル。画面単体から再利用できる部品と規約を作りたいときに。

向いていることコンポーネントライブラリの設計・レビューとデザインシステムの文書化。

デザインシステムコンポーネントARIAdesign tokens

使い方・導入・確認した原典

必要なもの

SKILL.mdと同梱referencesを読めるエージェント。既存コンポーネント、命名規約、トークン定義を渡す。HTMLやWeb Componentsの例を実装先の構成に合わせて読む。

範囲と限界

設計の指針と参照資料が中心。付属CLIのインストールやテストは実行していない。既存のフレームワーク規約に合わせた調整と、操作を含むブラウザ検証が必要。

導入例

確認した固定版からフォルダを手動配置する例。SKILL.mdだけでなくreferencesも含める。対応する他エージェントではそのスキル配置先を使う。既存フォルダの上書きを避けて差分を確認する。

skills/design-system/ → プロジェクトの .claude/skills/design-system/

依頼文のたたき台

design-systemを使って【既存コンポーネント群】をレビューしてください。名前、責務、プロパティ、イベント、色や余白のトークン、キーボード操作、国際化の規則を整理してください。現在の実装に合わせた小さな改善案と、代表コンポーネント1つの仕様・実装例を作ってください。

ライセンス：MPL-2.0

固定コミットのLICENSEを確認。改変・再配布時はMPL-2.0の条件を確認する。

確認したSKILL.md ↗導入手順の原典 ↗ライセンスの根拠 ↗コンポーネントAPI設計アクセシビリティパターン

確認日 2026-10-13 · commit 4d1f9f9ead6e1ae760c939fe7169e2f90e7b382c

allonsy-studio/agent-skills

11コンポーネント実装追加調査

shadcn/ui Skill

公式スキル

既存の部品を、正しい組み合わせで画面にする。

プロジェクト設定、導入済みの部品、基盤ライブラリを調べ、shadcn/uiのフォームやダイアログを組み立てる公式スキル。部品名やAPIを推測せず、CLIと原典を参照する。

向いていることshadcn/uiを使う管理画面、設定、フォーム、デザインシステムの実装。

shadcn/uiフォームReactコンポーネント

使い方・導入・確認した原典

必要なもの

Node.jsとパッケージマネージャー、shadcn/uiのプロジェクト。components.jsonなどの設定を読む。CLIを使った部品の取得にはネットワーク接続が必要。

範囲と限界

shadcn/ui向けの実装規則であり、任意のHTMLや他の部品ライブラリへそのまま適用するものではない。スキルを追加しても部品一式や完成画面が自動で入るわけではない。

導入例

shadcn/ui公式ドキュメント掲載のスキル導入例。部品を追加するshadcn CLIのコマンドとは別。導入時の最新版を取得する。

pnpm dlx skills add shadcn/ui

依頼文のたたき台

shadcnスキルを使い、このプロジェクトの設定と導入済みコンポーネントを確認してください。【設定画面】を既存の部品で組み立て、必須入力、エラー表示、キーボード操作を含めて実装してください。部品のAPIは現行ドキュメントで確認してください。

ライセンス：MIT

リポジトリのLICENSE.mdを確認。追加のレジストリから取得する素材・コンポーネントは各条件を確認する。

確認したSKILL.md ↗導入手順の原典 ↗ライセンスの根拠 ↗公式スキル導入ガイド ↗

確認日 2026-10-13 · commit 30a58d4498f270af1c1e981a7d78a15cf5740841

shadcn-ui/ui

12デザイン連携追加調査

Stitch Design Skills

スキル集＋MCP連携

画面案とデザイン規約を、次の画面へつなぐ。

Google Labs Codeが公開するStitch向けスキル集。画面の生成・修正、DESIGN.mdへの設計規約の整理、実装への引き渡しを用途別に扱う。ここでは画面生成、design-md、enhance-promptの本文を確認した。

向いていることStitchの画面案、既存画面からのデザイン規約抽出、複数画面の方向性の統一。

StitchDESIGN.mdデザインシステムMCP

使い方・導入・確認した原典

必要なもの

Stitchを利用できるアカウントと、エージェント側のStitch MCP接続・認証設定。design-mdは既存のStitch画面を参照する。機能間の依存スキルも必要。

範囲と限界

READMEはGoogleの公式サポート対象製品ではないと明記。MCPを用いた生成・アップロードは外部サービスで行う。各サービスの利用枠・データの送信先は別途確認する。全収録スキルの動作検証はしていない。

導入例

READMEの選択導入例。必要なスキルを選ぶ。接続設定は別途必要で、スキル同士に依存関係がある。ここでは接続・インストール・外部生成を行っていない。

npx skills add google-labs-code/stitch-skills

依頼文のたたき台

Stitchで【画面】を設計するため、利用者、最優先の行動、表示する情報を整理してください。既存のデザインシステムがある場合は継承し、なければ先に規約をまとめてください。生成対象のプロジェクトと送信する素材を明示して進めてください。

ライセンス：Apache-2.0

スキル集のLICENSEを確認。Stitchサービスの利用条件・利用枠や、入力素材の権利とは別。

確認したSKILL.md ↗導入手順の原典 ↗ライセンスの根拠 ↗Stitch MCPの設定 ↗

確認日 2026-10-13 · commit 0337446dadde6f8c94210444e2aa9d546126480f

google-labs-code/stitch-skills

動く作例 Yaoyorozu AI ToolBox Desk

調べたスキルのうち4件を適用して、制作プロジェクトを整理する「Yaoyorozu AI ToolBox Desk」をつくりました。検索、追加・編集、状態変更、タスクの完了まで試せます。

動く作例を開く

試作 / 架空のデータ / 保存はこのブラウザ内

EXAMPLE 01

Yaoyorozu AI ToolBox Desk

Frontend Design視覚方針・画面の情報階層
Emil Design Engineeringフォーム・フォーカス・操作の感触
Web Design Guidelines実装の点検と修正
UI Skills / fixing-accessibilityラベルとキーボード操作の点検

適用した判断と実装を読む ↗

補助ライブラリ

ここからは補助ライブラリ。上のスキル件数・検索には含めません。

01実装ライブラリ元投稿 #9

Motion

ライブラリ

アニメーションを実際に動かす土台。

Webの動きを実行するJavaScript / React向けライブラリ。スキルに教わったUIアニメーションをコードで実現する土台として、両ガイドから参照する共通項目。

向いていることUIのジェスチャー、スクロール連動、要素の出入り、レイアウト変化。

JavaScriptReactlibraryライブラリ

使い方・導入・確認した原典

必要なもの

JavaScriptのプロジェクト。Reactはmotion/react、Vueは別パッケージmotion-vの公式手順を参照。

範囲と限界

ライブラリの導入だけでClaudeに設計スキルが追加されるわけではない。Motion+の素材・サービスは、このMITライブラリ本体と条件が異なる。

導入例

JavaScript / Reactプロジェクトのターミナルで実行。スキル導入ではなくアプリの依存追加。

npm install motion

依頼文のたたき台

このプロジェクトでMotionを使い、【UI要素】の状態変化を実装してください。既存の依存関係と版を確認し、処理完了を待たせない動きにしてください。中断や連続操作、フォーカス維持、動きを減らす設定も確認してください。

ライセンス：MIT

Motion本体のLICENSE.mdを確認。Motion+までMITという意味ではない。

確認したREADME ↗導入手順の原典 ↗ライセンスの根拠 ↗

確認日 2026-10-13 · commit 790a654dfef305307c566cf4e94d67a9f7a403c8

motiondivision/motion

スキルの比較表

用途の早見表
リソース	種類	主な用途
Frontend Design	スキル	LP、サービスサイト、ダッシュボードの視覚方針と実装。
Impeccable	スキル＋CLI	既存UIの改善、UX文言の整理、画面品質の点検。
UI UX Pro Max	スキル＋検索データ	新規プロダクトの設計案、デザインシステムのたたき台。
Web Design Guidelines	レビュースキル	実装後の操作性・アクセシビリティ・フォームのコード点検。
Emil Design Engineering	スキル	ボタン、ポップオーバー、ツールチップ、ドラッグ操作の仕上げ。
Motion.dev Animations Skill	スキル	React / Next.jsなどの、操作や状態変化を伝えるWeb UI。
Taste Skill v2	スキル（実験版）	LP、ブランドサイト、ポートフォリオの視覚設計と再設計。
UI Skills	スキル集	既存UIのアクセシビリティ修正と、コンポーネントの状態・バリエーション確認。
Bencium Controlled UX Designer	スキル	方針を相談しながら進める業務画面、フォーム、既存UIの整備。
Allonsy Design System	スキル＋設計リファレンス	コンポーネントライブラリの設計・レビューとデザインシステムの文書化。
shadcn/ui Skill	公式スキル	shadcn/uiを使う管理画面、設定、フォーム、デザインシステムの実装。
Stitch Design Skills	スキル集＋MCP連携	Stitchの画面案、既存画面からのデザイン規約抽出、複数画面の方向性の統一。
Motion	ライブラリ	UIのジェスチャー、スクロール連動、要素の出入り、レイアウト変化。

このガイドについて

RoundtableSpaceの元投稿を起点に、GitHubでUI・UX向けのエージェントスキルを追加調査。元投稿の#10に、独自調査の11件を加えました。スキル集は一つの掲載単位とし、中のファイル数で件数を増やしていません。

元投稿#9のMotionは補助ライブラリとして別枠へ。映像・タイポグラフィ演出などはモーションデザイン版へ。調査範囲と選定理由も記録しています。

このガイドの範囲

中心はWeb UIの視覚設計、操作設計、実装レビューです。UXには調査、情報設計、ユーザーテストも含まれます。ここに挙げたスキルで、その全工程を検証したものではありません。

確認版は固定コミットで記録。4件の指針を作例へ適用しましたが、導入コマンドや外部サービス接続は試していません。紹介先のスキル本体は同梱していません。