プロジェクトショーケース
プロジェクトの山を、訪問者がフィルタリングしてスキャンできるカタログに変えます。1プロジェクトにつき1枚のカード。各カードは詳細ページにリンクし、プロジェクトの種類でグループ化されます。これを機能させるフレームワークは、トラックを主軸にすることです。訪問者はあなたが使ったスタックには興味がなく、これが実際に試せる製品なのか、コンペティション作品なのか、それとも実験的なものなのかに関心があります。それを最初に分類し、その他は後回しにします。
作業全体を通して、次の2つの主要なアイデアを念頭に置いてください。
- 1カード、1プロジェクト。 すべてのプロジェクトは1枚のカードです。カードはフックであり、詳細ページは証拠です。
- 構築する前にインタビューする。 スタック、カテゴリ、既存のものを決して推測しないでください。質問してから構築します。
ステップ1 — インタビュー（コードを書く前に）
停止。回答が得られるまで、スキーマの設計やコンポーネントの作成を行わないでください。ユーザーがすでに話した内容に適応しながら、質問します。
- これはどのサイトに追加しますか？ フレームワーク（Next.js / React、Astro、SvelteKit、プレーンHTML）と、プロジェクトがどこに保存されるか（データファイル、CMS、データベース）を確認します。これにより、以下のすべての構築方法が決まります。
- すでにプロジェクトページやプロジェクトデータはありますか？ ある場合、まずそれを読み、拡張してください。置き換えないでください。既存のフィールド名とビジュアルスタイルに合わせます。
- どのような種類のプロジェクトがありますか？ デフォルトのトラック分割は製品 / ハッカソン / 研究開発ですが、確認してください。「クライアントワーク」「執筆」「オープンソース」などを希望する場合もあります。トラックが主要なフィルターなので、正しく設定してください。これはユーザーの判断であり、あなたの判断ではありません。
- 各プロジェクトについて、どの程度の情報がありますか？ 1行の説明、長めの説明、ライブURL、リポジトリ、デモ動画、図やスクリーンショット、スライドなど。これにより、各カードと詳細ページで使用されるオプションフィールドとメディアが決まります。
- カードごとの1つのアクションは何ですか？ アプリを開く、デモを見る、リポジトリを読む、スライドを見る。それがカードのコールトゥアクションです。
ユーザーの回答を1〜2文で要約して反映させてから、先に進みます。ユーザーが既存のショーケースに1つのプロジェクトを追加するだけの場合は、スキーマ設計を完全にスキップしてください。既存のデータ構造を読み、そのエントリをそれに合わせて1つだけ記述します。
ステップ2 — データモデル
references/schema.md を読み、フィールドごとのモデルと trackOf() の派生トリックを確認します（これにより、フィルターを追加する際に既存のエントリをすべて編集する必要がなくなります）。要点は、アイテムのフラットリストです。各アイテムには、slug、name、1行の description、より詳細な whatItIs、track（主要フィルター）、status、stack[]、links[]、および1つの cta が含まれます。メディアフィールドはオプションで、アイテムごとに設定します。
ステップ3 — 構築する
references/patterns.md を読み、カードと詳細の分割、フィルターバー、メディアブロック、および記述ルールを確認します。構造は以下の通りです。
- ギャラリー: フィルターバー（トラックが最優先、次に種類/ティア/ステータスなどの二次フィルター）+ レスポンシブなカードグリッド。
- カード: 簡潔に — 名前、ステータス、1行の説明、いくつかのタグ、1つのCTA。簡潔に、告白ではなく — カードはものが何であるかを伝え、長々としたエッセイではありません。
- 詳細ページ: スラッグごとに1つ。より詳細な
whatItIs、オプションの埋め込み動画（黒画面で開かないようにポスター画像付き）、オプションのヒーロー画像/図、そしてボタンとして表示されるリンク。
サイトの既存のデザイントークンとコンポーネントに合わせてください。新しいビジュアル言語を発明しないでください。
ステップ4 — 検証
ビルドまたは型チェックを行います。次に、以下の3つが実際に機能することを確認します。単に主張するのではなく、確認します。トラックフィルターがグリッドを絞り込むこと、カードがその詳細ページを開くこと、および埋め込みメディアがレンダリングされること（動画が再生され、画像が読み込まれること）。ユーザーに表示します。
ガードレール（推測せず、確認する）
- トラックはユーザーのもの — デフォルトを提示しますが、カテゴリはユーザーに決めさせます。
- 既存のショーケースを拡張し、密かに置き換えないでください。
- カードのコピーは簡潔に保ち、長文は詳細ページに記載します。