@einja/dev-cli 0.1.39 → 0.1.41

package/presets/default/docs/einja/steering/development/component-design.md

@@ -0,0 +1,502 @@
+<!-- @einja:managed -->
+# コンポーネント設計ガイドライン
+
+## 概要
+
+このドキュメントは、プロジェクトにおけるReactコンポーネントの設計原則と実装ガイドラインを提供します。
+
+## 基本原則
+
+### 1. 単一責任の原則
+- 各コンポーネントは単一の機能・責任を持つ
+- 複数の機能が必要な場合は、複数のコンポーネントに分割する
+
+### 2. 再利用可能性
+- プロジェクト全体で再利用可能なコンポーネントを作成する
+- プロパティ（props）による柔軟なカスタマイズを可能にする
+
+### 3. 型安全性
+- TypeScriptの型定義を必須とする
+- プロパティ、状態、イベントハンドラーは全て型定義する
+
+### 4. Co-location（共存配置）
+- 機能固有のコンポーネントは関連するページの近くに配置する
+- `_components` ディレクトリを使用してページ固有のコンポーネントを管理する
+- 複数のページで共有されるコンポーネントのみ `src/components/` に配置する
+
+## クイックリファレンス
+
+### ディレクトリ構造
+
+```
+src/
+├── components/
+│   ├── ui/                 # 基本的なUIコンポーネント
+│   │   ├── Button/
+│   │   ├── Input/
+│   │   └── ...
+│   └── shared/             # 共通コンポーネント（レイアウト含む）
+│       ├── Header/
+│       ├── Footer/
+│       └── ...
+└── app/
+    ├── dashboard/
+    │   ├── page.tsx
+    │   └── _components/    # ページ固有のコンポーネント
+    │       ├── DashboardChart/
+    │       └── StatsCard/
+    └── ...
+```
+
+### コンポーネント命名規則
+
+- **ファイル名**: PascalCase（例: `Button.tsx`, `UserProfile.tsx`）
+- **例外**: shadcn/uiコンポーネントはkebab-case（例: `button.tsx`）
+
+### コンポーネントディレクトリ構造
+
+```
+ComponentName/
+├── index.tsx           # コンポーネント本体
+└── variants.ts        # cvaバリアント定義（必要に応じて）
+```
+
+### 基本的な型定義
+
+```typescript
+interface ButtonProps {
+  children: React.ReactNode;
+  variant?: "primary" | "secondary" | "danger";
+  size?: "sm" | "md" | "lg";
+  disabled?: boolean;
+  onClick?: () => void;
+}
+```
+
+## チェックリスト
+
+新しいコンポーネントを作成する際の確認事項：
+
+- [ ] 適切なディレクトリに配置されている
+- [ ] TypeScript の型定義が完全
+- [ ] Tailwind CSS でスタイリングされている
+- [ ] プロパティのデフォルト値が設定されている
+- [ ] アクセシビリティが考慮されている
+- [ ] 単体テストが実装されている
+
+## ディレクトリ構造
+
+### プロジェクト全体のコンポーネント配置
+
+```
+src/
+├── components/
+│   ├── ui/                 # 基本的なUIコンポーネント
+│   │   ├── Button/
+│   │   ├── Input/
+│   │   ├── Dialog/
+│   │   └── ...
+│   └── shared/             # 共通コンポーネント（レイアウト含む）
+│       ├── Header/
+│       ├── Footer/
+│       ├── Sidebar/
+│       ├── LoadingSpinner/
+│       ├── ErrorBoundary/
+│       └── ...
+└── app/
+    ├── dashboard/
+    │   ├── page.tsx
+    │   └── _components/    # ページ固有のコンポーネント (co-location)
+    │       ├── DashboardChart/
+    │       ├── StatsCard/
+    │       └── ...
+    ├── auth/
+    │   ├── login/
+    │   │   ├── page.tsx
+    │   │   └── _components/
+    │   │       ├── LoginForm/
+    │   │       └── ...
+    │   └── register/
+    │       ├── page.tsx
+    │       └── _components/
+    │           ├── RegisterForm/
+    │           └── ...
+    └── ...
+```
+
+### コンポーネント配置のルール
+
+#### `src/components/ui/`
+- shadcn/uiなどの基本的なUIコンポーネント
+- 複数ページで使用される汎用コンポーネント
+- Button、Input、Dialog、Cardなど
+
+#### `src/components/shared/`
+- レイアウトコンポーネント（Header、Footer、Sidebar）
+- 共通のユーティリティコンポーネント（LoadingSpinner、ErrorBoundary）
+- 複数の機能領域で共有されるコンポーネント
+
+#### `app/*/page/_components/`
+- ページ固有のコンポーネント
+- Co-locationパターンに従った配置
+- 他のページでは使用しないコンポーネント
+
+### コンポーネントディレクトリ構造
+
+#### 基本構造
+
+```
+ComponentName/
+├── index.tsx           # コンポーネント本体
+└── styles.ts          # Panda CSS スタイル定義（必要に応じて）
+```
+
+#### 複雑なコンポーネントの場合
+
+```
+ComponentName/
+├── index.tsx           # メインエクスポート
+├── ComponentName.tsx   # コンポーネント本体
+├── styles.ts           # Panda CSS スタイル定義
+├── types.ts            # 型定義
+├── hooks.ts            # カスタムフック
+└── ComponentName.test.tsx  # テスト（co-location）
+```
+
+### 命名規則
+
+#### ファイル名
+- **PascalCase を使用**: `Button.tsx`, `UserProfile.tsx`
+- **コンポーネント名とファイル名を一致させる**
+
+#### 例外：shadcn/ui
+- shadcn/uiで生成されたコンポーネントはkebab-caseファイル名
+- 例: `button.tsx`, `input.tsx`
+- これらはそのまま使用し、新規作成するカスタムコンポーネントのみPascalCaseを適用
+
+### Co-location パターン
+
+#### メリット
+- 関連するコードが近くにある
+- ファイルの検索が容易
+- 機能削除時のクリーンアップが簡単
+
+#### 実践例
+
+```
+app/
+└── users/
+    ├── page.tsx
+    ├── loading.tsx
+    ├── error.tsx
+    └── _components/
+        ├── UserList/
+        │   ├── index.tsx
+        │   └── UserListItem.tsx
+        └── UserSearchForm/
+            └── index.tsx
+```
+
+#### `_components` の役割
+- アンダースコアプレフィックスはNext.jsのルーティングから除外される
+- ページ固有のコンポーネントを整理する場所
+- 他のページでは使用しないコンポーネントを格納
+
+## Props設計パターン
+
+### 型定義
+
+#### Props インターフェース
+
+```typescript
+interface ButtonProps {
+  children: React.ReactNode;
+  variant?: "primary" | "secondary" | "danger";
+  size?: "sm" | "md" | "lg";
+  disabled?: boolean;
+  onClick?: () => void;
+}
+```
+
+#### デフォルトProps
+
+```typescript
+const defaultProps: Partial<ButtonProps> = {
+  variant: "primary",
+  size: "md",
+  disabled: false,
+};
+```
+
+### イベントハンドリング
+
+#### 命名規則
+- `on` + 動詞の命名規則を使用
+- 例: `onClick`, `onSubmit`, `onChange`
+
+#### 型定義
+
+```typescript
+interface FormProps {
+  onSubmit: (data: FormData) => void;
+  onChange: (field: string, value: string) => void;
+}
+```
+
+### 状態管理
+
+#### ローカル状態
+- `useState` でローカル状態を管理
+- 複雑な状態は `useReducer` を検討
+
+```typescript
+const [isOpen, setIsOpen] = useState(false);
+
+// 複雑な状態の場合
+const [state, dispatch] = useReducer(reducer, initialState);
+```
+
+### エラーハンドリング
+
+#### Error Boundary
+- 予期しないエラーをキャッチ
+- ユーザーフレンドリーなエラー表示
+
+#### バリデーション
+- フォーム入力のバリデーション
+- 適切なエラーメッセージの表示
+
+### 実装例
+
+#### 基本的なButtonコンポーネント
+
+```typescript
+// index.tsx
+export interface ButtonProps {
+  children: React.ReactNode;
+  variant?: "primary" | "secondary" | "danger";
+  size?: "sm" | "md" | "lg";
+  disabled?: boolean;
+  onClick?: () => void;
+}
+
+import { button } from "styled-system/recipes";
+import type { ButtonProps } from "./types";
+
+export const Button: React.FC<ButtonProps> = ({
+  children,
+  variant = "primary",
+  size = "md",
+  disabled = false,
+  onClick,
+}) => {
+  return (
+    <button
+      className={button({ variant, size })}
+      disabled={disabled}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+};
+```
+
+### パフォーマンス
+
+#### メモ化
+- `React.memo` で不要な再レンダリングを防止
+- `useMemo`, `useCallback` で計算結果をキャッシュ
+
+```typescript
+const MemoizedComponent = React.memo(({ data, onClick }) => {
+  return <div onClick={onClick}>{data.name}</div>;
+});
+
+// useCallbackでコールバックをメモ化
+const handleClick = useCallback(() => {
+  // 処理
+}, [dependency]);
+```
+
+#### 遅延読み込み
+- `React.lazy` で大きなコンポーネントの遅延読み込み
+- `Suspense` で読み込み状態を表示
+
+```typescript
+const HeavyComponent = React.lazy(() => import('./HeavyComponent'));
+
+function App() {
+  return (
+    <Suspense fallback={<Loading />}>
+      <HeavyComponent />
+    </Suspense>
+  );
+}
+```
+
+### アクセシビリティ
+
+#### セマンティックHTML
+- 適切なHTMLタグを使用
+- `aria-*` 属性の適切な使用
+
+```typescript
+<button
+  aria-label="メニューを開く"
+  aria-expanded={isOpen}
+>
+  <MenuIcon />
+</button>
+```
+
+#### キーボード操作
+- キーボードのみでの操作を可能にする
+- フォーカス管理の実装
+
+```typescript
+const handleKeyDown = (e: React.KeyboardEvent) => {
+  if (e.key === 'Enter' || e.key === ' ') {
+    handleClick();
+  }
+};
+```
+
+## スタイリングガイド（Tailwind CSS）
+
+### 基本的な使い方
+
+#### Tailwind CSS の使用
+- Tailwind CSS v4 のユーティリティクラスを使用してスタイルを定義
+- CSS変数（globals.css）でデザイントークンを管理
+- shadcn/ui のコンポーネントを活用
+
+```typescript
+// ユーティリティクラスの使用
+<div className="flex items-center gap-4 rounded-lg bg-white p-6 shadow-md">
+  <h2 className="text-xl font-bold text-gray-900">Title</h2>
+</div>
+```
+
+### cva によるバリアント管理
+
+#### 基本的な使用方法
+
+```typescript
+import { cva } from "class-variance-authority";
+import { cn } from "@repo/ui/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center rounded-md font-medium transition-colors",
+  {
+    variants: {
+      variant: {
+        primary: "bg-primary text-primary-foreground hover:bg-primary/90",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        outline: "border border-input bg-transparent hover:bg-accent",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        sm: "h-8 px-3 text-sm",
+        md: "h-10 px-4 text-base",
+        lg: "h-12 px-6 text-lg",
+      },
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md",
+    },
+  }
+);
+```
+
+### クラス名の結合
+
+#### cn（className）ユーティリティの使用
+
+```typescript
+import { cn } from "@repo/ui/utils";
+
+export function Card({ className, children }: CardProps) {
+  return (
+    <div className={cn("border rounded-lg p-4", className)}>
+      {children}
+    </div>
+  );
+}
+```
+
+#### 条件付きスタイル
+
+```typescript
+import { cn } from "@repo/ui/utils";
+
+export function Button({ isActive, className }: ButtonProps) {
+  return (
+    <button
+      className={cn(
+        "px-4 py-2 rounded-md",
+        isActive ? "bg-blue-500 text-white" : "bg-gray-200 text-gray-900",
+        className
+      )}
+    >
+      Click me
+    </button>
+  );
+}
+```
+
+### レスポンシブデザイン
+
+#### ブレークポイント
+
+```typescript
+<div className="text-sm p-2 md:text-base md:p-4 lg:text-lg lg:p-6">
+  レスポンシブコンテンツ
+</div>
+```
+
+#### カスタムブレークポイント
+- sm: 640px
+- md: 768px
+- lg: 1024px
+- xl: 1280px
+- 2xl: 1440px
+
+### ダークモード対応
+
+```typescript
+<div className="bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
+  テーマ対応コンテンツ
+</div>
+```
+
+### ベストプラクティス
+
+#### 1. デザイントークンの活用
+- `globals.css` で定義されたCSS変数を使用
+- shadcn/ui のカラートークンを活用（`text-primary`, `bg-muted` 等）
+
+#### 2. shadcn/ui コンポーネントを優先
+- 既存の shadcn/ui コンポーネントを優先的に使用
+- カスタムが必要な場合のみ cva で独自バリアントを定義
+
+#### 3. スタイルの一貫性
+- プロジェクト全体で同じTailwindユーティリティパターンを使用
+- カラーパレット、スペーシングの統一
+
+## 関連ドキュメント
+
+- `docs/einja/steering/development/coding-standards.md` - コーディング規約
+- `docs/einja/steering/development/testing-strategy.md` - テスト戦略
+- `docs/einja/steering/development/frontend-development.md` - フロントエンド開発ガイド
+
+## 参考資料
+
+- [React 公式ドキュメント](https://react.dev)
+- [TypeScript 公式ドキュメント](https://www.typescriptlang.org)
+- [Tailwind CSS ドキュメント](https://tailwindcss.com)
+
+<!-- @einja:project-private:start id="component-design-project" -->
+<!-- プロジェクト固有の情報を記入 -->
+<!-- @einja:project-private:end -->

package/presets/default/docs/einja/steering/development/database-guidelines.md

@@ -231,9 +231,58 @@ model NewFeature {
 
 ---
 
-<!-- @einja:seed:start id="database-guidelines-project" -->
-## プロジェクト固有の設定
+<!-- @einja:project-private:start id="database-guidelines-project" -->
+## プロジェクト固有: Prismaスキーマ編集ルール
 
-<!-- このセクションはプロジェクト固有の内容を追記する場所です -->
-<!-- einja syncで上書きされません -->
-<!-- @einja:seed:end -->
+### model名の命名規則
+
+- モデル名は**アッパーキャメルケース**（例: `UserProfile`, `OrderItem`）
+- `@@map()` でスネークケースのテーブル名を指定する
+
+```prisma
+model UserProfile {
+  // ...
+  @@map("user_profiles")
+}
+```
+
+### カラム名の命名規則
+
+- カラム名は**キャメルケース**（例: `customerId`, `firstName`）
+- `@map()` でスネークケースのDB名を指定する
+
+```prisma
+customerId String @map("customer_id")
+```
+
+### 必須・非必須の判定
+
+- 指示されている、自明である、または他データソースによって確実に判定できる場合のみ設定する
+- **推測で決定しない**。不明な場合は必ずユーザーに確認すること
+
+### IDの採番
+
+- `id` は **cuid** で自動採番を原則とする
+
+```prisma
+id String @id @default(cuid()) @map("id")
+```
+
+### createdAt / updatedAt
+
+- 原則としてすべてのテーブルに適用する
+- `@db.Timestamptz(6)` を必ず明示する（PostgreSQL/Prisma公式推奨）
+
+```prisma
+createdAt DateTime @default(now()) @db.Timestamptz(6) @map("created_at")
+updatedAt DateTime @updatedAt      @db.Timestamptz(6) @map("updated_at")
+```
+
+### 外部キーの削除ポリシー
+
+- 外部キーを持つリレーションは、基本的に `onDelete: Cascade` の適用を検討する
+
+```prisma
+user User @relation(fields: [userId], references: [id], onDelete: Cascade)
+```
+<!-- @einja:project-private:end -->

package/presets/default/docs/einja/steering/development/frontend-development.md

@@ -1760,11 +1760,6 @@ export function PostCreateForm() {
 このガイドラインに従うことで、高速で保守性の高いモダンなWebアプリケーションを構築できます。
 <!-- @einja:managed:end -->
 
----
-
-<!-- @einja:seed:start id="frontend-development-project" -->
-## プロジェクト固有の設定
-
-<!-- このセクションはプロジェクト固有の内容を追記する場所です -->
-<!-- einja syncで上書きされません -->
-<!-- @einja:seed:end -->
+<!-- @einja:project-private:start id="frontend-development-project" -->
+<!-- プロジェクト固有の情報を記入 -->
+<!-- @einja:project-private:end -->

package/presets/default/docs/einja/steering/development/playwright-guidelines.md

@@ -0,0 +1,59 @@
+<!-- @einja:managed -->
+
+# Playwright MCP 動作確認ガイドライン
+
+## 概要
+
+Playwright MCPを使用した動作確認（スクリーンショット、ログ、スナップショット等）で生成される一時ファイルの管理ルールを定義します。
+
+## 一時ファイル保存先
+
+### 必須ルール
+
+- **保存先**: すべての一時ファイルは `tmp/playwright-mcp/` 配下に保存すること
+- **リポジトリルート直下や他ディレクトリへの一時ファイル保存は禁止**
+- ディレクトリが存在しない場合は事前に作成すること:
+  ```bash
+  mkdir -p tmp/playwright-mcp/
+  ```
+
+### `browser_take_screenshot` の使用例
+
+```
+mcp__playwright__browser_take_screenshot({ fullPage: true, path: "tmp/playwright-mcp/dashboard-check.png" })
+```
+
+**注意**: `path` パラメータには必ず `tmp/playwright-mcp/` プレフィックスを付けること。
+
+### ファイル命名規約
+
+- スクリーンショット: `tmp/playwright-mcp/{画面名}-{状態}.png`
+  - 例: `tmp/playwright-mcp/dashboard-initial.png`
+  - 例: `tmp/playwright-mcp/settings-after-update.png`
+- コンソールログ: `tmp/playwright-mcp/console-{timestamp}.log`
+- スナップショット: `tmp/playwright-mcp/{画面名}-snapshot.md`
+
+### 例外
+
+- **QAエビデンス用スクリーンショット**: `qa-tests/` 配下に保存（task-qaのルールに従う）
+- QAエビデンスはGit管理対象のため、`tmp/` ではなく `qa-tests/` に配置する
+
+## ブラウザリサイズ（必須）
+
+Playwright MCPの操作を行う前に、必ずブラウザリサイズを実行すること:
+
+```
+mcp__playwright__browser_resize({ width: 1280, height: 720 })
+```
+
+**注意**: リサイズ未実施の場合、hookによって操作がブロックされます。
+
+## Git管理
+
+- `tmp/` ディレクトリは `.gitignore` で除外済み
+- 一時ファイルはGitにコミットされない
+- QAエビデンスが必要な場合は `qa-tests/` を使用すること
+
+<!-- @einja:project-private:start id="playwright-guidelines-project" -->
+<!-- プロジェクト固有の情報を記入 -->
+<!-- @einja:project-private:end -->

package/presets/default/docs/einja/steering/development/review-guidelines.md

@@ -371,11 +371,6 @@ task-reviewerエージェントは以下の4観点を**Taskツールで並列に
 - **トレードオフの考慮**: パフォーマンス、可読性、保守性のバランスを考慮
 <!-- @einja:managed:end -->
 
----
-
-<!-- @einja:seed:start id="review-guidelines-project" -->
-## プロジェクト固有の設定
-
-<!-- このセクションはプロジェクト固有の内容を追記する場所です -->
-<!-- einja syncで上書きされません -->
-<!-- @einja:seed:end -->
+<!-- @einja:project-private:start id="review-guidelines-project" -->
+<!-- プロジェクト固有の情報を記入 -->
+<!-- @einja:project-private:end -->

package/presets/default/docs/einja/steering/development/testing-strategy.md

@@ -894,11 +894,6 @@ describe('UserUseCase', () => {
 すべてのテストは、このガイドラインに従って実装してください。
 <!-- @einja:managed:end -->
 
----
-
-<!-- @einja:seed:start id="testing-strategy-project" -->
-## プロジェクト固有の設定
-
-<!-- このセクションはプロジェクト固有の内容を追記する場所です -->
-<!-- einja syncで上書きされません -->
-<!-- @einja:seed:end -->
+<!-- @einja:project-private:start id="testing-strategy-project" -->
+<!-- プロジェクト固有の情報を記入 -->
+<!-- @einja:project-private:end -->