nextjs-shadcn

Next.js + shadcn/ui

コンテンツ、対象ユーザー、タスクに合ったビジュアルアイデンティティを備えたインターフェースを構築します。これらはデザインの基本方針であり、固定のページレシピではありません。ユーザーの指示や確立されたデザインシステムがある場合は、そちらを優先します。

ビジュアルの方向性を決める

新しいビューを作成する場合や、大幅なデザイン変更を行う場合は、構築前に frontend-design を使ってタイポグラフィ、配色、構成を決めます。小規模な編集では、機能しているビジュアルシステムを維持してください。

プロダクトの雰囲気、読み取り密度、言語サポートに合ったフォントを選びます。shadcn/create を使って、コンポーネントスタイル、本文と見出しのフォント、アイコンファミリー、テーマをまとめて選びます。代表的なコンテンツでプレビューを比較し、文字のスケール、間隔、階層を慎重に決めてください。デフォルトのプリセットでも珍しいフォントでも、それだけで優れたデザインになるとは限りません。

選択したプリセット、テーマ、フォント、アイコンファミリーをプロジェクトのデザインノートに記録し、ブリーフが変わらない限り、その方向性を維持してください。参照資料や画像はプロジェクト固有のものです。コンポーネントスタイルとアイコンファミリーは別々に選択します。これらについては styling.md を参照してください。

ユーザーのタスクを明確に保ちます。

• 装飾的なバッジ、繰り返される見出し、中身のないマーケティング文句、当たり前のことを説明する補助テキストを削除します。
• 役立つステータス、ナビゲーション、説明、開示情報は残します。
• テンプレートを埋めるためではなく、コンテンツに必要な場合にカード、セクション、CTA を使います。
• アクションとその結果、展開された詳細、アクティブなナビゲーションをつなぐ短いアニメーションを使います。既存のインタラクションコンポーネントを再利用してください。アニメーションの用途に応じた Motion、GSAP、vercel-react-view-transitions については styling.md を参照してください。
• プロジェクトのアイコンファミリーを再利用します。新しい UI アイコン、ファイルタイプアイコン、公式ブランドアセットを探す場合は icons を使います。アイコンを使えば、明確なラベルが不要になるわけではありません。

効果的な場合は雰囲気を加える

グリッドやドットのパターン、柔らかな背景光、グラデーション、カスタムシェイプ、テクスチャ、イラスト、動画は、利用可能なデザインツールです。ブリーフに合う場合、プロダクトのアイデンティティを強める場合、またはセクションを分かりやすくする場合に使ってください。個性のある背景が適切な場合もあれば、落ち着いたページが適切な場合もあります。

エフェクトはコンテンツの背後に配置し、配色との一貫性を保ち、ページに対して過剰にならないようにします。専用のメディアを使うことで成果が向上する場合は、利用可能な画像または動画生成ツールを使うか、適切な実素材を再利用してください。タスクに合ったアセットと実装を選びます。必須のアニメーションライブラリや画像の使用枚数はありません。

フォント、テーマのカスタマイズ、背景、メディア、モーションを決める際は styling.md を読んでください。

実際のプロジェクトに合わせて作業する

新しいプロジェクトでは、パッケージとスクリプトに Bun を使います。bun install、bun add、bun run <script>、bunx --bun <cli> を使用してください。これはユーザーのデフォルト設定です。パッケージマネージャーを改めて選ぶよう求めないでください。既存のプロジェクトでは、packageManager、ロックファイル、コンポーネントの規約、設定済みのエイリアスに従ってください。

編集を始める前に components.json とインストール済みのコンポーネントを確認します。プロジェクトのメタデータ、コンポーネントのドキュメント、レジストリのガイダンスには、shadcn スキルと CLI の info／docs コマンドを使ってください。

コンポーネント API はプリミティブのベースに依存します（init --base base|radix|aria。デフォルトは Base UI です）。Base UI では render を使い、Radix では通常 asChild を使います。既存のベースを維持し、そのドキュメントを参照してください。

shadcn docs、add、view ではネットワーク経由でレジストリにアクセスする必要があります。docs はテキストではなく URL を返します。オフラインの場合は、プロジェクト内の components/ui のソースとプリミティブのパッケージに含まれる型定義が API リファレンスになります。また、shadcn <command> --help、preset decode、migrate --list、インストール済みの shadcn/tailwind.css は引き続き利用できます。

インストール済みの Next.js バージョンに対応するドキュメントを優先し、存在する場合は node_modules/next/dist/docs/ も参照してください。記憶している API に頼るのではなく、利用可能な Next.js 開発ツールでランタイムエラーとルートのコンテキストを確認してください。

統合の一貫性を保つ

• Client Component の境界は、実用上可能な限り狭く保ちます。プロバイダーやインタラクティブなサブツリーでは、より上位に境界を設ける必要がある場合があります。
• 共通のクロームはレイアウトに、ルートのコンテンツは該当するルートの近くに配置します。(protected) ルートグループは認可を強制しません。
• Server Actions とデータアクセスの内部で、認証、認可、検証を行います。鮮度とアクセス要件に基づいてキャッシュを選択します。
• セマンティックなテーマトークンと既存のコンポーネントバリアントを使用します。意図的なデザインシステムの変更は、テーマまたはコンポーネント定義に加えます。

ルーティング、Server/Client の境界、キャッシュについてはarchitecture.mdを、共有サイドバーのレイアウトについてはsidebar.mdを、スキャフォールディングとプリセットについてはproject-setup.mdを参照してください。

結果を検証する

関連するモバイル幅とデスクトップ幅で、レンダリングされた画面を確認します。構成、折り返し、オーバーフロー、コントロール、変更の影響を受ける状態を確認してください。アクセシビリティ、フォーカス、視差効果の低減設定に応じた動作を維持します。スクリーンショットと DOM の確認では、それぞれ異なる点を把握できます。仕上がりには責任を持ち、実際の画面やアニメーションの中間状態をプロジェクトの方針と照らし合わせ、納品前に確認できた不具合を修正します。

プロジェクトのチェックを実行します。@shadcn/lint が設定されている場合は、そのフィードバックを活用してデザインシステムの一貫性を保ちます。新しい Tailwind v4 プロジェクト、またはテーマのずれが繰り返し発生する場合は、既存のリンターへの統合を検討してください。意図したデザインに合わせてルールを設定します。カスタム背景やメディアには、意図的な例外設定が必要な場合があります。リンターの設定と任意の shadcn ユーティリティについては、shadcn-platform.mdを参照してください。

変更内容と検証した内容を報告します。