@einja/dev-cli 0.1.21 → 0.1.24

package/presets/default/.claude/agents/einja/frontend-architect.md

@@ -487,19 +487,19 @@ const { users, pagination } = await getUsers({
 - Redux: サーバー状態管理にはオーバースペック
 ```
 
-#### ADR-002: Panda CSSを採用
+#### ADR-002: Tailwind CSSを採用
 ```markdown
 ## 決定
-スタイリングにPanda CSSを使用
+スタイリングにTailwind CSS v4を使用
 
 ## 根拠
-- 型安全なスタイル定義
-- ゼロランタイム（ビルド時生成）
-- デザイントークンとの統合
-- Next.jsとの親和性
+- ユーティリティファーストでの高速開発
+- shadcn/uiとの完全な互換性
+- エコシステムの充実とコミュニティサポート
+- CSS変数ベースのデザイントークン管理
 
 ## 代替案
-- Tailwind CSS: 柔軟性が高いが型安全性に欠ける
+- Panda CSS: 型安全だがエコシステムが小さい（移行済み）
 - CSS Modules: スコープ化は良いがトークン管理が弱い
 ```
 
@@ -734,10 +734,10 @@ graph LR
 - ストリーミング戦略
 - メタデータ管理
 
-### Panda CSS
-- デザインシステムとの統合
-- トークン設計
-- レシピパターン
+### Tailwind CSS
+- ユーティリティファーストのスタイリング
+- shadcn/uiとの統合
+- CSS変数によるデザイントークン
 
 ## 重要な原則
 

package/presets/default/.claude/agents/einja/frontend-coder.md

@@ -1,6 +1,6 @@
 ---
 name: frontend-coder
-description: フロントエンド実装を担当する専門エージェント。Next.js、React、Panda CSS、shadcn/uiを使用したコンポーネント実装、状態管理、UI/UX実装に特化しています。<example>Context: ユーザーがログインフォームコンポーネントを実装したい場合。user: "ログインフォームコンポーネントを実装して" assistant: "frontend-coderエージェントを使用して、NextAuthと連携したログインフォームを実装します" <commentary>フロントエンド実装が必要なため、frontend-coderエージェントを起動してコンポーネントを実装します。</commentary></example> <example>Context: ダッシュボード画面のレイアウトとチャート表示を実装する場合。user: "ダッシュボード画面を作って" assistant: "frontend-coderエージェントを起動して、レスポンシブなダッシュボードレイアウトとチャートコンポーネントを実装します" <commentary>複雑なUIの実装が必要なため、frontend-coderエージェントに実装を依頼します。</commentary></example>
+description: フロントエンド実装を担当する専門エージェント。Next.js、React、Tailwind CSS、shadcn/uiを使用したコンポーネント実装、状態管理、UI/UX実装に特化しています。<example>Context: ユーザーがログインフォームコンポーネントを実装したい場合。user: "ログインフォームコンポーネントを実装して" assistant: "frontend-coderエージェントを使用して、NextAuthと連携したログインフォームを実装します" <commentary>フロントエンド実装が必要なため、frontend-coderエージェントを起動してコンポーネントを実装します。</commentary></example> <example>Context: ダッシュボード画面のレイアウトとチャート表示を実装する場合。user: "ダッシュボード画面を作って" assistant: "frontend-coderエージェントを起動して、レスポンシブなダッシュボードレイアウトとチャートコンポーネントを実装します" <commentary>複雑なUIの実装が必要なため、frontend-coderエージェントに実装を依頼します。</commentary></example>
 model: sonnet
 color: blue
 skills:
@@ -17,7 +17,7 @@ skills:
 
 ## あなたの中核的な責務
 
-設計仕様書（design.md）に基づき、Next.js App Router、React、TypeScript、Panda CSS、shadcn/uiを使用して、高品質なフロントエンド実装を行います。型安全性、アクセシビリティ、パフォーマンスを重視し、プロジェクトの規約に準拠したコードを生成します。
+設計仕様書（design.md）に基づき、Next.js App Router、React、TypeScript、Tailwind CSS、shadcn/uiを使用して、高品質なフロントエンド実装を行います。型安全性、アクセシビリティ、パフォーマンスを重視し、プロジェクトの規約に準拠したコードを生成します。
 
 ## 技術スタック
 
@@ -25,7 +25,7 @@ skills:
 - **Next.js 15** (App Router)
 - **React 19**
 - **TypeScript** (strict mode)
-- **Panda CSS** (スタイリング)
+- **Tailwind CSS v4** (スタイリング)
 - **shadcn/ui + Radix UI** (UIコンポーネント)
 - **TanStack Query (React Query)** (データフェッチ・状態管理)
 - **React Hook Form + Zod** (フォーム・バリデーション)
@@ -87,33 +87,45 @@ apps/web/src/
 4. **再利用性**: 共通コンポーネントは`components/shared`に配置
 5. **アクセシビリティ**: ARIA属性、セマンティックHTML、キーボード操作を考慮
 
-### 3. スタイリング（Panda CSS）
+### 3. スタイリング（Tailwind CSS）
 
 #### 基本的な使用方法
 ```typescript
-import { css } from "styled-system/css";
-import { button } from "styled-system/recipes";
-
-// レシピの使用
-<button className={button({ variant: "primary", size: "md" })}>
+// Tailwind CSSユーティリティクラスの使用
+<button className="inline-flex items-center justify-center rounded-md bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">
   Submit
 </button>
 
-// カスタムスタイル
-const customStyles = css({
-  padding: "1rem",
-  backgroundColor: "blue.500",
-  _hover: {
-    backgroundColor: "blue.600"
+// cva (class-variance-authority) によるバリアント管理
+import { cva } from "class-variance-authority";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center rounded-md font-medium transition-colors",
+  {
+    variants: {
+      variant: {
+        primary: "bg-blue-600 text-white hover:bg-blue-700",
+        secondary: "bg-gray-200 text-gray-900 hover:bg-gray-300",
+      },
+      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",
+    },
   }
-});
+);
 ```
 
 #### スタイリングガイドライン
-- デザイントークンを優先的に使用
-- レシピ（recipes）を活用してバリアント管理
-- 型安全なスタイル定義
-- レスポンシブデザインを考慮
+- Tailwind CSSユーティリティクラスを優先的に使用
+- shadcn/ui のコンポーネントを活用
+- cva (class-variance-authority) でバリアント管理
+- レスポンシブデザインはTailwindのブレークポイントプレフィックスを使用
 
 ### 4. 状態管理
 
@@ -393,7 +405,7 @@ import { helper } from "@/lib/...";
 3. **ディレクトリ構造の決定**: Co-locationを考慮
 4. **型定義の作成**: Props、State、API型を定義
 5. **コンポーネント実装**: 段階的に実装（UI → ロジック → 統合）
-6. **スタイリング**: Panda CSSで実装
+6. **スタイリング**: Tailwind CSSで実装
 7. **テスト作成**: 単体テスト、統合テストを実装
 8. **レビュー**: 品質チェックリストで確認
 

package/presets/default/.claude/agents/einja/specs/spec-tasks-generator.md

@@ -416,6 +416,45 @@ scenarios.mdの「実施タイミング」を確認し、該当タスクグル
 
 GitHub Issue作成前に以下を確認：
 
+## 🔴🔴🔴 絶対禁止：横切り分割
+
+### ❌ NG例（Issue #80パターン - 絶対に生成してはいけない）
+
+```
+Phase 1: 基盤構築と収入管理機能
+├── 1.1 データモデル設計と基盤構築
+├── 1.2 ドメイン層実装                 ← 横切り ❌
+├── 1.3 インフラストラクチャ層実装     ← 横切り ❌
+├── 1.4 アプリケーション層実装         ← 横切り ❌
+├── 1.5 収入API実装                   ← 横切り ❌
+└── 1.6 フロントエンド実装 - 収入管理  ← 横切り ❌
+```
+
+**問題点**: アーキテクチャレイヤーごとに分割されており、1つの機能を完成させるために複数のタスクグループを順番に完了する必要がある。
+
+### ✅ OK例（縦切り - 推奨構成）
+
+```
+Phase 1: 収入管理機能
+├── 1.1 DB基盤構築
+├── 1.2 収入登録機能（Domain〜UIフルスタック）
+├── 1.3 収入編集・削除機能（Domain〜UIフルスタック）
+└── 1.4 収入一覧・KPI表示機能
+```
+
+**特徴**: 各タスクグループ完了時点で、その機能のACが検証可能。
+
+### 横切り分割検出ルール
+
+spec-tasks-validatorは以下の場合に横切り分割としてエラーを出します：
+- Phase内のタスクグループ名に**3つ以上**のアーキテクチャレイヤー名が含まれる
+- レイヤー名: Domain, Infrastructure, Application, Presentation, UI
+
+**例外**（検出されない）:
+- 「API連携機能」「外部API統合」（外部連携の意味）
+- 「ドメイン知識」「ドメインモデリング」（技術レイヤーではない）
+- 「収入登録機能（Domain〜UI）」（フルスタック示唆）
+
 ### 🔴 ATDD粒度チェック（最重要 - 最初に確認）
 - [ ] **Phase数: 2-3個以内か？**（4個以上は❌ → 統合が必要）
 - [ ] **タスクグループ: 「縦切り」（フルスタック）になっているか？**

package/presets/default/.claude/commands/einja/task-exec.md

@@ -36,8 +36,8 @@ $ARGUMENTSから以下を解析：
 
 | Phase番号 | 判定 | 処理フロー |
 |-----------|------|-----------|
-| 1〜98 | 通常タスク | task-executer → task-reviewer → task-qa → task-committer |
-| 99 | ドキュメント反映タスク | docs-updater → task-committer |
+| 1〜98 | 通常タスク | task-executer → task-reviewer → task-qa → einja-task-commit Skill |
+| 99 | ドキュメント反映タスク | docs-updater → einja-task-commit Skill |
 
 ### 通常タスクのフロー（Phase 1〜98）
 
@@ -52,7 +52,7 @@ $ARGUMENTSから以下を解析：
 │                                                         │
 │  QA合格後 ↓                                             │
 │  ┌─────────────────────────────────────────────┐       │
-│  │ task-committer（コミット・プッシュ）          │       │
+│  │ einja-task-commit Skill（コミット・プッシュ） │       │
 │  │ ※ 確認なしで自動実行                         │       │
 │  └─────────────────────────────────────────────┘       │
 │                                                         │
@@ -84,7 +84,7 @@ $ARGUMENTSから以下を解析：
 │       │                                                 │
 │       ↓ 反映完了                                        │
 │  ┌─────────────────────────────────────────────┐       │
-│  │ task-committer（コミット・プッシュ）          │       │
+│  │ einja-task-commit Skill（コミット・プッシュ） │       │
 │  │ ※ 確認なしで自動実行                         │       │
 │  └─────────────────────────────────────────────┘       │
 │                                                         │
@@ -115,8 +115,8 @@ $ARGUMENTSから以下を解析：
 - テスト失敗 → 実装フェーズに戻る
 - 全テスト合格 → コミット・プッシュフェーズへ
 
-### 4. コミット・プッシュフェーズ（task-committer）
-- QA合格後、自動的にコミット・プッシュを実行
+### 4. コミット・プッシュフェーズ（einja-task-commit Skill）
+- QA合格後、Skill toolで `einja-task-commit` Skillを直接呼び出し
 - 変更がある場合のみ実行（変更なしの場合はスキップ）
 - コミット分割案の確認はスキップ（QA合格済みのため自動適用）
 - 品質チェック（lint/typecheck/test/build）はQAで実行済みのためスキップ
@@ -138,7 +138,7 @@ $ARGUMENTSから以下を解析：
      - 対象タスクspecのパス（全Phaseで完了したタスクspec）
 
 3. **コミット・プッシュ**
-   - docs-updater 完了後、task-committer を呼び出し
+   - docs-updater 完了後、Skill toolで `einja-task-commit` Skillを呼び出し
    - ドキュメント変更をコミット・プッシュ
 
 4. **終了**

package/presets/default/.claude/hooks/einja/biome-format.sh

@@ -18,10 +18,10 @@ if [[ "$file_path" =~ \.(ts|tsx|js|jsx|json)$ ]]; then
   cd "$CLAUDE_PROJECT_DIR" 2>/dev/null || exit 0
 
   # biome check（format + lint）を実行、自動修正可能なものは修正
-  npx biome check --write "$file_path" 2>/dev/null || true
+  pnpm exec biome check --write "$file_path" 2>/dev/null || true
 
   # 修正後に残っているlintエラーをチェック（any型など自動修正できないもの）
-  lint_errors=$(npx biome lint "$file_path" 2>&1 | grep -E "lint/|noExplicitAny|error" | head -20)
+  lint_errors=$(pnpm exec biome lint "$file_path" 2>&1 | grep -E "lint/|noExplicitAny|error" | head -20)
 
   if [ -n "$lint_errors" ]; then
     echo "" >&2

package/presets/default/.claude/skills/einja-coding-standards/SKILL.md

@@ -64,30 +64,41 @@ import './styles.css';
 import { localUtil } from '../utils';
 ```
 
-### スタイリング（Panda CSS）
+### スタイリング（Tailwind CSS）
 
 ```typescript
-// ✅ Panda CSS レシピの使用
-import { button } from 'styled-system/recipes';
-
-export function Button({ variant, size, children }: ButtonProps) {
+// ✅ Tailwind CSSユーティリティクラスの使用
+export function Card({ children }: CardProps) {
   return (
-    <button className={button({ variant, size })}>
+    <div className="rounded-lg bg-white p-6 shadow-md hover:shadow-lg transition-shadow">
       {children}
-    </button>
+    </div>
   );
 }
 
-// ✅ css関数の使用
-import { css } from 'styled-system/css';
-
-const customStyles = css({
-  padding: '1rem',
-  backgroundColor: 'blue.500',
-  _hover: {
-    backgroundColor: 'blue.600'
+// ✅ cva によるバリアント管理
+import { cva } from "class-variance-authority";
+
+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",
+      },
+      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",
+    },
   }
-});
+);
 ```
 
 ## ツール設定

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

@@ -34,7 +34,7 @@ description: "Reactコンポーネントの設計原則と実装ガイドライ
 
 - [ディレクトリ構造](./reference/directory-structure.md) - ファイル配置とディレクトリ設計
 - [Props設計パターン](./reference/props-patterns.md) - Props設計とイベントハンドリング
-- [スタイリングガイド](./reference/styling-guide.md) - Panda CSSを使用したスタイリング規約
+- [スタイリングガイド](./reference/styling-guide.md) - Tailwind CSSを使用したスタイリング規約
 
 ## クイックリファレンス
 
@@ -70,7 +70,7 @@ src/
 ```
 ComponentName/
 ├── index.tsx           # コンポーネント本体
-└── styles.ts          # Panda CSS スタイル定義（必要に応じて）
+└── variants.ts        # cvaバリアント定義（必要に応じて）
 ```
 
 ### 基本的な型定義
@@ -91,7 +91,7 @@ interface ButtonProps {
 
 - [ ] 適切なディレクトリに配置されている
 - [ ] TypeScript の型定義が完全
-- [ ] Panda CSS でスタイリングされている
+- [ ] Tailwind CSS でスタイリングされている
 - [ ] プロパティのデフォルト値が設定されている
 - [ ] アクセシビリティが考慮されている
 - [ ] 単体テストが実装されている
@@ -106,4 +106,4 @@ interface ButtonProps {
 
 - [React 公式ドキュメント](https://react.dev)
 - [TypeScript 公式ドキュメント](https://www.typescriptlang.org)
-- [Panda CSS ドキュメント](https://panda-css.com)
+- [Tailwind CSS ドキュメント](https://tailwindcss.com)

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

@@ -1,112 +1,49 @@
-# スタイリングガイド（Panda CSS）
+# スタイリングガイド（Tailwind CSS）
 
 ## 基本的な使い方
 
-### Panda CSS の使用
-- Panda CSS を使用してスタイルを定義
-- デザイントークンとレシピを活用
-- 型安全なスタイル定義
+### Tailwind CSS の使用
+- Tailwind CSS v4 のユーティリティクラスを使用してスタイルを定義
+- CSS変数（globals.css）でデザイントークンを管理
+- shadcn/ui のコンポーネントを活用
 
 ```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>
-  );
-}
+// ユーティリティクラスの使用
+<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>
 ```
 
-## css関数の使用
+## cva によるバリアント管理
 
-### インラインスタイル
+### 基本的な使用方法
 
 ```typescript
-import { css } from 'styled-system/css';
-
-const customStyles = css({
-  padding: '1rem',
-  backgroundColor: 'blue.500',
-  _hover: {
-    backgroundColor: 'blue.600'
+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",
+    },
   }
-});
-```
-
-### 複雑なスタイル定義
-
-```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>
-  );
-}
+);
 ```
 
 ## クラス名の結合
@@ -114,11 +51,11 @@ export function Layout({ children }) {
 ### cn（className）ユーティリティの使用
 
 ```typescript
-import { cn } from '@/lib/utils';
+import { cn } from "@repo/ui/utils";
 
 export function Card({ className, children }: CardProps) {
   return (
-    <div className={cn('border rounded-lg p-4', className)}>
+    <div className={cn("border rounded-lg p-4", className)}>
       {children}
     </div>
   );
@@ -128,15 +65,14 @@ export function Card({ className, children }: CardProps) {
 ### 条件付きスタイル
 
 ```typescript
-import { css } from 'styled-system/css';
-import { cn } from '@/lib/utils';
+import { cn } from "@repo/ui/utils";
 
-export function Button({ isActive, className }) {
+export function Button({ isActive, className }: ButtonProps) {
   return (
     <button
       className={cn(
-        css({ padding: '2', borderRadius: 'md' }),
-        isActive && css({ backgroundColor: 'blue.500', color: 'white' }),
+        "px-4 py-2 rounded-md",
+        isActive ? "bg-blue-500 text-white" : "bg-gray-200 text-gray-900",
         className
       )}
     >
@@ -151,18 +87,9 @@ export function Button({ isActive, className }) {
 ### ブレークポイント
 
 ```typescript
-const responsiveStyles = css({
-  fontSize: 'sm',
-  padding: '2',
-  md: {
-    fontSize: 'base',
-    padding: '4',
-  },
-  lg: {
-    fontSize: 'lg',
-    padding: '6',
-  },
-});
+<div className="text-sm p-2 md:text-base md:p-4 lg:text-lg lg:p-6">
+  レスポンシブコンテンツ
+</div>
 ```
 
 ### カスタムブレークポイント
@@ -175,26 +102,21 @@ const responsiveStyles = css({
 ## ダークモード対応
 
 ```typescript
-const themedStyles = css({
-  backgroundColor: 'white',
-  color: 'gray.900',
-  _dark: {
-    backgroundColor: 'gray.900',
-    color: 'gray.100',
-  },
-});
+<div className="bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
+  テーマ対応コンテンツ
+</div>
 ```
 
 ## ベストプラクティス
 
 ### 1. デザイントークンの活用
-- 直接の数値ではなくトークンを使用
-- `padding: 4` は `padding: 1rem` に相当
+- `globals.css` で定義されたCSS変数を使用
+- shadcn/ui のカラートークンを活用（`text-primary`, `bg-muted` 等）
 
-### 2. レシピを優先
-- 再利用可能なスタイルはレシピとして定義
-- コンポーネント固有のスタイルのみcss()を使用
+### 2. shadcn/ui コンポーネントを優先
+- 既存の shadcn/ui コンポーネントを優先的に使用
+- カスタムが必要な場合のみ cva で独自バリアントを定義
 
 ### 3. スタイルの一貫性
-- プロジェクト全体で同じトークンを使用
+- プロジェクト全体で同じTailwindユーティリティパターンを使用
 - カラーパレット、スペーシングの統一

package/presets/default/preset.yaml

@@ -108,3 +108,30 @@ additionalAgents:
 additionalCommands:
   - frontend-implement
   - start-dev
+
+# 依存関係チェック（init/sync時に自動チェック+インストール）
+requirements:
+  # hooksが動作するために必要なnpmパッケージ
+  devDependencies:
+    "@biomejs/biome": "^1.9.4"
+    "typescript": "^5"
+
+  # 不足時に追加するnpm scripts（キーが存在しない場合のみ追加）
+  scripts:
+    lint: "biome check ."
+    "lint:fix": "biome check --write ."
+    format: "biome format ."
+    "format:fix": "biome format --write ."
+    typecheck: "tsc --noEmit"
+    prepush: "{pm} run lint && {pm} run typecheck"
+    "task:loop": "npx @einja/dev-cli task:loop"
+    "einja:sync": "npx @einja/dev-cli sync"
+
+  # システムコマンド（警告表示のみ、自動インストールしない）
+  systemCommands:
+    - command: jq
+      description: "JSON processor（全hooksで使用）"
+      install:
+        darwin: "brew install jq"
+        linux: "sudo apt-get install jq"
+        win32: "choco install jq"

package/scaffolds/cli/preset.yaml

@@ -108,3 +108,30 @@ additionalAgents:
 additionalCommands:
   - frontend-implement
   - start-dev
+
+# 依存関係チェック（init/sync時に自動チェック+インストール）
+requirements:
+  # hooksが動作するために必要なnpmパッケージ
+  devDependencies:
+    "@biomejs/biome": "^1.9.4"
+    "typescript": "^5"
+
+  # 不足時に追加するnpm scripts（キーが存在しない場合のみ追加）
+  scripts:
+    lint: "biome check ."
+    "lint:fix": "biome check --write ."
+    format: "biome format ."
+    "format:fix": "biome format --write ."
+    typecheck: "tsc --noEmit"
+    prepush: "{pm} run lint && {pm} run typecheck"
+    "task:loop": "npx @einja/dev-cli task:loop"
+    "einja:sync": "npx @einja/dev-cli sync"
+
+  # システムコマンド（警告表示のみ、自動インストールしない）
+  systemCommands:
+    - command: jq
+      description: "JSON processor（全hooksで使用）"
+      install:
+        darwin: "brew install jq"
+        linux: "sudo apt-get install jq"
+        win32: "choco install jq"