atelier-ui

Atelier UI — デザインオーケストレーター

コンテキストは最小限に保ちます。すべてのモジュールを一度に読み込まず、情報収集後に1つのビルドモジュールにルーティングし、機械的なチェックはスクリプトに任せます。

以下のコマンドとパスで、<skill> はこの SKILL.md ファイルを含むディレクトリです（例: ~/.gemini/config/skills/atelier-ui、Windows では %USERPROFILE%\.gemini\config\skills\atelier-ui、またはワークスペースローカルの .agents/skills/atelier-ui）。シェルコマンドのパスは常に "<skill>/..." のように引用符で囲み、スペースを含むパスでも問題なく動作するようにします。

ワークフロー

1. 環境をプローブする（1回のみ）

プロジェクトルートで機能スキャナーを実行します：

node "<skill>/scripts/detect-env.mjs"

外部ツール（impeccable、agent-browser）が存在することを前提としないでください。JSON出力（project.framework、project.devCommand、tools.impeccableCmd、tools.agentBrowser、tools.browserBinary、tools.cdpSupported）を使用して、使用するスタックとQAティアを選択します。

2. 情報収集（1ターン、デフォルト値付き）

コアとなる質問が未解決の場合にのみ、<skill>/modules/01-intake.md を読み込みます。

• 不足している質問はすべて、デフォルト値付きの1つの番号付きメッセージで尋ねます（または、ユーザーが完全な詳細を提供した場合、または「デフォルト」/「進めてください」と言った場合はすぐに開始します）。
• 確定した計画を .atelier/BRIEF.md に書き込み、コンテキスト圧縮で要件が失われないようにします。

3. 1つのビルドモジュールにルーティングする

概要からサーフェスモードを選択し、そのファイルのみを読み込みます：

• ブランド / ランディング / ポートフォリオ / ローカルビジネス（「説得」または「体験」）：<skill>/modules/02-brand-site.md を読み込みます。
• SaaS / ダッシュボード / ドキュメント / 既存アプリ（「操作」または「閲覧」）：<skill>/modules/03-app-ui.md を読み込みます。
• 3Dワールド / WebGL / シェーダー（「3D」）：<skill>/modules/04-3d-visual.md を読み込みます。

4. 普遍的なCraft Floor（常時適用）

1. 生の16進数コードではなくトークン： CSSカスタムプロパティ（:root）またはプロジェクトの既存のTailwind/テーマトークンを使用します。
2. レイアウトの落とし穴を回避： html, body には overflow-x: clip（決して 100vw ではありません）; 画像グリッドトラックには minmax(0, 1fr); 見出しの表示には min-width: 0; overflow-wrap: break-word。
3. モーションとアクセシビリティ： 決して transition: all を使用せず、transform / opacity / clip-path / filter のみをアニメーション化します; :focus-visible と @media (prefers-reduced-motion: reduce) を追加します。
4. アンチスロップ禁止リスト： 不必要な紫から青へのグラデーション、本文/見出しのグラデーションテキスト、カード内のネストされたカード、見出し上部の 01/02/03 アイブロウキッカー、UIアイコンとしての絵文字、架空の推薦文、ロゴ、メトリクスは禁止です。
5. コントラストと状態： 本文テキスト >= 4.5:1、大きなテキスト >= 3:1; すべてのインタラクティブコントロールは、デフォルト、ホバー、フォーカス可視、無効、ローディング、空、エラーの各状態をカバーします。
6. クリーンなコピー： ボタンは <動詞> <目的語> の形式にします（決して汎用的な「詳しく見る」は使用しません）。プレースホルダーテキスト（Lorem ipsum、Acme、TODO）を残さないでください。

（機械的なチェックは lint-ui.mjs と check-ui.mjs にあります; ネストされたカードや minmax(0, 1fr) などの構造的なレイアウトルールは、あなたとTier 3の批評家によって検証されます。）

5. 検証と批評家ゲート

構築後、<skill>/modules/05-qa-gate.md を読み込み、QAラダーを実行します：

1. 静的スロップリント（検出された場合は tools.impeccableCmd に加えて、node "<skill>/scripts/lint-ui.mjs" <target-dir>）。
2. ブラウザチェック（agent-browser、環境のブラウザツール、または node "<skill>/scripts/check-ui.mjs" <target> --out .atelier/shots --full --sheet）をデスクトップ（1440x900）とモバイル（390x844）で実行します。
3. オプションで、キャプチャしたスクリーンショットを使用して、ゼロコンテキストのビジュアル批評家レビューを実行します（QA Depth が critic または deep の場合）。

このスキルのファイル

パス（<skill>/ 以下）	読み込みタイミング
modules/01-intake.md	ステップ2：あいまいな概要を明確にし、.atelier/BRIEF.md を作成するとき
modules/02-brand-site.md	ステップ3：新しいマーケティング、会社、ローカルビジネス、またはポートフォリオページを作成するとき
modules/03-app-ui.md	ステップ3：ダッシュボード、ツール、ドキュメント、または既存アプリの洗練を行うとき
modules/04-3d-visual.md	ステップ3：Three.js、WebGL、またはシェーダービルドを作成するとき
modules/05-qa-gate.md	ステップ5：リント、ブラウザチェック、ゼロコンテキスト批評家レビューを実行するとき
library/themes.json	ステップ3（02-brand-site）：非汎用的な色とフォントの組み合わせを扱うとき
scripts/detect-env.mjs	ステップ1：プロジェクトスタックとインストール済みのCLI/ブラウザツールを検出するとき
scripts/lint-ui.mjs	ステップ5：組み込みのゼロ依存スロップ＆Craft Floorリンターを使用するとき
scripts/check-ui.mjs	ステップ5：組み込みのゼロ依存Chrome DevTools Protocol（CDP）検証ツールを使用するとき