Justesse
簡潔な指示、リポジトリ、またはビジュアルリファレンスを、一貫性のあるプロダクションUIに変換します。テイストとは、好みのフレームワーク、美学、またはコンポーネントレシピとしてではなく、制約下での文脈的判断として扱います。
これは宣言的で参照専用の機能です。そのデザイン推論、ルール、受け入れ基準は、それを実行するモデル、エージェントランタイム、コマンドラインツール、ベンダー、ホスティング環境から独立している必要があります。ランタイム固有のディスカバリがこのディレクトリを公開することはありますが、スキルのセマンティクスを変更したり、そのワークフローに必須であってはなりません。
動作モードのロック
デザイン決定を下す前に、1つのプライマリモードを選択します。デザインリードでそれを明示し、黙ってモードを切り替えないでください。2つのモードが実質的に異なる成果物を意味し、リクエストがそれを解決しない場合は、1つの焦点を絞った質問をしてください。タスクはセカンダリモードを指定することもできますが、プライマリモードがワークフローと受け入れ基準を制御します。
| モード | 主な成果 | 必要なリファレンス |
|---|---|---|
| マーケティング / コンバージョン | 価値を伝え、オーディエンスを1つの測定可能なアクションに導く | marketing-surfaces.md |
| プロダクト / タスク | ユーザーが状態を理解し、ダッシュボードを含む定型的な作業を完了するのを助ける | product-and-transaction.md |
| トランザクションフロー | 重要または複数ステップのアクションを安全かつ復元可能に完了する | product-and-transaction.md |
| リデザイン: 維持 | 認識可能なブランドとプロダクト契約を維持しながら品質を向上させる | redesign-preservation.md |
| リデザイン: 全面改訂 | 変更が承認されていない契約を保持しながら、新しいビジュアル言語を確立する | redesign-preservation.md |
| リファレンスからコードへ | 提供されたビジュアルエビデンスをターゲットプロジェクトのネイティブ実装に変換する | reference-to-code.md |
| ビジュアルレビュー | 階層、一貫性、ユーザビリティ、レスポンシブネス、プロダクションリスクを診断する | interface-quality.md |
| 読み物 / ドキュメント | ドキュメント、ガイド、記事、ヘルプ、またはチェンジログを通じて読者が何かを理解するのを助ける | reading-surfaces.md |
| 体験 / ショーケース | インターフェースが後退している間に、訪問者をポートフォリオ、ギャラリー、展示作品の中に置く | experience-surfaces.md |
| 画像コンセプト | インターフェースに役立つアートディレクションを定義または生成する | image-concepts.md |
| データ可視化 | 尺度、比較、分布、関係、不確実性を検査可能なエビデンスに変換する | data-visualization.md |
| エグゼクティブ判断メモ | 限定されたエビデンスを、意思決定者向けの結論主導型プレゼンテーションに変換する | decision-memo.md |
プライマリモードを選択した後、プロファイルを別途設定します。このスキルはプロファイルメカニズムを同梱していますが、プロファイル自体は含みません。personal:<name> は、その正確なフラグがリクエストまたはプロジェクトの指示で明示されている場合にのみアクティブにします。人の名前、アーティファクトの種類、またはこのスキルの可用性から推測してはいけません。フラグがない場合は、ビジュアル言語、トーン、パレット、マテリアリティ、サーフェスカラーをブランドニュートラルに保ちます。明るい紙のキャンバスはデフォルトではありません。
アクティブなフラグは、ビジュアルシステムを許可するのではなく、必須の宣言を開きます。profile-declaration.md の10個のフィールドすべてに対して具体的な回答を取得してから、プロファイルに基づいてデザイン決定を下してください。未回答のフィールドを推論や、別のプロファイル、このスキルの例、またはそのハーネスフィクスチャから値を借用して埋めてはいけません。各フィールドに対して、そのフィールド独自の回答形式で、実際の例を添えて質問してください。裸の質問は、フォームが測定値を必要としているムードを返します。
コアワークフロー
- 提案する前に検査する。 関連するプロジェクトファイル、代表的なスクリーンとコンポーネント、パッケージとビルド設定、デザイントークン、データシェイプ、ルート、テスト、提供されたリファレンスを読みます。実際のもの、推測されるもの、不明なものを特定します。
- ブリーフをフレーミングする。 brief-and-direction.md を読みます。オーディエンス、ユーザージョブ、ビジネス目標、コンテンツとブランドのエビデンス、制約、プライマリモード、成功シグナルを記録します。実装前に要求されたすべての成果物を列挙します。トレンドのコラージュよりも、1つの守備可能な解釈を優先します。
- デザインリードを宣言する。 1つのコンパクトなステートメントで、モード、オーディエンス、プロダクトジョブ、ビジュアルディレクション、密度、モーションポスチャを命名します。決定と前提を区別します。
- プロダクト契約を維持する。 ユーザーが明示的に変更を許可しない限り、既存のフレームワーク、パッケージマネージャー、コンポーネント規則、デザインシステム、データおよびAPI契約、状態セマンティクス、ルート、フォーム、アナリティクス、同意および法的動作、アクセシビリティ、SEO、コンテンツの意味、テスト、パフォーマンスバジェットを維持します。全面改訂モードは、これらを破る許可ではありません。
- ネイティブに実装する。 インストール済みの依存関係と確立されたプリミティブを再利用します。プロジェクト自身のフレームワークとスタイリングモデルでディレクションを表現します。このスキルがビジュアルの可能性に言及したという理由だけで、React、Tailwind、GSAP、別のデザインシステム、ダークモード、フォント、または依存関係を導入してはいけません。
- 全状態空間を解決する。 レスポンシブレイアウトに加えて、適用可能なローディング、空、部分、エラー、成功、無効、権限、オフライン、バリデーション、破壊的アクションの状態をデザインします。ダッシュボードとフローでは、データの可読性、タスクの継続性、復元性を保護します。
- 境界のあるパスでレンダリングし検証する。 最初に完全にビルドします。次に、プレビューツールが存在する場合、代表的な狭いビューポートと広いビューポート、および実際のコンテンツの極端なケースを1つのバッチラウンドで一緒に検査し、階層、読み取り順序、オーバーフロー、コントラスト、フォーカス、インタラクションフィードバック、契約の維持を比較します。そのラウンドで示されたすべての問題を1つのバッチで修正し、最大で1ラウンドの確認で終了し、磨き込みを止めます。オープンエンドの自己QAループは予算を消費して収束しません。このバウンドは、スクリーンショット、欠陥スキャン、マイクロ編集、リビルドを含むサイクル全体をカバーします。モックアップを、それに見合ったビルド、テスト、ビジュアルエビデンスなしにプロダクション準備完了と呼んではいけません。
- 配信のプレフライト。 production-preflight.md を読み、該当する障害を修正し、要求されたすべての成果物をクロスチェックし、実行できなかったチェックを報告します。
リファレンスルーティング
アクティブなモードが必要とするものだけをロードします。すべてのリファレンスはここに直接リンクされています。
- 常に brief-and-direction.md、interface-quality.md、production-preflight.md を読む。
- マーケティング、キャンペーン、エディトリアルコンバージョン、価格設定、ローンチ、またはその他の獲得サーフェスについては marketing-surfaces.md を読む。
- ドキュメント、ガイド、記事、ヘルプ、チェンジログ、および理解を仕事とする長文ページについては reading-surfaces.md を読む。
- ポートフォリオ、ギャラリー、ショーケース、および作品自体が主役の展覧会ページについては experience-surfaces.md を読む。
- アプリケーションUI、ダッシュボード、データ密度の高いワークスペース、フォーム、チェックアウト、オンボーディング、設定、マルチステップフローについては product-and-transaction.md を読む。
- サーフェスにKPI、チャート、分析図、メトリック比較、数値テーブル、日付/期間表示が含まれる場合は常に data-visualization.md を読む。
- 既存のサーフェスが変更される場合は、維持モードと全面改訂モードの両方で redesign-preservation.md を読む。
- スクリーンショット、モックアップ、ウェブサイト、またはその他のビジュアル例が実装インプットである場合は reference-to-code.md を読む。
- 画像がブリーフの一部である場合、または画像コンセプトが選択されたモードである場合にのみ image-concepts.md を読む。
- ブリーフにビジュアル語彙が欠けている場合、または競合するディレクションを分離する必要がある場合に style-lenses.md を読む。
- 最後に、そしてインターフェース品質チェックが合格した後にのみ、配信品質の洗練とほぼ同一の候補を判断するために finishing.md を読む。仕上げは階層、正確性、または状態の代わりにはなりません。
- 検査したプロジェクトがすでにReact、Next.js、またはTailwindを使用している場合、またはユーザーがグリーンフィールド作業のためにそのスタックを明示的に承認した場合にのみ react-next-tailwind.md を読む。これはポータブルなデフォルトではありません。
- エグゼクティブメモ、決定資料、または結論主導のスライドシーケンスについては decision-memo.md を読む。
- 成果物がページではなく編集可能なプレゼンテーションファイルである場合は、最初のスライドをレイアウトする前に pptx-safe-html.md を読む。
- 1つの世界観をダッシュボード、作成されたランディングページ、ケーススタディ、レポート、プレゼンテーションにわたって伝える必要がある場合は surface-translation.md を読む。
- 正確な
personal:<name>フラグを使用する場合は、最初に profile-activation.md と profile-declaration.md を読み、宣言が完了したら profile-data-semantics.md を読む。それ以外の場合はロードまたは適用しない。 - 管理されたプロファイル比較、ネガティブコントロール、ブラインドレビュー、またはプロモーション決定を実行する場合にのみ profile-calibration.md を読む。
- 帰属、監査、再配布、または上流比較の場合にのみ upstream-provenance.md を読む。
リファレンスから無関係なファイルを再帰的にロードしないでください。
条件付き機能
画像生成、画像検索、またはブラウジングは、利用可能で承認され、かつ必要な場合にのみ使用します。画像作業では、既存のリポジトリアセット、次にユーザー提供のアセット、次に承認されたツールを優先します。それ以外の場合は、特定のコンセプトブリーフまたは明確にラベル付けされたプレースホルダーを、それが最終的なアートではないことを示して提供します。プレースホルダーは、本当に不足している外部アセットまたは依存関係にのみ使用し、各プレースホルダーの寸法、役割、および次の交換ステップを指定します。プロダクトのスクリーンショット、顧客、メトリクス、ロゴ、エンドースメントを作り出してはいけません。
モーションは、階層、フィードバック、連続性、またはナラティブを明確にする場合にのみ使用します。プロジェクトの既存のメカニズムと、最も軽量で適切なテクニックを優先します。モーションなしでコンテンツを保持し、モーション減少の設定を尊重し、スクロールキャプチャを回避し、オブザーバー、リスナー、タイムラインをクリーンアップします。モーションライブラリは条件付きの実装選択であり、決して要件ではありません。ネイティブCSSトランジションがもはや十分ではなく、作業にレイヤードコレオグラフィー、スクロールストーリーテリング、または専用のアニメーションエンジンが必要な場合にのみ motion-patterns.md にエスカレーションします。
配信契約
実装またはレビューされたサーフェスを、モードとデザインリード、維持および意図的に変更された契約、検証エビデンス、およびプレースホルダーや未解決のリスクとともに提供します。レビューのみのリクエストの場合は、ユーザーへの影響によって所見を優先順位付けし、影響を受けるスクリーンまたはコンポーネントを引用します。依頼がない限り、プロジェクトを変更してはいけません。