Taste Engine — スタイルルーター
1つの普遍的なプロセス、多くの独立したテイスト — アンチスロップ、条件付きパブリックSEO、およびオプションのスタイル調整モーションを備えたもの。 Taste Engineは、いつ質問するか、どの選択されたスタイルパックを読み込むか、そしてどのようにそれを強制するかを制御します。エンジン自体には固有の美的スタイルはありません。styles/*.mdのスタイルパックに実際のデザイン指示が含まれています。
マテリアルフィデリティ（選択されたスタイル）— スクリーンショットレベルの契約
選択された視覚的美的スタイルは、見出しやCSS変数名で述べられているだけでなく、レンダリングされたインターフェースから認識可能でなければなりません。glassmorphismが選択された場合、styles/glassmorphism.mdを読み込み、その必須のグラスマテリアルフィデリティゲートを適用します。実際の目に見える霜降り/半透明のペインが差別化された背景光をフィルタリングし、読み取り可能な反射/エッジ、アクセス可能なフォールバックを備えている必要があります。フラットなネイビーのヒーローに青いCTAを加えたものはグラスモーフィズムではありません。受け入れチェックにはtests/glassmorphism-visual.mdを使用し、開始レシピとしてexamples/glassmorphism/frosted-surfaces.cssを使用してください。このグラス固有のチェックを他のスタイルに適用しないでください。すべての美的スタイルは独自の要件を保持します。
グラスモーフィズム固有のグラデーション例外
グラスモーフィズムが選択された場合、意図的なCSSグラデーション背景、アンビエントライトフィールド、制御されたソフトカラーシェイプは明示的に許可されます。これらは半透明のフロスティングと奥行きを可視化するためです。これらを削除して一般的なアンチスロップグラデーション警告を満たそうとしないでください。styles/glassmorphism.md（「明示的な背景グラデーション例外」）を読み込み、最初のビューポートが差別化された背景をフィルタリングする実際のペインを表示することを検証してください。この例外は選択されたマテリアルにのみ適用され、ユーザビリティ、真実性、アクセシビリティ、またはユーザー制約を決してオーバーライドしません。
自動呼び出し：ゼロコマンド契約
- これはタスクトリガー型スキルであり、スラッシュコマンドのみのワークフローではありません。自律エージェントスキルをサポートするインストール済みエージェントは、ポートフォリオ、ウェブサイト、アプリ、ダッシュボード、ランディングページ、およびUI再デザインのリクエストで上記のメタデータを発見する必要があります。たとえユーザーが「taste-engine」と言わなくてもです。
- 呼び出されたら、UIコードの前に自動呼び出し契約を適用してください。実際のプラットフォームがスキルを呼び出すかどうかを決定します。このファイルはOSレベルのフックを作成したり、すべてのホストでの準拠を保証したりすることはできません。
- 暗黙的なスタイル選択： 「ポートフォリオウェブサイトを作って」 → 1つの簡潔なスタイル質問をし、ターンを終了します。同じターンでユーザーに無関係な詳細を尋ねないでください。
- 明示的なスタイル選択： 「スキューオモルフィズムスタイルのポートフォリオウェブサイトを作って」 → タイプミスを
skeuomorphismに正規化し、styles/skeuomorphism.mdを読み込み、構築します。質問メニューを実行しないでください。 - 確立されたプロジェクト： 承認されたプロジェクト構成または文書化されたブランド/スタイルは、増分作業のための一般的なデフォルトよりも優先されます。メニューで中断しないでください。
- フロントエンド作業なし： API実装、ビジネスロジックのデバッグ、データベース移行、インフラストラクチャ、書き込みのみのタスク → スタイルセレクタを起動しないでください。
エンジニアリングコンパニオン — 条件付きおよびフレームワーク対応
視覚的スタイルの質問が解決されたら（または既存のシステム/非ビジュアル作業のためにスキップされたら）、エンジニアリングルーターを適用します。すべてのWeb UIは普遍的なWebインターフェース品質ゲートを取得します。React/NextはReactパフォーマンスを、そしてスタックとタスクが正当化する場合にのみオプションでReactコンポジションを取得します。React Native/Expo作業はWeb SEOではなくネイティブモバイルを取得します。ナビゲーションモーションは互換性チェック後にビュートランジションを使用するか、本当に有用な場合にオプションのAnime.jsを使用することがあります。ドキュメント作成タスクは、視覚的スタイルセレクタなしでドキュメント作成を取得します。
これらはローカルのオリジナル統合であり、インポートされたVercelプラグインではありません。これらはアップストリームリサーチから学んだエンジニアリングプラクティスを要約しています。アップストリームスキルがインストールされていると想定しないでください。Reactを必要としないでください。明示的なデプロイ意図なしにデプロイしないでください。技術的なガイダンスがユーザーの美的スタイルを上書きしないようにしてください。コアのプリフライト、フルスクリーンヒーロー、SEO、アンチスロップ、スタイル認識モーションは変更されません。エンジニアリングルーティングテストを参照してください。
フルスクリーンヒーロー — 関連する場合は必須
スタイル選択後、新しいパブリックポートフォリオ、ランディングページ、またはヒーローがあるホームページの場合、フルスクリーンヒーロー契約を読み込みます。デフォルトで1画面表示のヘッダー＋ヒーロー構成にします。モバイルセーフなmin-height: 100svh（100vhフォールバック付き）を使用し、実際の通常フローヘッダーの高さを差し引くか、ヘッダーが重なる場合は全高ヒーローを使用します。100vhを盲目的に適用しないでください。固定された高さはテキストをクリップし、ツールバーが変更されたモバイルビューポートで問題を引き起こす可能性があります。狭い/短い画面でコンテンツとCTAを使用可能に保ち、ズーム/大きなテキストで自然な成長とスクロールを許可します。選択されたスタイルの「## ヒーロー構成（最初のフルビューポート）」ガイダンスと共有のアンチスロップチェックに従ってください。画面を埋めるためだけに画像、バッジ、偽の統計、またはループモーションを発明しないでください。
このルールは、プライベートダッシュボード、フォーム、アプリワークスペース、またはヒーローを作成/再デザインしない増分編集にマーケティングヒーローを強制しません。コンパクトヒーローまたはヒーローなしの明示的なユーザー選択が優先されます。スタイルがすでに確立されている場合、追加のスタイル選択質問は必要ありません。
Anime.js v4 モーションエンジン — オプション、スタイル認識
明示的なUIマイクロインタラクションリクエストの場合、または選択されたスタイルが追加のモーションから真に利益を得る場合、モーションエンジンアダプターと選択されたスタイルの「## モーション」ガイダンスを読み込みます。モーションは新しい美的セレクタになることは決してなく、2回目のインタビューを必要とすることも決してありません。Tambahkan micro-interaction di dashboard iniのようなリクエストは、既存のプロジェクトスタイルを維持し、スタイル質問なしで動作します。プロジェクトに選択されたデザイン言語がなく、ユーザーが新しいUIを構築している場合、元の1質問プリフライトは必須のままです。
自動依存関係インストールはありません。 最初に既存のスタックを検査してください。単純なトランジションにはCSS/ネイティブブラウザ機能を優先してください。調整されたモーションを意味のある形で簡素化する場合、または明示的に要求された場合にのみ、Anime.js v4を検討してください。React/Nextの場合は、createScope() + ライフサイクルクリーンアップを使用します。モーション減少を好むユーザーの場合は、インタラクションを機能させながら必須でないエフェクトを無効にします。バウンス、ループ、または不必要なスタッガーを強制しないでください。スタイルマッピングはstyles/motion-profiles.jsonに、Reactレシピはexamples/react/anime-v4-press.jsxにあります。非Web/ネイティブアプリは代わりにプラットフォームのモーションAPIを使用する必要があります。
クロススタイルSEO：自動的かつ条件付き
SEOはスタイルの選択ではありません。 新しい、または大幅に再デザインされたパブリックウェブサイト（ポートフォリオ、ランディングページ、ブログ、公開ビジネスウェブサイト、公開ドキュメント、公開製品ページ）の場合、視覚的スタイル選択後にSEO統合と、必要に応じてSEO実装レシピを読み込みます。技術的SEO＋アンチスロップコンテンツをすべての選択されたスタイルに適用し、「SEOは欲しいですか？」と2つ目の質問として尋ねることはありません。SEOは選択されたマテリアル美的スタイルを決して変更しません。
- 明示的なスタイル： 「スキューモーフィズムのポートフォリオを作って」 →
styles/skeuomorphism.md+references/seo.mdを読み込み、スタイル質問なしで実装します。 - スタイル未指定： 「ポートフォリオウェブサイトを作って」 → ちょうど1つのスタイル質問をし、停止します。回答後、スタイル＋SEOを読み込み実装します。メタデータを書くためだけにプリフライトをバイパスしないでください。
- SEOのみ： 「私のウェブサイトのSEOを監査して」 / 「canonical URLとsitemapを修正して」 → すぐにSEOモジュールを読み込み、視覚的スタイルインタビューなし、求められていない再デザインもありません。
- プライベート/内部アプリケーション： 機密性と既存のインデックス可能性を保持し、公開サイトマップを生成したり、プライベートルートを公開したりしないでください。ネイティブモバイル/バックエンドのみのタスクは通常のWeb SEOの範囲外です。
- 不明なドメイン： ライブURL、著作者、構造化データ、レビュー、ページコンテンツを捏造しないでください。セマンティクス/タイトルを安全に実装し、保留中のものを報告してください。
SEOとスタイルはFLOOR / REFLEX / FINISHゲートを共有します。プライバシー、真実のコンテンツ、アクセシビリティ、機能的動作は、美的および検索の好みよりも優先されます。SEO受け入れシナリオを参照してください。オプションのスタンドアロンtaste-seoスキルはSEOのみのインストール用です。ルーターユーザーはそれを別途インストールする必要はありません。
ハード要件：新しい視覚的実装前のプリフライト
視覚的UIを導入または大幅に再デザインするタスクの場合、視覚的方向性が解決されるまで、UIコードを書いたり、インターフェースモックアップを生成したり、デザイントークンを変更したりしないでください。
- 現在のユーザーリクエスト、既存の製品ブランド/デザインシステム、および明示的に承認されたプロジェクトスタイル構成を調べます。
- スタイルがすでに明示的に選択されている場合（例：「ブルータリストダッシュボード」）、再度尋ねないでください。有用であれば1行で確認し、そのスタイルパックを読み込みます。
- 既存のプロジェクトに明確に確立されたスタイルがあり、ユーザーが増分変更を要求する場合、それを維持し、新しい選択で中断しないでください。再デザインリクエストは確立されたスタイルをオーバーライドできます。
- それ以外の場合、ちょうど1つの簡潔なスタイル選択質問をし、停止します。 6つの対照的な選択肢と「その他のスタイル / カスタム / 参照を送信」を提供します。黙ってスタイルを選択したり、返信を待っている間にコーディングを開始したり、複数の質問インタビューを行ったりしないでください。
- ユーザーが回答したら、レジストリを介してスタイルIDを解決し、選択されたパックのみを読み込み、プロジェクト固有のトークン/決定を導出し、実行します。ユーザーが提供した形容詞や参照は、プリセットを強制する代わりにスタイル特性の解釈を必要とする場合があります。
- ツールランナーがユーザー入力のために一時停止できない場合、未解決の選択を報告し、同意を捏造しないでください。自律的なベストエフォートデフォルトを使用する明示的な指示は、暫定スタイルを許可する場合があります。それを暫定的で元に戻せるものとしてマークします。
必須の最初の質問（インドネシア語の例）
デザインを始める前に、どのビジュアルスタイルをご希望ですか？
- クレイモーフィズム — 柔らかく、触感があり、微妙な奥行き
- グラスモーフィズム — 透明、階層的、モダン
- ブルータリズム — 明確なタイポグラフィ、生のグリッド、ハイコントラスト
- ネオブルータリズム — 大胆な色、境界線とハードシャドウ
- ミニマリズム — クリーン、シンプル、コンテンツ重視
- スイス / エディトリアル — 精密なグリッド、支配的なタイポグラフィ または その他、カスタムと入力するか、参照を送信してください。
ユーザーの言語に適応させてください。単一の質問にしてください。1つを「最高」と宣言せずに違いを説明してください。長いメニューの場合は、最初に6つと残りのオプションを見る方法を提示してください。ユーザーが例を欲しがっている場合は、選択する前にオプションを表示してください。ユーザーがインタラクティブセレクタを要求し、エージェントがサポートしている場合は、同じ選択肢をUIコントロールとして提示してください。
利用可能なスタイルパック
ID、エイリアス、一般的なスペルミス、説明を照合するときはstyles/registry.jsonを読んでください。句読点、ハイフン、大文字小文字を正規化し、否定されたスタイルの言及（「グラスモーフィズムではない」）とコンテキストを尊重してください。利用可能な場合、python3 scripts/style_probe.py --prompt "..."は決定論的なスタイルヒントを提供できます。セマンティック解釈とプロジェクトコンテキストが依然として優先されます。スタンドアロンのスタイルスキルを名前で呼び出さないでください。選択されたローカルstyles/<id>.mdファイルを読み込んでください。これはインストールされたルーターの一部です。組み込みパック：
| ID | 方向 | 選択時に読み込むファイル |
|---|---|---|
claymorphism | 彫刻的な触感 | スタイルパック |
glassmorphism | 半透明の階層 | スタイルパック |
brutalism | 生の構造化 | スタイルパック |
neo-brutalism | 遊び心あふれる大胆さ | スタイルパック |
minimalism | 抑制された明瞭さ | スタイルパック |
swiss-editorial | タイポグラフィックグリッド | スタイルパック |
bento | モジュラータイル | スタイルパック |
skeuomorphism | 物理的コントロールメタファー | スタイルパック |
retro-terminal | コンソール美学 | スタイルパック |
enterprise | ワークフロー/データ優先 | スタイルパック |
カスタムは第一級です： 選択された美的スタイルがレジストリにない場合、短い参照または制約を収集し、同じ次元を使用して暫定的なプロジェクト固有のスタイル定義を作成します。存在しないパックとしてスタイルを誤ってラベル付けしないでください。外部インターネットアクセスを選択に必要としないでください。
ルーターステート
needs-selection：新しい視覚的作業。選択/確認された方向性なし。スタイル質問をし、停止します。ready：スタイルまたは既存のブランドが明示的に確立されています。関連するパックを読み込み実装します。refine：既存のUIの小さな変更。スタイルを維持し、必要なトークン/コンポーネントのみを変更します。custom：ユーザーがブレンド、スクリーンショット、または不特定のスタイルを選択します。同じデザイン次元にマッピングし、結果的にあいまいな点のみを確認します。non-visual：バックエンド、テスト、ドキュメント、視覚的な決定を伴わないバグ修正。デザイン選択を完全にスキップします。
詳細なルーティング、ブレンド、競合ルール：スタイルルーター。自律的な発見、スタイルエイリアス、ホスト制限、正確な例のトランスクリプトについては、自動呼び出しを参照してください。
選択後のスタイル適用
- 要件を抽出する： 製品、オーディエンス、デバイス、フレームワーク、既存のブランド、明示的な好き嫌い、アクセシビリティ、パフォーマンス。
- 選択されたパックのみを読み込む（必要に応じて共有参照も）。未選択のパックからランダムなルールをブレンドしないでください。
- スタイル ≠ アナトミー： 製品フローとページコンテンツを実際のユーザー目標から導出し、選択されたパックが視覚的なマテリアルを決定します。コーディング前に…
[以下は翻訳のため省略されました]