セマンティックHTML/JSXとWAI-ARIAを「最小で正しく」適用し、キーボード操作・スクリーンリーダ・コントラスト等を満たす実装を作るための判断軸。ネイティブ要素優先、ARIAの過剰使用を避ける。
mae616/ai-template92026年10月6日 更新
無料GitHub で公開
experience-plan
機能・画面の実装着手前に「状態×見た目×周辺」を列挙する体験網羅チェックリスト。宣言外の実装を防ぐ関所として task-run/auto-task 等から使う。
含まれるファイル（1）
- SKILL.md1.6 KB
SKILL.md（原文）
インストールする前に、エージェントに与えられる指示の中身を確認できます。
Experience Plan Skill
発火条件
- UI/画面/機能の実装着手前（
task-runの実装ステップ、UI変更を伴うタスク全般）に適用する。
思想（判断ルール）
- 網羅の視点はチェックリストが供給する（モデル性能に依存させない）。暴走は「宣言＝契約」で防ぐ。
- 着手前に以下を列挙し、各項目へ「やる / やらない / 後続タスク化」を宣言してから実装する。宣言外の実装は禁止。
- 宣言リストは人間のGO（またはIssue詳細化時の固定）を通す。
チェックリスト（着手前に列挙）
- 全状態の見た目: 通常/遷移中/空/エラー/終了
- モーション: 何が・いつ・なぜ動くか
- 周辺の世界観整合: 背景・枠・境界で辻褄が合うか（例: 容器の外に中身がはみ出さない）
- 文言: SSOT（copy.json等）参照か、直書きしていないか
- 進行フィードバック: スコア・カウンタ等の反映
よくある落とし穴
- チェックリストを飛ばして「動くもの」だけ作り、空/エラー状態が未実装のまま残る
- 宣言していない追加実装（気づいた改善）をその場で実装してしまう（→後続タスク提案に留める）
レビュー
まだレビューはありません。使ってみた感想をお寄せください。
同じリポジトリのスキル
概要と使いどころ
Agent Browser（Headlessブラウザ自動化CLI）を使ったUI検証・E2Eテスト・スクリーンショット取得の判断軸。アクセシビリティツリーベースの要素選択を優先し、壊れにくいテスト設計を目指す。
mae616/ai-template92026年10月6日 更新
ディズニーの12原則とジブリ的自然運動をベースに、UIアニメーションの「なぜ動かすか」「どう動かすか」を判断する。アニメーション/モーション/トランジション設計の相談で、ツール非依存の概念的判断軸として使う。
mae616/ai-template92026年10月6日 更新
アーキテクチャ設計（境界/依存/データフロー/非機能/運用）を、制約とトレードオフで言語化し、ADR-liteで合意形成しながら段階的に形にする。doc/input/rdd.md にアーキテクチャ/非機能/運用の要求がある、または設計判断（分割/責務/インタフェース/データ整合/観測性/スケール）相談で使う。
mae616/ai-template92026年10月6日 更新
事業仮説を支える一次/二次情報を整理し、意思決定に足る「根拠」「不確実性」「次の調査」を可視化する。でたらめな引用や推測の断言を避け、出典の実在を重視する。
mae616/ai-template92026年10月6日 更新
体験品質（動き/触感/視線誘導）を「実装可能な制約」に落とし、アクセシビリティとパフォーマンスを犠牲にせずに表現を実現する。UIの表現・アニメーション・インタラクション設計/実装の相談で使う。
mae616/ai-template92026年10月6日 更新