@einja/dev-cli 0.1.6

package/presets/minimal/.claude/skills/einja/component-design/SKILL.md

@@ -0,0 +1,109 @@
+# Component Design Skill
+
+name: "component-design"
+description: "Reactコンポーネントの設計原則と実装ガイドライン"
+invocation: "agent-requested"
+version: "1.0.0"
+
+## 概要
+
+このSkillは、プロジェクトにおけるReactコンポーネントの設計原則と実装ガイドラインを提供します。
+
+## 基本原則
+
+### 1. 単一責任の原則
+- 各コンポーネントは単一の機能・責任を持つ
+- 複数の機能が必要な場合は、複数のコンポーネントに分割する
+
+### 2. 再利用可能性
+- プロジェクト全体で再利用可能なコンポーネントを作成する
+- プロパティ（props）による柔軟なカスタマイズを可能にする
+
+### 3. 型安全性
+- TypeScriptの型定義を必須とする
+- プロパティ、状態、イベントハンドラーは全て型定義する
+
+### 4. Co-location（共存配置）
+- 機能固有のコンポーネントは関連するページの近くに配置する
+- `_components` ディレクトリを使用してページ固有のコンポーネントを管理する
+- 複数のページで共有されるコンポーネントのみ `src/components/` に配置する
+
+## 詳細ドキュメント
+
+各カテゴリの詳細な規約は以下を参照してください：
+
+- [ディレクトリ構造](./reference/directory-structure.md) - ファイル配置とディレクトリ設計
+- [Props設計パターン](./reference/props-patterns.md) - Props設計とイベントハンドリング
+- [スタイリングガイド](./reference/styling-guide.md) - Panda CSSを使用したスタイリング規約
+
+## クイックリファレンス
+
+### ディレクトリ構造
+
+```
+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           # コンポーネント本体
+└── styles.ts          # Panda CSS スタイル定義（必要に応じて）
+```
+
+### 基本的な型定義
+
+```typescript
+interface ButtonProps {
+  children: React.ReactNode;
+  variant?: "primary" | "secondary" | "danger";
+  size?: "sm" | "md" | "lg";
+  disabled?: boolean;
+  onClick?: () => void;
+}
+```
+
+## チェックリスト
+
+新しいコンポーネントを作成する際の確認事項：
+
+- [ ] 適切なディレクトリに配置されている
+- [ ] TypeScript の型定義が完全
+- [ ] Panda CSS でスタイリングされている
+- [ ] プロパティのデフォルト値が設定されている
+- [ ] アクセシビリティが考慮されている
+- [ ] 単体テストが実装されている
+
+## 関連Skill・ドキュメント
+
+- [coding-standards](../coding-standards/SKILL.md) - コーディング規約
+- `docs/einja/steering/development/testing-strategy.md` - テスト戦略
+- `docs/einja/steering/development/frontend-development.md` - フロントエンド開発ガイド
+
+## 参考資料
+
+- [React 公式ドキュメント](https://react.dev)
+- [TypeScript 公式ドキュメント](https://www.typescriptlang.org)
+- [Panda CSS ドキュメント](https://panda-css.com)

package/presets/minimal/.claude/skills/einja/component-design/reference/directory-structure.md

@@ -0,0 +1,117 @@
+# ディレクトリ構造
+
+## プロジェクト全体のコンポーネント配置
+
+```
+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のルーティングから除外される
+- ページ固有のコンポーネントを整理する場所
+- 他のページでは使用しないコンポーネントを格納

package/presets/minimal/.claude/skills/einja/component-design/reference/props-patterns.md

@@ -0,0 +1,159 @@
+# 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();
+  }
+};
+```

package/presets/minimal/.claude/skills/einja/component-design/reference/styling-guide.md

@@ -0,0 +1,200 @@
+# スタイリングガイド（Panda CSS）
+
+## 基本的な使い方
+
+### Panda CSS の使用
+- Panda CSS を使用してスタイルを定義
+- デザイントークンとレシピを活用
+- 型安全なスタイル定義
+
+```typescript
+import { css } from "styled-system/css";
+import { button } from "styled-system/recipes";
+
+const buttonStyles = button({
+  variant: "primary",
+  size: "md",
+});
+```
+
+## レシピの使用
+
+### 基本的なレシピ
+
+```typescript
+// ✅ Panda CSS レシピの使用
+import { button } from 'styled-system/recipes';
+
+export function Button({ variant, size, children }: ButtonProps) {
+  return (
+    <button className={button({ variant, size })}>
+      {children}
+    </button>
+  );
+}
+```
+
+## css関数の使用
+
+### インラインスタイル
+
+```typescript
+import { css } from 'styled-system/css';
+
+const customStyles = css({
+  padding: '1rem',
+  backgroundColor: 'blue.500',
+  _hover: {
+    backgroundColor: 'blue.600'
+  }
+});
+```
+
+### 複雑なスタイル定義
+
+```typescript
+const cardStyles = css({
+  display: 'flex',
+  flexDirection: 'column',
+  padding: '4',
+  borderRadius: 'lg',
+  boxShadow: 'md',
+  backgroundColor: 'white',
+  _dark: {
+    backgroundColor: 'gray.800',
+  },
+  '& > h2': {
+    fontSize: 'xl',
+    fontWeight: 'bold',
+    marginBottom: '2',
+  },
+});
+```
+
+## スタイルの分離
+
+### 別ファイルへの分離
+
+```typescript
+// styles.ts
+import { css } from 'styled-system/css';
+
+export const containerStyles = css({
+  maxWidth: 'container.lg',
+  marginX: 'auto',
+  paddingX: '4',
+});
+
+export const headerStyles = css({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  height: '16',
+});
+```
+
+```typescript
+// Component.tsx
+import { containerStyles, headerStyles } from './styles';
+
+export function Layout({ children }) {
+  return (
+    <div className={containerStyles}>
+      <header className={headerStyles}>
+        {/* ... */}
+      </header>
+      {children}
+    </div>
+  );
+}
+```
+
+## クラス名の結合
+
+### cn（className）ユーティリティの使用
+
+```typescript
+import { cn } from '@/lib/utils';
+
+export function Card({ className, children }: CardProps) {
+  return (
+    <div className={cn('border rounded-lg p-4', className)}>
+      {children}
+    </div>
+  );
+}
+```
+
+### 条件付きスタイル
+
+```typescript
+import { css } from 'styled-system/css';
+import { cn } from '@/lib/utils';
+
+export function Button({ isActive, className }) {
+  return (
+    <button
+      className={cn(
+        css({ padding: '2', borderRadius: 'md' }),
+        isActive && css({ backgroundColor: 'blue.500', color: 'white' }),
+        className
+      )}
+    >
+      Click me
+    </button>
+  );
+}
+```
+
+## レスポンシブデザイン
+
+### ブレークポイント
+
+```typescript
+const responsiveStyles = css({
+  fontSize: 'sm',
+  padding: '2',
+  md: {
+    fontSize: 'base',
+    padding: '4',
+  },
+  lg: {
+    fontSize: 'lg',
+    padding: '6',
+  },
+});
+```
+
+### カスタムブレークポイント
+- sm: 640px
+- md: 768px
+- lg: 1024px
+- xl: 1280px
+- 2xl: 1440px
+
+## ダークモード対応
+
+```typescript
+const themedStyles = css({
+  backgroundColor: 'white',
+  color: 'gray.900',
+  _dark: {
+    backgroundColor: 'gray.900',
+    color: 'gray.100',
+  },
+});
+```
+
+## ベストプラクティス
+
+### 1. デザイントークンの活用
+- 直接の数値ではなくトークンを使用
+- `padding: 4` は `padding: 1rem` に相当
+
+### 2. レシピを優先
+- 再利用可能なスタイルはレシピとして定義
+- コンポーネント固有のスタイルのみcss()を使用
+
+### 3. スタイルの一貫性
+- プロジェクト全体で同じトークンを使用
+- カラーパレット、スペーシングの統一