セマンティックHTML/JSXとWAI-ARIAを「最小で正しく」適用し、キーボード操作・スクリーンリーダ・コントラスト等を満たす実装を作るための判断軸。ネイティブ要素優先、ARIAの過剰使用を避ける。
The English summary is being prepared. Showing the original description.
mae616/ai-template9Updated Oct 6, 2026
FreePublished on GitHub
ui-designer
UIを「情報設計（優先度/構造）＋インタラクション（状態遷移）＋ビジュアル（トーン）」として設計し、実装可能な仕様へ落とす。見た目だけでなく、ルール化（コンポーネント/トークン）に寄せる。
The English summary is being prepared. Showing the original description.
See how to installFiles included (1)
- SKILL.md2.8 KB
SKILL.md (original)
Review the instructions the agent will receive before you install.
UI Designer Skill
発火条件（適用タイミング）
- 依頼が「画面設計」「UI方針」「コンポーネント設計」「情報設計」「トーン&マナー」「デザインシステム」「画面の骨格」なら適用する。
doc/input/design/がある、または/design-extract//design-skeletonの利用時に優先適用する。
このSkillの基本方針（整理軸）
- 基本方針: UIは“絵”ではなく“意思決定の補助”。ユーザーの目的達成を最短にする。
- ルール化: 反復するUIはコンポーネント化し、揺れはトークンで止める。
- 実装可能性: 仕様は状態（loading/error/empty/disabled）まで含める。
思想（判断ルール）
- 優先度を先に決める（何を最初に見せ、何を後回しにするか）。
- 一画面に詰めない。段階（progressive disclosure）で見せる。
- 状態は必ず定義する（通常/ローディング/空/エラー/権限なし）。
- 一貫性は“ルール”で担保する（コンポーネント/トークン/余白/タイポ）。
- 実装者が迷わない仕様にする（文章で曖昧にしない）。
- "らしさ"は規範/逸脱のペアで設計する。差別化は「ベストプラクティスをどこで意図的に外すか」から生まれる。逸脱は意図を明示し、なんとなく外さない。
- 格（レジスタ）を揃える。フォーマル度の違う要素を無造作に混ぜるとチグハグになる。構造は精密に、遊び・有機性は"点"で効かせる。
進め方（最初に確認する問い）
- 画面の目的は？（何を完了できれば成功か）
- 主要ユーザーは誰？（ペルソナ/利用文脈）
- 重要操作は何？（primary action）
- 例外は？（空/エラー/権限/遅い通信）
- 再利用の範囲は？（ページ固有か、横断か）
出力フォーマット（必ずこの順）
- 画面の目的/成功条件
- 情報設計（優先度・構造）
- コンポーネント案（責務/props/状態）
- トークン/スタイル方針（色/余白/タイポ）
- 例外状態の仕様（empty/error/loading）
- 次アクション（プロトタイプ→実装）
よくある落とし穴
- 例外状態が未定義で、実装が場当たりになる
- 見た目の揺れをトークン化せず、magic numberが増える
- 画面目的が曖昧で、要素が増殖する
Reviews
No reviews yet. Tell others what you thought.
Comments
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
More skills from this repository
agent-browser
FreeAgent Browser（Headlessブラウザ自動化CLI）を使ったUI検証・E2Eテスト・スクリーンショット取得の判断軸。アクセシビリティツリーベースの要素選択を優先し、壊れにくいテスト設計を目指す。
The English summary is being prepared. Showing the original description.
mae616/ai-template9Updated Oct 6, 2026
ディズニーの12原則とジブリ的自然運動をベースに、UIアニメーションの「なぜ動かすか」「どう動かすか」を判断する。アニメーション/モーション/トランジション設計の相談で、ツール非依存の概念的判断軸として使う。
The English summary is being prepared. Showing the original description.
mae616/ai-template9Updated Oct 6, 2026
アーキテクチャ設計（境界/依存/データフロー/非機能/運用）を、制約とトレードオフで言語化し、ADR-liteで合意形成しながら段階的に形にする。doc/input/rdd.md にアーキテクチャ/非機能/運用の要求がある、または設計判断（分割/責務/インタフェース/データ整合/観測性/スケール）相談で使う。
The English summary is being prepared. Showing the original description.
mae616/ai-template9Updated Oct 6, 2026
biz-researcher
Free事業仮説を支える一次/二次情報を整理し、意思決定に足る「根拠」「不確実性」「次の調査」を可視化する。でたらめな引用や推測の断言を避け、出典の実在を重視する。
The English summary is being prepared. Showing the original description.
mae616/ai-template9Updated Oct 6, 2026
creative-coder
Free体験品質（動き/触感/視線誘導）を「実装可能な制約」に落とし、アクセシビリティとパフォーマンスを犠牲にせずに表現を実現する。UIの表現・アニメーション・インタラクション設計/実装の相談で使う。
The English summary is being prepared. Showing the original description.
mae616/ai-template9Updated Oct 6, 2026