mae616

ディズニーの12原則とジブリ的自然運動をベースに、UIアニメーションの「なぜ動かすか」「どう動かすか」を判断する。アニメーション/モーション/トランジション設計の相談で、ツール非依存の概念的判断軸として使う。

体験品質（動き/触感/視線誘導）を「実装可能な制約」に落とし、アクセシビリティとパフォーマンスを犠牲にせずに表現を実現する。UIの表現・アニメーション・インタラクション設計/実装の相談で使う。

【穴埋め雛形】このプロジェクト固有の「存在設計・体験設計」のSSOT。judgment-harness のプロジェクト層スキルとして、立ち上げ時に本ファイルを埋めて使う（雛形のままなら未確定＝推測で決めない）。デザイン/UI/モーション/コピーの方針判断、見た目や体験のトーン決め、画面・コンポーネント設計の前段で必ず参照する。

UIを「情報設計（優先度/構造）＋インタラクション（状態遷移）＋ビジュアル（トーン）」として設計し、実装可能な仕様へ落とす。見た目だけでなく、ルール化（コンポーネント/トークン）に寄せる。

セマンティックHTML/JSXとWAI-ARIAを「最小で正しく」適用し、キーボード操作・スクリーンリーダ・コントラスト等を満たす実装を作るための判断軸。ネイティブ要素優先、ARIAの過剰使用を避ける。

Agent Browser（Headlessブラウザ自動化CLI）を使ったUI検証・E2Eテスト・スクリーンショット取得の判断軸。アクセシビリティツリーベースの要素選択を優先し、壊れにくいテスト設計を目指す。

アーキテクチャ設計（境界/依存/データフロー/非機能/運用）を、制約とトレードオフで言語化し、ADR-liteで合意形成しながら段階的に形にする。doc/input/rdd.md にアーキテクチャ/非機能/運用の要求がある、または設計判断（分割/責務/インタフェース/データ整合/観測性/スケール）相談で使う。

事業仮説を支える一次/二次情報を整理し、意思決定に足る「根拠」「不確実性」「次の調査」を可視化する。でたらめな引用や推測の断言を避け、出典の実在を重視する。

Blender MCPを使った3Dモデリングの段階的ワークフロー（プリミティブ→ブロック→サブディビジョン→スカルプト→リトポロジー）と、AI経由のBlender操作の判断軸。3Dモデリング、シーン構築、スカルプティング、リトポロジー、メッシュ編集、Modifier設計、Blender MCPの操作に関する相談で必ず使うこと。ユーザーが「3Dオブジェクト作って」「キャラクターをモデリング」「Blenderで」と言った場合にも適用する。

p5.js（クリエイティブコーディング）のProcessing由来「コードでスケッチ」思想を軸に、setup/drawループ・座標系・インタラクション・パフォーマンス最適化を整理する。p5.js、Processing、クリエイティブコーディング、ジェネラティブアート、インタラクティブ表現、ビジュアルプログラミング、Canvas描画、パーティクル、フラクタル、ノイズ表現に関する相談で必ず使うこと。ユーザーが「コードでアート」「動くビジュアル」「インタラクティブな描画」と言った場合にも適用する。

Three.js（WebGL/3D表現）のScene-Camera-Renderer三位一体と手動メモリ管理を軸に、ウェブ3Dの設計・実装・パフォーマンス最適化を整理する。Three.js、WebGL、React Three Fiber（R3F）、3Dシーン構築、メッシュ/マテリアル/テクスチャ、メモリリーク、dispose()、インスタンシング、シェーダー、GLTFローダーに関する相談で必ず使うこと。ユーザーが「ブラウザで3D」「WebGLで表示」「3Dモデルをウェブに載せたい」「パーティクルエフェクト」と言った場合にも適用する。

Astroプロジェクトの設計・実装・レビューを、HTML中心/Islands Architecture/クライアントJS最小化の思想で整理する。Astro、Islands Architecture、SSG/SSR選択、コンテンツサイト構築、パフォーマンス最適化、JS削減、マルチフレームワーク統合、.astroファイルに関する相談で必ず使うこと。ユーザーが「静的サイト」「ブログ」「ドキュメントサイト」「ランディングページ」と言った場合も、Astroが技術スタックに含まれていれば適用する。

GSAP（GreenSock Animation Platform）のTween/Timeline/ScrollTrigger/Easingを軸に、ウェブアニメーションの設計・実装・パフォーマンス最適化を整理する。GSAP、GreenSock、ScrollTrigger、ウェブアニメーション、スクロール連動アニメーション、タイムライン制御、イージング設計、gsap.to/fromに関する相談で必ず使うこと。ユーザーが「スクロールで要素をフェードイン」「ページ遷移アニメーション」「シーケンシャルなアニメーション」と言った場合、GSAPが技術スタックに含まれていれば適用する。

Playwright E2Eテストフレームワークの判断軸。ユーザー視点のロケーター選択・自動待機・テスト分離・CI最適化を公式ベストプラクティスに沿って整理する。Playwright、E2Eテスト、ブラウザテスト、インテグレーションテスト、getByRole、ロケーター設計、テストの安定性、CI上のテスト失敗に関する相談で必ず使うこと。ユーザーが「テストが不安定」「CIでだけ落ちる」「ブラウザテストを書きたい」「ログインフローをテスト」と言った場合、Playwrightが技術スタックに含まれていれば適用する。

React/Next.jsプロジェクトで、UI=計算モデル（コンポーネント/状態/レンダリング）を軸に、設計・実装・レビュー・性能改善の判断を整理する。React、Next.js、JSX、コンポーネント設計、useState/useEffect、状態管理、Server Components、SSR/SSG/Streaming、App Router、バンドル最適化、再レンダリング問題に関する相談で必ず使うこと。ユーザーが「コンポーネントの分割」「stateの置き場所」「パフォーマンスが遅い」「RSCの使い分け」と言った場合にも適用する。

Svelte/SvelteKitプロジェクトにおいて、UI=状態の直接的な反映という思想を軸に、コンパイル時最適化・状態管理・レンダリング・配信量の設計を整理する。Svelte、SvelteKit、.svelteファイル、リアクティビティ、$state/$derived、コンパイラ最適化、軽量UI、store設計、配信量削減に関する相談で必ず使うこと。ユーザーが「Svelteでアプリを作りたい」「ランタイムを減らしたい」「仮想DOMなしのフレームワーク」と言った場合にも適用する。

Apply semantic HTML/JSX and WAI-ARIA correctly and minimally. Apply when implementing any UI, especially forms, interactive components, or when accessibility is mentioned.

Translate motion, interaction, and visual experience into implementable constraints while preserving accessibility and performance. Apply when working on animations, transitions, scroll effects, or micro-UX.

Translate designs and UI requirements into robust, extensible implementations. Apply when converting designs to code, implementing components, fixing broken UI, or handling responsive layouts.

Design UI as information architecture + interaction + visual tone, then translate into implementable specs. Apply when discussing screen design, component design, design systems, or visual hierarchy.

Evaluate UI/flows from cognitive load, error prevention, and accessibility perspectives. Apply when reviewing UX, discussing user confusion, high drop-off, or form usability issues.