@einja/dev-cli 0.1.40 → 0.1.44

package/presets/default/.claude/skills/einja-coding-standards/references/typescript-rules.md

@@ -1,247 +0,0 @@
-# TypeScript 規約
-
-## 型安全性
-
-### ❌ any型の使用禁止
-
-```typescript
-// ❌ 禁止
-function processData(data: any) {
-  return data.someProperty;
-}
-
-const user: any = getUser();
-
-// ✅ 推奨
-interface User {
-  id: string;
-  name: string;
-  email: string;
-}
-
-function processData(data: User) {
-  return data.name;
-}
-
-const user: User = getUser();
-```
-
-**any型が絶対に禁止される理由:**
-- TypeScriptの型チェック機能を無効化
-- ランタイムエラーの原因となる
-- IDEの自動補完・リファクタリング機能が働かない
-- コードの可読性・保守性が著しく低下
-
-### 型定義のベストプラクティス
-
-```typescript
-// ✅ 明確な型定義
-interface ApiResponse<T> {
-  data: T;
-  status: 'success' | 'error';
-  message?: string;
-}
-
-// ✅ Union型の活用
-type ButtonVariant = 'primary' | 'secondary' | 'danger';
-
-// ✅ Generic型の活用
-function createApiCall<T>(endpoint: string): Promise<ApiResponse<T>> {
-  // 実装
-}
-
-// ✅ 型ガードの使用
-function isUser(obj: unknown): obj is User {
-  return (
-    typeof obj === 'object' &&
-    obj !== null &&
-    typeof (obj as User).id === 'string'
-  );
-}
-```
-
-### unknown型の活用
-
-```typescript
-// ✅ anyの代わりにunknownを使用
-function parseJson(json: string): unknown {
-  return JSON.parse(json);
-}
-
-// ✅ 型ガードと組み合わせて安全に使用
-const data = parseJson(jsonString);
-if (isUser(data)) {
-  console.log(data.name); // 型安全
-}
-```
-
-## 厳格な型チェック設定
-
-`tsconfig.json`で以下の設定を必須とする：
-
-```json
-{
-  "compilerOptions": {
-    "strict": true,
-    "noImplicitAny": true,
-    "noImplicitReturns": true,
-    "noImplicitThis": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true
-  }
-}
-```
-
-## React / Next.js での型安全性
-
-### Props型定義
-
-```typescript
-// ✅ 明確なProps型定義（any型禁止）
-interface ComponentProps {
-  data: UserData; // 具体的な型を指定
-  onAction: (id: string) => void; // 関数型も明確に
-}
-
-// ❌ any型の使用禁止
-interface BadProps {
-  data: any; // 絶対禁止
-  callback: any; // 絶対禁止
-}
-```
-
-## コード構造・パターン
-
-### エクスポート規約
-
-```typescript
-// ✅ 名前付きエクスポート（推奨）
-export function Button() { }
-export { Button };
-
-// ✅ デフォルトエクスポート（Pageコンポーネントのみ）
-export default function HomePage() { }
-
-// ❌ 混在は避ける
-export function Button() { }
-export default Button; // 避ける
-```
-
-### 条件分岐
-
-#### 早期リターン
-
-```typescript
-// ✅ 早期リターンパターン
-function processUser(user: User | null): string {
-  if (!user) {
-    return 'User not found';
-  }
-
-  if (!user.isActive) {
-    return 'User is inactive';
-  }
-
-  return `Welcome, ${user.name}!`;
-}
-
-// ❌ ネストの深い条件分岐
-function processUser(user: User | null): string {
-  if (user) {
-    if (user.isActive) {
-      return `Welcome, ${user.name}!`;
-    } else {
-      return 'User is inactive';
-    }
-  } else {
-    return 'User not found';
-  }
-}
-```
-
-#### Optional Chaining の活用
-
-```typescript
-// ✅ Optional Chaining
-const userName = user?.profile?.name ?? 'Anonymous';
-const hasAdminRole = user?.roles?.includes('admin') ?? false;
-
-// ✅ Nullish Coalescing
-const config = userConfig ?? defaultConfig;
-const port = process.env.PORT ?? 3000;
-```
-
-## エラーハンドリング
-
-### エラー型の定義
-
-```typescript
-// ✅ カスタムエラークラス
-class ApiError extends Error {
-  constructor(
-    message: string,
-    public statusCode: number,
-    public code: string
-  ) {
-    super(message);
-    this.name = 'ApiError';
-  }
-}
-
-// ✅ Result型パターン
-type Result<T, E = Error> =
-  | { success: true; data: T }
-  | { success: false; error: E };
-
-function safeApiCall<T>(fn: () => Promise<T>): Promise<Result<T>> {
-  return fn()
-    .then(data => ({ success: true as const, data }))
-    .catch(error => ({ success: false as const, error }));
-}
-```
-
-### エラーハンドリングパターン
-
-```typescript
-// ✅ try-catch の適切な使用
-async function fetchUser(id: string): Promise<User | null> {
-  try {
-    const response = await api.get(`/users/${id}`);
-    return response.data;
-  } catch (error) {
-    if (error instanceof ApiError && error.statusCode === 404) {
-      return null;
-    }
-    throw error; // 予期しないエラーは再スロー
-  }
-}
-
-// ✅ Error Boundary での エラーキャッチ
-export function ErrorBoundary({ children }: { children: React.ReactNode }) {
-  return (
-    <ErrorBoundaryComponent
-      fallback={<ErrorFallback />}
-      onError={(error, errorInfo) => {
-        console.error('Error caught by boundary:', error, errorInfo);
-      }}
-    >
-      {children}
-    </ErrorBoundaryComponent>
-  );
-}
-```
-
-## テストでの型安全性
-
-```typescript
-// ✅ テストでもany型禁止
-interface MockUser {
-  id: string;
-  name: string;
-}
-
-const mockUser: MockUser = { id: '1', name: 'Test User' };
-
-// ❌ テストでもany型は使用禁止
-const badMockData: any = { /* データ */ }; // 禁止
-```

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

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

package/presets/default/.claude/skills/einja-component-design/references/directory-structure.md

@@ -1,117 +0,0 @@
-# ディレクトリ構造
-
-## プロジェクト全体のコンポーネント配置
-
-```
-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/default/.claude/skills/einja-component-design/references/props-patterns.md

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