技術スタック分析とCursorルール生成

=================== --- description: globs: alwaysApply: true --- # ページUI技術スタック＆依存関係ガイド ## プロジェクト概要 **ページUI** は、モダンなReact/Next.jsスタック上に構築されたランディングページコンポーネントライブラリです： - **ウェブサイト**：コンポーネントデモを備えたNext.js 14ドキュメントサイト - **CLIツール**：`@ page-ui/wizard` による簡単なプロジェクト初期化 - **コンポーネント**：Radix UI + Tailwind CSS上に構築されたコピーペースト式Reactコンポーネント ## コアフレームワークスタック ### **Next.js 14.2.24**（App Router） - **フレームワーク**：App Routerアーキテクチャを備えたReactメタフレームワーク - **使用機能**：APIルート、SSG/SSR、OG画像生成、バンドル分析 - **ベストプラクティス**：App Routerパターンを使用し、pagesディレクトリは避ける ### **React 18.2.0** - **UIライブラリ**：並行機能を備えたコアReactライブラリ - **機能**：Suspense、自動バッチ処理、サーバーコンポーネント - **ベストプラクティス**：React 18パターンを使用 ### **TypeScript 5.1.3** - **設定**：より良い型安全性のために厳格モード有効 - **ベストプラクティス**：モダンなTSバージョン ## UIコンポーネントシステム ### **Radix UIプリミティブ**（v1.xシリーズ） アクセシビリティファーストの完全なコンポーネントライブラリエコシステム： **ベストプラクティス**： - 複合コンポーネントパターンを使用 - インラインスタイルではなく、常にTailwindクラスでカスタマイズ - 適切なARIA属性を実装（組み込み） - 一貫したスタイリングのためにカスタムコンポーネントでラップ ### **Shadcn/UIデザインパターン** - **場所**：`/components/shared/ui/` ディレクトリ - **哲学**：NPM依存関係ではなく、コピーペースト式コンポーネント - **スタイリング**：テーマ設定用のTailwind CSS + CSS変数 - **バリアント**：型安全なバリアントに `class-variance-authority` を使用 ## スタイリング＆デザインシステム ### **Tailwind CSS 3.3.3** + エコシステム ```json { "tailwindcss": "^3.3.3", "@ tailwindcss/forms": "^0.5.4", "@ tailwindcss/typography": "^0.5.9", "tailwindcss-animate": "^1.0.7", "tailwind-merge": "^1.14.0" } ``` **ベストプラクティス**： - 条件付きクラスに `tailwind-merge` を使用：`cn(baseClasses, conditionalClasses)` - テーマ設定にCSS変数を活用：`hsl(var(--primary))` - フォームとタイポグラフィにプラグインを使用 - 一貫したスペーシングとカラーシステムを実装 ### **アニメーションライブラリ** - **Framer Motion 10.16.4**：複雑なアニメーション、ページ遷移 - **Tailwind Animate**：シンプルなCSSアニメーション - **ベストプラクティス**：シンプルな効果にはCSSアニメーション、複雑なインタラクションにはFramer Motionを使用 ```typescript // Framer Motionのベストプラクティス： import { motion, AnimatePresence } from 'framer-motion' function AnimatedComponent() { return ( <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -20 }} transition={{ duration: 0.3 }} > コンテンツ </motion.div> ) } ``` ## 状態管理＆フォーム ### **Zustand 4.5.2**（グローバル状態） - **哲学**：最小限で、意見に左右されない状態管理 - **使用法**：テーマ設定、グローバルUI状態、コンポーネントプレイグラウンド状態 - **ベストプラクティス**：適切なセレクターで型付きストアを作成 ```typescript interface ThemeState { theme: 'light' | 'dark' setTheme: (theme: 'light' | 'dark') => void } export const useThemeStore = create<ThemeState>((set) => ({ theme: 'light', setTheme: (theme) => set({ theme }), })) ``` ### **React Hook Form 7.46.2** + バリデーション - **フォームライブラリ**：高性能な非制御フォーム - **バリデーション**：`@ hookform/resolvers` ^3.3.1 + `zod` ^3.22.2 - **統合**：Radix UIフォームコンポーネントとシームレスに連携 ```typescript // ベストプラクティスのフォーム設定： const formSchema = z.object({ email: z.string().email(), name: z.string().min(2), }) function ContactForm() { const form = useForm<z.infer<typeof formSchema>>({ resolver: zodResolver(formSchema), }) return <form onSubmit={form.handleSubmit(onSubmit)}>...</form> } ``` ### **Zod 3.22.2**（スキーマバリデーション） - **使用法**：フォームバリデーション、APIレスポンスバリデーション、型生成 - **ベストプラクティス**：使用箇所の近くでスキーマを定義し、型推論を活用 ## コンテンツ管理システム ### **カスタムContentlayer実装** ```json { "@ shipixen/next-contentlayer-module": "1.0.2", "shipixen-contentlayer": "1.0.2", "@ shipixen/pliny": "1.0.13" } ``` **機能**： - 型安全なMDX処理 - フロントマター解析 - 自動化されたコンテンツインポート - RSSフィード生成 ### **MDX処理パイプライン** **Remarkプラグイン**（Markdown処理）： - `remark-gfm` ^3.0.1：GitHub Flavored Markdown - `remark-math` ^5.1.1：数式表現 **Rehypeプラグイン**（HTML処理）： - `rehype-slug` ^5.1.0：見出しIDの自動生成 - `rehype-autolink-headings` ^6.1.0：見出しの自動リンク - `rehype-prism-plus` ^1.6.1：シンタックスハイライト - `rehype-katex` ^6.0.3：数式レンダリング **ベストプラクティス**： - コンテンツは実行時ではなくビルド時に処理 - 安定したビルドのために一貫したプラグインバージョンを使用 - 生成された型による型安全なコンテンツクエリ ## 開発エクスペリエンス ### **コード品質ツール** ```json { "eslint": "^8.45.0", "@ typescript-eslint/eslint-plugin": "^6.1.0", "@ typescript-eslint/parser": "^6.1.0", "eslint-config-next": "^14.2.24", "eslint-config-prettier": "^8.8.0", "prettier": "^3.0.0", "prettier-plugin-tailwindcss": "^0.4.1" } ``` **Gitワークフロー**： - **Husky 8.0.0**：Gitフック自動化 - **lint-staged 13.0.0**：コミット前のリンティングとフォーマット ### **インタラクティブ開発ツール** - **Monaco Editor 0.45.0**：コンポーネントプレイグラウンド用のブラウザ内コードエディタ - **コマンドパレット**：`cmdk` ^0.2.0 によるグローバル検索とナビゲーション - **バンドルアナライザー**：`@ next/bundle-analyzer` によるパフォーマンス監視 ## CLIツーリング（@ page-ui/wizard） ### **パッケージ設定** ```json { "name": "@ page-ui/wizard", "type": "module", "bin": "./packages/cli/index.mjs", "engines": { "node": ">=14.17.0" } } ``` ### **CLI依存関係** ```json { "chalk": "^5.3.0", // ターミナルの色とスタイリング "commander": "^12.0.0", // コマンドラインインターフェースフレームワーク "enquirer": "^2.4.1", // インタラクティブなCLIプロンプト "ora": "^8.0.1" // CLI用ローディングスピナー } ``` **ベストプラクティス**： - ESMモジュール（`.mjs` 拡張子）を使用 - enquirerでインタラクティブなプロンプトを提供 - oraスピナーで進捗を表示 - chalkで一貫したターミナルスタイリング ## アナリティクス＆外部サービス ### **Vercelエコシステム** - **アナリティクス**：`@ vercel/analytics` ^1.1.1 - **OG画像**：`@ vercel/og` ^0.5.20 - **ベストプラクティス**：最適なパフォーマンスのためにVercelのネイティブツールを使用 ### **プロダクトアナリティクス** - **PostHog 1.130.1**：フィーチャーフラグ、ユーザートラッキング、A/Bテスト - **ベストプラクティス**：適切な同意管理によるプライバシー準拠の設定 ### **HTTPクライアント** - **Axios 1.7.7**：API呼び出し、ニュースレター購読 - **ベストプラクティス**：基本設定付きのaxiosインスタンスを作成 ## ユーティリティライブラリ ### **日付＆時刻** - **date-fns 2.30.0**：モジュラーな日付ユーティリティライブラリ - **ベストプラクティス**：ツリーシェイキングのために必要な関数のみをインポート ```typescript // 良い例：ツリーシェイカブルなインポート import { format, parseISO } from 'date-fns' // 悪い例：ライブラリ全体のインポート import * as dateFns from 'date-fns' ``` ### **スタイリング＆UIユーティリティ** - **clsx 2.0.0**：条件付きclassNameユーティリティ - **class-variance-authority 0.7.0**：型安全なコンポーネントバリアント - **chroma-js 2.4.2**：色操作とテーマ生成 ### **データプレゼンテーション** - **@tanstack/react-table 8.10.7**：強力なテーブルコンポーネント - **lucide-react 0.400.0**：アイコンライブラリ - **sonner 1.3.1**：トースト通知