Skill.md検索

型安全で保守性の高いコンポーネントを生成：type定義とNamedExportを基本とした標準的な書き方でコンポーネントを作成し、リファクタリング時の変更が最小限に抑えられます。 Next.js App Routerの規約に沿った実装：'use client'宣言の判定を自動化し、Server ComponentとClient Componentの使い分けを正確に行えます。 Tailwind CSSのみでスタイリングを統一：UI libraries（shadcn/ui、MUIなど）に依存せず、標準HTMLタグと Tailwind ユーティリティクラスで統一感のあるデザインを実現できます。 コンポーネント配置を正確に判定：汎用パーツと機能別パーツの配置ルール（common / domain）を遵守し、プロジェクト構造を統一できます。 Props分割代入とrealuct.FCの非使用：最新のReact慣例に従い、将来的なアップグレードへの耐性を確保できます。 新しいフロントエンドコンポーネントの実装を一貫性を保って進めたいチームメンバー 既存コードベースの規約をAIに守らせたいプロジェクト管理者 Next.js App Router＋Tailwind CSSのプロジェクトに参加し、初期段階で間違わないようにしたい開発者 UIライブラリに依存しない、カスタマイズ性の高いコンポーネント実装を希望する人 コンポーネント実装では、React.FCは使用せず通常の関数コンポーネントとして定義します。Propsの型定義はinterfaceではなくtypeを推奨し、コンポーネント直上に記述します。Propsは引数部分で分割代入して受け取ります。エクスポートはexport defaultではなくexport constのNamedExportを使用し、リファクタリングの容易性と一貫性を確保します。 Next.js App Routerでは、useState、useEffect、useCallback、useSWR、onClick、onChange、window・documentなどの機能を使用するファイルは必ずファイルの最上部に'use client'を記述します。これら機能を使用しないコンポーネントはServer Componentのままで'use client'は記述しません。 スタイリングはPure Tailwind CSSのみで、shadcn/ui、MUI、Chakra UIなどのコンポーネントライブラリは使用しません。標準的なHTMLタグに直接Tailwindユーティリティクラスを適用します。汎用パーツ（Button等）はsrc/components/commonに、機能パーツ（Form等）はsrc/components/domainに配置します。