@einja/dev-cli 0.1.23 → 0.1.25
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +54 -30
- package/dist/cli.js +3 -0
- package/dist/cli.js.map +1 -1
- package/dist/commands/init.d.ts.map +1 -1
- package/dist/commands/init.js +10 -46
- package/dist/commands/init.js.map +1 -1
- package/dist/commands/sync.d.ts.map +1 -1
- package/dist/commands/sync.js +21 -0
- package/dist/commands/sync.js.map +1 -1
- package/dist/lib/dependency-checker.d.ts +31 -0
- package/dist/lib/dependency-checker.d.ts.map +1 -0
- package/dist/lib/dependency-checker.js +259 -0
- package/dist/lib/dependency-checker.js.map +1 -0
- package/dist/lib/package-manager.d.ts +15 -0
- package/dist/lib/package-manager.d.ts.map +1 -0
- package/dist/lib/package-manager.js +71 -0
- package/dist/lib/package-manager.js.map +1 -0
- package/dist/types/index.d.ts +20 -0
- package/dist/types/index.d.ts.map +1 -1
- package/package.json +1 -1
- package/presets/default/.claude/agents/einja/design-engineer.md +252 -434
- package/presets/default/.claude/agents/einja/frontend-architect.md +11 -11
- package/presets/default/.claude/agents/einja/frontend-coder.md +33 -21
- package/presets/default/.claude/skills/einja-coding-standards/SKILL.md +27 -16
- package/presets/default/.claude/skills/einja-component-design/SKILL.md +4 -4
- package/presets/default/.claude/skills/einja-component-design/reference/styling-guide.md +53 -131
- package/presets/default/preset.yaml +27 -0
- package/scaffolds/cli/preset.yaml +27 -0
- package/scaffolds/instructions/deployment-setup.md +40 -41
- package/scaffolds/steering/infrastructure/deployment.md +459 -66
|
@@ -487,19 +487,19 @@ const { users, pagination } = await getUsers({
|
|
|
487
487
|
- Redux: サーバー状態管理にはオーバースペック
|
|
488
488
|
```
|
|
489
489
|
|
|
490
|
-
#### ADR-002:
|
|
490
|
+
#### ADR-002: Tailwind CSSを採用
|
|
491
491
|
```markdown
|
|
492
492
|
## 決定
|
|
493
|
-
スタイリングに
|
|
493
|
+
スタイリングにTailwind CSS v4を使用
|
|
494
494
|
|
|
495
495
|
## 根拠
|
|
496
|
-
-
|
|
497
|
-
-
|
|
498
|
-
-
|
|
499
|
-
-
|
|
496
|
+
- ユーティリティファーストでの高速開発
|
|
497
|
+
- shadcn/uiとの完全な互換性
|
|
498
|
+
- エコシステムの充実とコミュニティサポート
|
|
499
|
+
- CSS変数ベースのデザイントークン管理
|
|
500
500
|
|
|
501
501
|
## 代替案
|
|
502
|
-
-
|
|
502
|
+
- Panda CSS: 型安全だがエコシステムが小さい(移行済み)
|
|
503
503
|
- CSS Modules: スコープ化は良いがトークン管理が弱い
|
|
504
504
|
```
|
|
505
505
|
|
|
@@ -734,10 +734,10 @@ graph LR
|
|
|
734
734
|
- ストリーミング戦略
|
|
735
735
|
- メタデータ管理
|
|
736
736
|
|
|
737
|
-
###
|
|
738
|
-
-
|
|
739
|
-
-
|
|
740
|
-
-
|
|
737
|
+
### Tailwind CSS
|
|
738
|
+
- ユーティリティファーストのスタイリング
|
|
739
|
+
- shadcn/uiとの統合
|
|
740
|
+
- CSS変数によるデザイントークン
|
|
741
741
|
|
|
742
742
|
## 重要な原則
|
|
743
743
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: frontend-coder
|
|
3
|
-
description: フロントエンド実装を担当する専門エージェント。Next.js、React、
|
|
3
|
+
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>
|
|
4
4
|
model: sonnet
|
|
5
5
|
color: blue
|
|
6
6
|
skills:
|
|
@@ -17,7 +17,7 @@ skills:
|
|
|
17
17
|
|
|
18
18
|
## あなたの中核的な責務
|
|
19
19
|
|
|
20
|
-
設計仕様書(design.md)に基づき、Next.js App Router、React、TypeScript、
|
|
20
|
+
設計仕様書(design.md)に基づき、Next.js App Router、React、TypeScript、Tailwind CSS、shadcn/uiを使用して、高品質なフロントエンド実装を行います。型安全性、アクセシビリティ、パフォーマンスを重視し、プロジェクトの規約に準拠したコードを生成します。
|
|
21
21
|
|
|
22
22
|
## 技術スタック
|
|
23
23
|
|
|
@@ -25,7 +25,7 @@ skills:
|
|
|
25
25
|
- **Next.js 15** (App Router)
|
|
26
26
|
- **React 19**
|
|
27
27
|
- **TypeScript** (strict mode)
|
|
28
|
-
- **
|
|
28
|
+
- **Tailwind CSS v4** (スタイリング)
|
|
29
29
|
- **shadcn/ui + Radix UI** (UIコンポーネント)
|
|
30
30
|
- **TanStack Query (React Query)** (データフェッチ・状態管理)
|
|
31
31
|
- **React Hook Form + Zod** (フォーム・バリデーション)
|
|
@@ -87,33 +87,45 @@ apps/web/src/
|
|
|
87
87
|
4. **再利用性**: 共通コンポーネントは`components/shared`に配置
|
|
88
88
|
5. **アクセシビリティ**: ARIA属性、セマンティックHTML、キーボード操作を考慮
|
|
89
89
|
|
|
90
|
-
### 3. スタイリング(
|
|
90
|
+
### 3. スタイリング(Tailwind CSS)
|
|
91
91
|
|
|
92
92
|
#### 基本的な使用方法
|
|
93
93
|
```typescript
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
// レシピの使用
|
|
98
|
-
<button className={button({ variant: "primary", size: "md" })}>
|
|
94
|
+
// Tailwind CSSユーティリティクラスの使用
|
|
95
|
+
<button className="inline-flex items-center justify-center rounded-md bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">
|
|
99
96
|
Submit
|
|
100
97
|
</button>
|
|
101
98
|
|
|
102
|
-
//
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
99
|
+
// cva (class-variance-authority) によるバリアント管理
|
|
100
|
+
import { cva } from "class-variance-authority";
|
|
101
|
+
|
|
102
|
+
const buttonVariants = cva(
|
|
103
|
+
"inline-flex items-center justify-center rounded-md font-medium transition-colors",
|
|
104
|
+
{
|
|
105
|
+
variants: {
|
|
106
|
+
variant: {
|
|
107
|
+
primary: "bg-blue-600 text-white hover:bg-blue-700",
|
|
108
|
+
secondary: "bg-gray-200 text-gray-900 hover:bg-gray-300",
|
|
109
|
+
},
|
|
110
|
+
size: {
|
|
111
|
+
sm: "h-8 px-3 text-sm",
|
|
112
|
+
md: "h-10 px-4 text-base",
|
|
113
|
+
lg: "h-12 px-6 text-lg",
|
|
114
|
+
},
|
|
115
|
+
},
|
|
116
|
+
defaultVariants: {
|
|
117
|
+
variant: "primary",
|
|
118
|
+
size: "md",
|
|
119
|
+
},
|
|
108
120
|
}
|
|
109
|
-
|
|
121
|
+
);
|
|
110
122
|
```
|
|
111
123
|
|
|
112
124
|
#### スタイリングガイドライン
|
|
113
|
-
-
|
|
114
|
-
-
|
|
115
|
-
-
|
|
116
|
-
-
|
|
125
|
+
- Tailwind CSSユーティリティクラスを優先的に使用
|
|
126
|
+
- shadcn/ui のコンポーネントを活用
|
|
127
|
+
- cva (class-variance-authority) でバリアント管理
|
|
128
|
+
- レスポンシブデザインはTailwindのブレークポイントプレフィックスを使用
|
|
117
129
|
|
|
118
130
|
### 4. 状態管理
|
|
119
131
|
|
|
@@ -393,7 +405,7 @@ import { helper } from "@/lib/...";
|
|
|
393
405
|
3. **ディレクトリ構造の決定**: Co-locationを考慮
|
|
394
406
|
4. **型定義の作成**: Props、State、API型を定義
|
|
395
407
|
5. **コンポーネント実装**: 段階的に実装(UI → ロジック → 統合)
|
|
396
|
-
6. **スタイリング**:
|
|
408
|
+
6. **スタイリング**: Tailwind CSSで実装
|
|
397
409
|
7. **テスト作成**: 単体テスト、統合テストを実装
|
|
398
410
|
8. **レビュー**: 品質チェックリストで確認
|
|
399
411
|
|
|
@@ -64,30 +64,41 @@ import './styles.css';
|
|
|
64
64
|
import { localUtil } from '../utils';
|
|
65
65
|
```
|
|
66
66
|
|
|
67
|
-
### スタイリング(
|
|
67
|
+
### スタイリング(Tailwind CSS)
|
|
68
68
|
|
|
69
69
|
```typescript
|
|
70
|
-
// ✅
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
export function Button({ variant, size, children }: ButtonProps) {
|
|
70
|
+
// ✅ Tailwind CSSユーティリティクラスの使用
|
|
71
|
+
export function Card({ children }: CardProps) {
|
|
74
72
|
return (
|
|
75
|
-
<
|
|
73
|
+
<div className="rounded-lg bg-white p-6 shadow-md hover:shadow-lg transition-shadow">
|
|
76
74
|
{children}
|
|
77
|
-
</
|
|
75
|
+
</div>
|
|
78
76
|
);
|
|
79
77
|
}
|
|
80
78
|
|
|
81
|
-
// ✅
|
|
82
|
-
import {
|
|
83
|
-
|
|
84
|
-
const
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
79
|
+
// ✅ cva によるバリアント管理
|
|
80
|
+
import { cva } from "class-variance-authority";
|
|
81
|
+
|
|
82
|
+
const buttonVariants = cva(
|
|
83
|
+
"inline-flex items-center justify-center rounded-md font-medium transition-colors",
|
|
84
|
+
{
|
|
85
|
+
variants: {
|
|
86
|
+
variant: {
|
|
87
|
+
primary: "bg-primary text-primary-foreground hover:bg-primary/90",
|
|
88
|
+
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
|
89
|
+
},
|
|
90
|
+
size: {
|
|
91
|
+
sm: "h-8 px-3 text-sm",
|
|
92
|
+
md: "h-10 px-4 text-base",
|
|
93
|
+
lg: "h-12 px-6 text-lg",
|
|
94
|
+
},
|
|
95
|
+
},
|
|
96
|
+
defaultVariants: {
|
|
97
|
+
variant: "primary",
|
|
98
|
+
size: "md",
|
|
99
|
+
},
|
|
89
100
|
}
|
|
90
|
-
|
|
101
|
+
);
|
|
91
102
|
```
|
|
92
103
|
|
|
93
104
|
## ツール設定
|
|
@@ -34,7 +34,7 @@ description: "Reactコンポーネントの設計原則と実装ガイドライ
|
|
|
34
34
|
|
|
35
35
|
- [ディレクトリ構造](./reference/directory-structure.md) - ファイル配置とディレクトリ設計
|
|
36
36
|
- [Props設計パターン](./reference/props-patterns.md) - Props設計とイベントハンドリング
|
|
37
|
-
- [スタイリングガイド](./reference/styling-guide.md) -
|
|
37
|
+
- [スタイリングガイド](./reference/styling-guide.md) - Tailwind CSSを使用したスタイリング規約
|
|
38
38
|
|
|
39
39
|
## クイックリファレンス
|
|
40
40
|
|
|
@@ -70,7 +70,7 @@ src/
|
|
|
70
70
|
```
|
|
71
71
|
ComponentName/
|
|
72
72
|
├── index.tsx # コンポーネント本体
|
|
73
|
-
└──
|
|
73
|
+
└── variants.ts # cvaバリアント定義(必要に応じて)
|
|
74
74
|
```
|
|
75
75
|
|
|
76
76
|
### 基本的な型定義
|
|
@@ -91,7 +91,7 @@ interface ButtonProps {
|
|
|
91
91
|
|
|
92
92
|
- [ ] 適切なディレクトリに配置されている
|
|
93
93
|
- [ ] TypeScript の型定義が完全
|
|
94
|
-
- [ ]
|
|
94
|
+
- [ ] Tailwind CSS でスタイリングされている
|
|
95
95
|
- [ ] プロパティのデフォルト値が設定されている
|
|
96
96
|
- [ ] アクセシビリティが考慮されている
|
|
97
97
|
- [ ] 単体テストが実装されている
|
|
@@ -106,4 +106,4 @@ interface ButtonProps {
|
|
|
106
106
|
|
|
107
107
|
- [React 公式ドキュメント](https://react.dev)
|
|
108
108
|
- [TypeScript 公式ドキュメント](https://www.typescriptlang.org)
|
|
109
|
-
- [
|
|
109
|
+
- [Tailwind CSS ドキュメント](https://tailwindcss.com)
|
|
@@ -1,112 +1,49 @@
|
|
|
1
|
-
# スタイリングガイド(
|
|
1
|
+
# スタイリングガイド(Tailwind CSS)
|
|
2
2
|
|
|
3
3
|
## 基本的な使い方
|
|
4
4
|
|
|
5
|
-
###
|
|
6
|
-
-
|
|
7
|
-
-
|
|
8
|
-
-
|
|
5
|
+
### Tailwind CSS の使用
|
|
6
|
+
- Tailwind CSS v4 のユーティリティクラスを使用してスタイルを定義
|
|
7
|
+
- CSS変数(globals.css)でデザイントークンを管理
|
|
8
|
+
- shadcn/ui のコンポーネントを活用
|
|
9
9
|
|
|
10
10
|
```typescript
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
variant: "primary",
|
|
16
|
-
size: "md",
|
|
17
|
-
});
|
|
18
|
-
```
|
|
19
|
-
|
|
20
|
-
## レシピの使用
|
|
21
|
-
|
|
22
|
-
### 基本的なレシピ
|
|
23
|
-
|
|
24
|
-
```typescript
|
|
25
|
-
// ✅ Panda CSS レシピの使用
|
|
26
|
-
import { button } from 'styled-system/recipes';
|
|
27
|
-
|
|
28
|
-
export function Button({ variant, size, children }: ButtonProps) {
|
|
29
|
-
return (
|
|
30
|
-
<button className={button({ variant, size })}>
|
|
31
|
-
{children}
|
|
32
|
-
</button>
|
|
33
|
-
);
|
|
34
|
-
}
|
|
11
|
+
// ユーティリティクラスの使用
|
|
12
|
+
<div className="flex items-center gap-4 rounded-lg bg-white p-6 shadow-md">
|
|
13
|
+
<h2 className="text-xl font-bold text-gray-900">Title</h2>
|
|
14
|
+
</div>
|
|
35
15
|
```
|
|
36
16
|
|
|
37
|
-
##
|
|
17
|
+
## cva によるバリアント管理
|
|
38
18
|
|
|
39
|
-
###
|
|
19
|
+
### 基本的な使用方法
|
|
40
20
|
|
|
41
21
|
```typescript
|
|
42
|
-
import {
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
22
|
+
import { cva } from "class-variance-authority";
|
|
23
|
+
import { cn } from "@repo/ui/utils";
|
|
24
|
+
|
|
25
|
+
const buttonVariants = cva(
|
|
26
|
+
"inline-flex items-center justify-center rounded-md font-medium transition-colors",
|
|
27
|
+
{
|
|
28
|
+
variants: {
|
|
29
|
+
variant: {
|
|
30
|
+
primary: "bg-primary text-primary-foreground hover:bg-primary/90",
|
|
31
|
+
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
|
32
|
+
outline: "border border-input bg-transparent hover:bg-accent",
|
|
33
|
+
ghost: "hover:bg-accent hover:text-accent-foreground",
|
|
34
|
+
},
|
|
35
|
+
size: {
|
|
36
|
+
sm: "h-8 px-3 text-sm",
|
|
37
|
+
md: "h-10 px-4 text-base",
|
|
38
|
+
lg: "h-12 px-6 text-lg",
|
|
39
|
+
},
|
|
40
|
+
},
|
|
41
|
+
defaultVariants: {
|
|
42
|
+
variant: "primary",
|
|
43
|
+
size: "md",
|
|
44
|
+
},
|
|
49
45
|
}
|
|
50
|
-
|
|
51
|
-
```
|
|
52
|
-
|
|
53
|
-
### 複雑なスタイル定義
|
|
54
|
-
|
|
55
|
-
```typescript
|
|
56
|
-
const cardStyles = css({
|
|
57
|
-
display: 'flex',
|
|
58
|
-
flexDirection: 'column',
|
|
59
|
-
padding: '4',
|
|
60
|
-
borderRadius: 'lg',
|
|
61
|
-
boxShadow: 'md',
|
|
62
|
-
backgroundColor: 'white',
|
|
63
|
-
_dark: {
|
|
64
|
-
backgroundColor: 'gray.800',
|
|
65
|
-
},
|
|
66
|
-
'& > h2': {
|
|
67
|
-
fontSize: 'xl',
|
|
68
|
-
fontWeight: 'bold',
|
|
69
|
-
marginBottom: '2',
|
|
70
|
-
},
|
|
71
|
-
});
|
|
72
|
-
```
|
|
73
|
-
|
|
74
|
-
## スタイルの分離
|
|
75
|
-
|
|
76
|
-
### 別ファイルへの分離
|
|
77
|
-
|
|
78
|
-
```typescript
|
|
79
|
-
// styles.ts
|
|
80
|
-
import { css } from 'styled-system/css';
|
|
81
|
-
|
|
82
|
-
export const containerStyles = css({
|
|
83
|
-
maxWidth: 'container.lg',
|
|
84
|
-
marginX: 'auto',
|
|
85
|
-
paddingX: '4',
|
|
86
|
-
});
|
|
87
|
-
|
|
88
|
-
export const headerStyles = css({
|
|
89
|
-
display: 'flex',
|
|
90
|
-
alignItems: 'center',
|
|
91
|
-
justifyContent: 'space-between',
|
|
92
|
-
height: '16',
|
|
93
|
-
});
|
|
94
|
-
```
|
|
95
|
-
|
|
96
|
-
```typescript
|
|
97
|
-
// Component.tsx
|
|
98
|
-
import { containerStyles, headerStyles } from './styles';
|
|
99
|
-
|
|
100
|
-
export function Layout({ children }) {
|
|
101
|
-
return (
|
|
102
|
-
<div className={containerStyles}>
|
|
103
|
-
<header className={headerStyles}>
|
|
104
|
-
{/* ... */}
|
|
105
|
-
</header>
|
|
106
|
-
{children}
|
|
107
|
-
</div>
|
|
108
|
-
);
|
|
109
|
-
}
|
|
46
|
+
);
|
|
110
47
|
```
|
|
111
48
|
|
|
112
49
|
## クラス名の結合
|
|
@@ -114,11 +51,11 @@ export function Layout({ children }) {
|
|
|
114
51
|
### cn(className)ユーティリティの使用
|
|
115
52
|
|
|
116
53
|
```typescript
|
|
117
|
-
import { cn } from
|
|
54
|
+
import { cn } from "@repo/ui/utils";
|
|
118
55
|
|
|
119
56
|
export function Card({ className, children }: CardProps) {
|
|
120
57
|
return (
|
|
121
|
-
<div className={cn(
|
|
58
|
+
<div className={cn("border rounded-lg p-4", className)}>
|
|
122
59
|
{children}
|
|
123
60
|
</div>
|
|
124
61
|
);
|
|
@@ -128,15 +65,14 @@ export function Card({ className, children }: CardProps) {
|
|
|
128
65
|
### 条件付きスタイル
|
|
129
66
|
|
|
130
67
|
```typescript
|
|
131
|
-
import {
|
|
132
|
-
import { cn } from '@/lib/utils';
|
|
68
|
+
import { cn } from "@repo/ui/utils";
|
|
133
69
|
|
|
134
|
-
export function Button({ isActive, className }) {
|
|
70
|
+
export function Button({ isActive, className }: ButtonProps) {
|
|
135
71
|
return (
|
|
136
72
|
<button
|
|
137
73
|
className={cn(
|
|
138
|
-
|
|
139
|
-
isActive
|
|
74
|
+
"px-4 py-2 rounded-md",
|
|
75
|
+
isActive ? "bg-blue-500 text-white" : "bg-gray-200 text-gray-900",
|
|
140
76
|
className
|
|
141
77
|
)}
|
|
142
78
|
>
|
|
@@ -151,18 +87,9 @@ export function Button({ isActive, className }) {
|
|
|
151
87
|
### ブレークポイント
|
|
152
88
|
|
|
153
89
|
```typescript
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
md: {
|
|
158
|
-
fontSize: 'base',
|
|
159
|
-
padding: '4',
|
|
160
|
-
},
|
|
161
|
-
lg: {
|
|
162
|
-
fontSize: 'lg',
|
|
163
|
-
padding: '6',
|
|
164
|
-
},
|
|
165
|
-
});
|
|
90
|
+
<div className="text-sm p-2 md:text-base md:p-4 lg:text-lg lg:p-6">
|
|
91
|
+
レスポンシブコンテンツ
|
|
92
|
+
</div>
|
|
166
93
|
```
|
|
167
94
|
|
|
168
95
|
### カスタムブレークポイント
|
|
@@ -175,26 +102,21 @@ const responsiveStyles = css({
|
|
|
175
102
|
## ダークモード対応
|
|
176
103
|
|
|
177
104
|
```typescript
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
_dark: {
|
|
182
|
-
backgroundColor: 'gray.900',
|
|
183
|
-
color: 'gray.100',
|
|
184
|
-
},
|
|
185
|
-
});
|
|
105
|
+
<div className="bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
|
|
106
|
+
テーマ対応コンテンツ
|
|
107
|
+
</div>
|
|
186
108
|
```
|
|
187
109
|
|
|
188
110
|
## ベストプラクティス
|
|
189
111
|
|
|
190
112
|
### 1. デザイントークンの活用
|
|
191
|
-
-
|
|
192
|
-
-
|
|
113
|
+
- `globals.css` で定義されたCSS変数を使用
|
|
114
|
+
- shadcn/ui のカラートークンを活用(`text-primary`, `bg-muted` 等)
|
|
193
115
|
|
|
194
|
-
### 2.
|
|
195
|
-
-
|
|
196
|
-
-
|
|
116
|
+
### 2. shadcn/ui コンポーネントを優先
|
|
117
|
+
- 既存の shadcn/ui コンポーネントを優先的に使用
|
|
118
|
+
- カスタムが必要な場合のみ cva で独自バリアントを定義
|
|
197
119
|
|
|
198
120
|
### 3. スタイルの一貫性
|
|
199
|
-
-
|
|
121
|
+
- プロジェクト全体で同じTailwindユーティリティパターンを使用
|
|
200
122
|
- カラーパレット、スペーシングの統一
|
|
@@ -108,3 +108,30 @@ additionalAgents:
|
|
|
108
108
|
additionalCommands:
|
|
109
109
|
- frontend-implement
|
|
110
110
|
- start-dev
|
|
111
|
+
|
|
112
|
+
# 依存関係チェック(init/sync時に自動チェック+インストール)
|
|
113
|
+
requirements:
|
|
114
|
+
# hooksが動作するために必要なnpmパッケージ
|
|
115
|
+
devDependencies:
|
|
116
|
+
"@biomejs/biome": "^1.9.4"
|
|
117
|
+
"typescript": "^5"
|
|
118
|
+
|
|
119
|
+
# 不足時に追加するnpm scripts(キーが存在しない場合のみ追加)
|
|
120
|
+
scripts:
|
|
121
|
+
lint: "biome check ."
|
|
122
|
+
"lint:fix": "biome check --write ."
|
|
123
|
+
format: "biome format ."
|
|
124
|
+
"format:fix": "biome format --write ."
|
|
125
|
+
typecheck: "tsc --noEmit"
|
|
126
|
+
prepush: "{pm} run lint && {pm} run typecheck"
|
|
127
|
+
"task:loop": "npx @einja/dev-cli task:loop"
|
|
128
|
+
"einja:sync": "npx @einja/dev-cli sync"
|
|
129
|
+
|
|
130
|
+
# システムコマンド(警告表示のみ、自動インストールしない)
|
|
131
|
+
systemCommands:
|
|
132
|
+
- command: jq
|
|
133
|
+
description: "JSON processor(全hooksで使用)"
|
|
134
|
+
install:
|
|
135
|
+
darwin: "brew install jq"
|
|
136
|
+
linux: "sudo apt-get install jq"
|
|
137
|
+
win32: "choco install jq"
|
|
@@ -108,3 +108,30 @@ additionalAgents:
|
|
|
108
108
|
additionalCommands:
|
|
109
109
|
- frontend-implement
|
|
110
110
|
- start-dev
|
|
111
|
+
|
|
112
|
+
# 依存関係チェック(init/sync時に自動チェック+インストール)
|
|
113
|
+
requirements:
|
|
114
|
+
# hooksが動作するために必要なnpmパッケージ
|
|
115
|
+
devDependencies:
|
|
116
|
+
"@biomejs/biome": "^1.9.4"
|
|
117
|
+
"typescript": "^5"
|
|
118
|
+
|
|
119
|
+
# 不足時に追加するnpm scripts(キーが存在しない場合のみ追加)
|
|
120
|
+
scripts:
|
|
121
|
+
lint: "biome check ."
|
|
122
|
+
"lint:fix": "biome check --write ."
|
|
123
|
+
format: "biome format ."
|
|
124
|
+
"format:fix": "biome format --write ."
|
|
125
|
+
typecheck: "tsc --noEmit"
|
|
126
|
+
prepush: "{pm} run lint && {pm} run typecheck"
|
|
127
|
+
"task:loop": "npx @einja/dev-cli task:loop"
|
|
128
|
+
"einja:sync": "npx @einja/dev-cli sync"
|
|
129
|
+
|
|
130
|
+
# システムコマンド(警告表示のみ、自動インストールしない)
|
|
131
|
+
systemCommands:
|
|
132
|
+
- command: jq
|
|
133
|
+
description: "JSON processor(全hooksで使用)"
|
|
134
|
+
install:
|
|
135
|
+
darwin: "brew install jq"
|
|
136
|
+
linux: "sudo apt-get install jq"
|
|
137
|
+
win32: "choco install jq"
|
|
@@ -27,23 +27,27 @@
|
|
|
27
27
|
|
|
28
28
|
### 必須Secrets
|
|
29
29
|
|
|
30
|
-
|
|
|
31
|
-
|
|
32
|
-
| `
|
|
33
|
-
| `
|
|
34
|
-
| `
|
|
35
|
-
| `
|
|
36
|
-
| `
|
|
30
|
+
| Secret名 | 説明 | 用途 |
|
|
31
|
+
|---------|------|------|
|
|
32
|
+
| `DOTENV_PRIVATE_KEY_PREVIEW` | Preview環境用復号鍵 | PR Previewデプロイ |
|
|
33
|
+
| `DOTENV_PRIVATE_KEY_PRODUCTION` | 本番環境用復号鍵 | mainブランチデプロイ |
|
|
34
|
+
| `DOTENV_PRIVATE_KEY_DEVELOP` | 開発環境用復号鍵 | developブランチデプロイ |
|
|
35
|
+
| `DOTENV_PRIVATE_KEY_STAGING` | ステージング環境用復号鍵 | stagingブランチデプロイ |
|
|
36
|
+
| `VERCEL_TOKEN` | Vercel CLIデプロイトークン | 全デプロイ |
|
|
37
|
+
| `VERCEL_ORG_ID` | Vercel組織ID | 全デプロイ |
|
|
38
|
+
| `VERCEL_PROJECT_ID_WEB` | WebアプリのVercelプロジェクトID | Webデプロイ |
|
|
39
|
+
| `VERCEL_PROJECT_ID_ADMIN` | AdminアプリのVercelプロジェクトID | Adminデプロイ |
|
|
40
|
+
| `TURBO_TOKEN` | Turborepo Remote Cacheトークン | ビルド高速化 |
|
|
41
|
+
| `TURBO_TEAM` | VercelチームID | ビルド高速化 |
|
|
37
42
|
|
|
38
43
|
### オプション(手動デプロイ・拡張用)
|
|
39
44
|
|
|
40
|
-
|
|
|
41
|
-
|
|
42
|
-
| `
|
|
43
|
-
| `
|
|
44
|
-
| `
|
|
45
|
-
| `
|
|
46
|
-
| `RAILWAY_SERVICE_ID` | RailwayサービスID | Railwayデプロイ | ◯ | - |
|
|
45
|
+
| Secret名 | 説明 | 用途 |
|
|
46
|
+
|---------|------|------|
|
|
47
|
+
| `RAILWAY_TOKEN` | Railway APIトークン | Railwayデプロイ |
|
|
48
|
+
| `RAILWAY_SERVICE_ID` | RailwayサービスID | Railwayデプロイ |
|
|
49
|
+
| `VERCEL_DEV_DOMAIN_ADMIN` | develop環境のAdminカスタムドメイン | Adminエイリアス |
|
|
50
|
+
| `VERCEL_STG_DOMAIN_ADMIN` | staging環境のAdminカスタムドメイン | Adminエイリアス |
|
|
47
51
|
|
|
48
52
|
---
|
|
49
53
|
|
|
@@ -169,29 +173,15 @@ vercel --prod
|
|
|
169
173
|
|
|
170
174
|
### GitHub Actions での Vercel CLI デプロイ
|
|
171
175
|
|
|
172
|
-
GitHub Actions
|
|
176
|
+
GitHub ActionsではVercel CLIの認証情報をGitHub Secretsで管理します。`.env.ci`への格納は不要です。
|
|
173
177
|
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
```
|
|
180
|
-
|
|
181
|
-
#### 取得方法
|
|
178
|
+
必要なSecrets:
|
|
179
|
+
- `VERCEL_TOKEN`: Vercel Dashboard > Account Settings > Tokens > Create Token
|
|
180
|
+
- `VERCEL_ORG_ID`: Vercel Dashboard > Team Settings > General > Team ID
|
|
181
|
+
- `VERCEL_PROJECT_ID_WEB`: Vercel Dashboard > Project Settings > General > Project ID
|
|
182
|
+
- `VERCEL_PROJECT_ID_ADMIN`: 同上(Adminプロジェクト)
|
|
182
183
|
|
|
183
|
-
|
|
184
|
-
# VERCEL_TOKEN: Vercel Dashboard > Account Settings > Tokens > Create Token
|
|
185
|
-
# VERCEL_ORG_ID: Vercel Dashboard > Team Settings > General > Team ID
|
|
186
|
-
# VERCEL_PROJECT_ID_WEB: Vercel Dashboard > Project Settings > General > Project ID
|
|
187
|
-
```
|
|
188
|
-
|
|
189
|
-
`.env.ci` を更新する場合は以下を使用してください:
|
|
190
|
-
|
|
191
|
-
```bash
|
|
192
|
-
pnpm env:update
|
|
193
|
-
# → 「環境設定を変更」→「CI環境」
|
|
194
|
-
```
|
|
184
|
+
登録方法は [GitHub Secrets登録](#6-github-secrets登録) を参照してください。
|
|
195
185
|
|
|
196
186
|
---
|
|
197
187
|
|
|
@@ -315,16 +305,25 @@ gh secret set RAILWAY_SERVICE_ID --body "サービスID"
|
|
|
315
305
|
# 1. GitHub リポジトリ > Settings > Secrets and variables > Actions
|
|
316
306
|
# 2. 「New repository secret」で以下を追加
|
|
317
307
|
|
|
318
|
-
#
|
|
319
|
-
gh secret set
|
|
320
|
-
gh secret set
|
|
321
|
-
gh secret set
|
|
322
|
-
gh secret set
|
|
308
|
+
# --- 復号鍵(.env.keysから取得) ---
|
|
309
|
+
gh secret set DOTENV_PRIVATE_KEY_PREVIEW --body "$(grep DOTENV_PRIVATE_KEY_PREVIEW .env.keys | cut -d'\"' -f2)"
|
|
310
|
+
gh secret set DOTENV_PRIVATE_KEY_PRODUCTION --body "$(grep DOTENV_PRIVATE_KEY_PRODUCTION .env.keys | cut -d'\"' -f2)"
|
|
311
|
+
gh secret set DOTENV_PRIVATE_KEY_DEVELOP --body "$(grep DOTENV_PRIVATE_KEY_DEVELOP .env.keys | cut -d'\"' -f2)"
|
|
312
|
+
gh secret set DOTENV_PRIVATE_KEY_STAGING --body "$(grep DOTENV_PRIVATE_KEY_STAGING .env.keys | cut -d'\"' -f2)"
|
|
323
313
|
|
|
324
|
-
#
|
|
314
|
+
# --- Vercel ---
|
|
325
315
|
gh secret set VERCEL_TOKEN --body "取得したトークン"
|
|
326
316
|
gh secret set VERCEL_ORG_ID --body "team_xxxxxxxxx"
|
|
327
317
|
gh secret set VERCEL_PROJECT_ID_WEB --body "prj_xxxxxxxxx"
|
|
318
|
+
gh secret set VERCEL_PROJECT_ID_ADMIN --body "prj_xxxxxxxxx"
|
|
319
|
+
|
|
320
|
+
# --- Turborepo ---
|
|
321
|
+
gh secret set TURBO_TOKEN --body "取得したトークン"
|
|
322
|
+
gh secret set TURBO_TEAM --body "team_xxxxxxxxx"
|
|
323
|
+
|
|
324
|
+
# --- オプション(Railway使用時) ---
|
|
325
|
+
gh secret set RAILWAY_TOKEN --body "取得したトークン"
|
|
326
|
+
gh secret set RAILWAY_SERVICE_ID --body "サービスID"
|
|
328
327
|
```
|
|
329
328
|
|
|
330
329
|
### 登録確認
|