ITDanZF/skill

フロントエンドプロトタイプリビルド

アクティベーション

以下の2つの条件が両方とも満たされた場合にのみ、このスキルを使用します。

• ユーザーがページ画像、スクリーンショット、モックアップ、またはプロトタイプを提供、または明確に参照している。
• ユーザーが関連するフロントエンドページの生成、再現、変換、実装、または復元を明示的に依頼している。

ユーザーが単に画像のレビューや説明のみを依頼している場合は、明示的に依頼されない限りコードを実装しません。

ワークフロー

1. まずプロトタイプ画像を検査します。

   • ページタイプ、ビューポート、メインレイアウト領域、配置グリッド、スペーシングリズム、タイポグラフィスケール、密度、視覚的階層を特定します。
   • 可視要素を抽出します：ナビゲーション、フォーム、ボタン、テーブル、カード、リスト、タブ、フィルター、メディア、空の状態、状態インジケーター、アイコン。
   • 可視アフォーダンスからのみ、可能性のあるインタラクションを推測します。例：ホバー可能なアクション、選択されたタブ、ドロップダウン、トグル、フィルター、モーダル、ページネーション、入力状態。
   • ユーザーが機能的な動作を要求しない限り、曖昧なコンテンツは静的な表示として扱います。

2. コーディング前にローカルのフロントエンドプロジェクトを調査します。

   • フレームワーク、ルーティング、コンポーネント規約、スタイリング方法、テーマトークン、CSS変数、Tailwind設定、デザインシステム、アイコンライブラリ、既存のページパターンを特定します。
   • 既存のコンポーネント、スペーシングスケール、タイポグラフィユーティリティ、カラートークン、レイアウトプリミティブを優先します。
   • プロトタイプと矛盾しない場合、最も近い既存ページまたはコンポーネントパターンに合わせます。

3. 実装範囲を計画します。

   • プロジェクトの規約に適合する最小のファイル/コンポーネント構造を選択します。
   • プロジェクトに確立されたフィクスチャまたはモックデータパターンがない限り、静的なプロトタイプデータはローカルかつ明白に保ちます。
   • 静的なページ再現のために、新しい状態管理、コンポーネントライブラリ、CSSフレームワーク、またはグローバルテーマの変更を導入しないでください。

4. ページを実装します。

   • セマンティックHTMLとプロジェクトネイティブなコンポーネントを使用して、レイアウトと視覚的構造を再現します。
   • レイアウト、サイジング、スペーシング、レスポンシブ動作、ホバー/フォーカス状態、トランジション、レイヤリング、および単純な視覚状態にはCSSを使用します。
   • JavaScriptは、本当に状態やイベント処理を必要とする動作にのみ使用します。
   • コードは効率的で読みやすく、プロダクションスタイルに保ちます：明確なコンポーネント境界、最小限の重複、ページのスキャン性を損なう使い捨ての抽象化は避けます。

5. 結果を視覚的に検証します。

   • 必要に応じて、関連するローカル開発サーバーまたは静的プレビューを実行します。
   • レンダリングされたページを、対象ビューポートおよび該当する場合は少なくとも1つのレスポンシブブレークポイントでプロトタイプと比較します。
   • 完了前に、スペーシング、階層、色、サイジング、オーバーフローの明らかな不一致を修正します。

テーマとカラールール

ローカルプロジェクトのテーマを信頼できる情報源として使用します：

• プロジェクトのトークン、CSS変数、Tailwindテーマ値、デザインシステムプロパティ、既存のコンポーネントバリアントを優先します。
• プロジェクトに一致するセマンティックトークンがある場合は、スクリーンショットの色がわずかに異なっていてもそれを使用します。
• プロジェクトに適切なトークンがない場合は、スクリーンショットの色を直接使用し、再作成されたページ/コンポーネントにローカルに保持します。
• ユーザーが明示的に要求しない限り、単一のスクリーンショットに合わせるためにグローバルテーマファイルを変更しないでください。
• ローカルテーマの意図が明確な場合は、ピクセル単位の色のコピーよりもブランドの一貫性を優先します。

レイアウトと要素の抽出

コーディング前に以下の詳細を取得します：

• ページシェル：ヘッダー、サイドバー、フッター、コンテンツ幅、スクロール領域、スティッキー領域。
• グリッド：列、行、ガター、カード/テーブル/リストのリズム、ブレークポイントの動作。
• タイポグラフィ：見出し/本文/キャプションスケール、太さ、行の高さ、切り詰め。
• コントロール：ボタンサイズ、入力の高さ、選択済み/無効/ローディング状態、アイコン、バッジ。
• コンテンツの忠実度：ラベル、表示テキスト、数字、日付、アバター、画像プレースホルダー、空の状態。
• レイヤリング：シャドウ、ボーダー、区切り線、オーバーレイ、ポップオーバー、z-index関係。

絶対配置を多用しないでください。flex、grid、内在サイジング、アスペクト比、min/max制約、コンテナベースのレスポンシブルールを優先します。絶対配置は、オーバーレイ、バッジ、装飾アンカー、またはスクリーンショット固有のレイヤリングで、他の方法ではクリーンに表現できない場合にのみ使用します。

インタラクションガイダンス

静的なページ再現の場合、リクエストによって暗示されるレベルまでのインタラクションのみを実装します：

• プロトタイプが暗示する場合は、アクセス可能なホバー、フォーカス、アクティブ、選択済み、無効、ローディングのビジュアルを常に含めます。
• ユーザーがインタラクティブな動作を要求した場合、またはプロトタイプが明らかにそれに依存している場合にのみ、シンプルな開閉、タブ切り替え、選択、フィルタリングを実装します。
• 実用的な場合、シンプルなインタラクションにはCSSセレクターとネイティブHTML動作を優先します。
• レイアウト、スペーシング、切り詰め、色、またはレスポンシブ動作を修正するためだけに使用されるJavaScriptは避けてください。これらはCSSで解決します。

コード品質ルール

大規模コードベースのフロントエンドプラクティスに従います：

• コンポーネントは凝集性を保ち、曖昧な視覚的断片ではなく、ドメインまたは可視的な役割で名前を付けます。
• ページを非常に多くの小さなコンポーネントに分割することは避けます。ただし、実際に独立した責任がある場合は除きます。
• プロジェクトがTypeScriptを使用する場合、静的なサンプルデータに型を付けます。
• 手書きのSVGではなく、既存のアイコンライブラリを使用します（利用可能な場合）。
• 適切な箇所にaltテキスト、ラベル、キーボードフォーカススタイル、セマンティック構造を追加します。
• プロジェクトにスペーシング、サイジング、またはカラートークンがある場合、ハードコードされたマジックナンバーを避けます。
• CSSまたは既存のユーティリティで処理できるエフェクトのために依存関係を追加しないでください。

完了チェックリスト

最終応答の前に、以下を確認します：

• 画像がレイアウト、要素、テーマ、暗示されたインタラクションについて検査されました。
• 既存のプロジェクトテーマとフロントエンド規約がチェックされました。
• 色はローカルトークンを優先し、不足しているトークンにのみスクリーンショットの色を使用します。
• CSSが可能な限り視覚的なレイアウトと状態を処理します。
• レンダリングされたページがプレビューされたか、プレビューできなかった理由が記載されています。