Communitygithub.com

TIKAZI/TIKAZ-Codex-Frontend-Design

アートディレクションされたフロントエンドワークフロー。実装をスケールさせる前に、ビジュアルの方向性を証明します。

TIKAZ-Codex-Frontend-Design とは?

このスキルは、フロントエンドデザインのためのアートディレクション指向のワークフローを提供します。UI を「説得」「操作」「読む」「体験」の4つの表面タイプに分類し、ランディングページのような派手さをすべてのプロダクトに適用することを避けます。デザインリード、3つのプロジェクトダイヤル(バリアンス、モーション、密度)、1つの支配的なコンポジション、3つのアンチゴールを定義することで、ビジュアルの方向性を明確にします。`frontend-design-studio` がアートディレクションと実装を主導し、他のスキルが承認されたビジュアルワールドを上書きすることを防ぎます。アートディレクションの証明として、ナビゲーション、最初のビューポート、代表的な下流セクションのデスクトップ・モバイル両方のモックアップを構築します。デザイン証明が承認された後でのみ、リポジトリ全体の変更影響を `code-intelligence` に、本番実行を `engineering-delivery` にルーティングします。また、ビジュアル/プロダクト QA と実装 QA を別々に実施します。完了ゲートとして、デザイン契約のコミット、対象ビューポートでのスクリーンショット、クリティカルステート、モーション軽減動作、ビルド/テストエビデンス、コンポーネントライセンス状況、制限事項を記載したハンドオフを要求します。

対応~Claude Code✓Codex CLI~Cursor
npx skills add TIKAZI/TIKAZ-Codex-Frontend-Design

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

フロントエンドデザイン

TIKAZ によって設計、統合、リファクタリング、継続的にメンテナンスされています。

TIKAZ メソッド

  1. サーフェスを 説得、操作、読む、体験 のいずれかに分類する。すべてのプロダクトにランディングページのスペクタクルを適用しない。
  2. 1つの デザインリード、3つのプロジェクトダイヤル(バリアンス、モーション、密度)、1つの支配的なコンポジション、および3つのアンチゴールを作成する。
  3. frontend-design-studio にアートディレクションと実装を任せる。補助スキルは承認されたビジュアルワールドを上書きできない。
  4. アートディレクションの証明を構築する:ナビゲーション、最初のビューポート、1つの代表的な下流セクション、デスクトップとモバイルを一緒に。
  5. デザイン証明が承認された後にのみ、リポジトリ全体の変更影響を code-intelligence に、本番実行を engineering-delivery にルーティングする。
  6. ビジュアル/プロダクト QA と実装 QA を別々に実行する。

完了ゲート

デザイン契約のコミット、対象ビューポートでのスクリーンショット、クリティカルステート、モーション軽減動作、ビルド/テストエビデンス、コンポーネントライセンス状況、および残りの制限事項を含むハンドオフを要求する。

references/routing.md と references/output-contract.md を参照してください。

関連スキル