@careerchain/stdd 0.1.0
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 +44 -0
- package/assets/.claude/agents/code-reviewer.md +170 -0
- package/assets/.claude/agents/implementer.md +96 -0
- package/assets/.claude/agents/plan-writer.md +124 -0
- package/assets/.claude/agents/qa-engineer.md +133 -0
- package/assets/.claude/agents/spec-reviewer.md +173 -0
- package/assets/.claude/agents/spec-writer.md +194 -0
- package/assets/.claude/agents/test-reviewer.md +218 -0
- package/assets/.claude/docs/spec-driven-development-guide.md +436 -0
- package/assets/.claude/hooks/pre-push-check.sh +160 -0
- package/assets/.claude/settings.json +67 -0
- package/assets/.claude/skills/auto-implement/SKILL.md +168 -0
- package/assets/.claude/skills/auto-implement/references/github-project.md +54 -0
- package/assets/.claude/skills/auto-implement/references/phases.md +244 -0
- package/assets/.claude/skills/create-pr/SKILL.md +112 -0
- package/assets/.claude/skills/documenting-plans/SKILL.md +217 -0
- package/assets/.claude/skills/documenting-plans/templates/plan.md +182 -0
- package/assets/.claude/skills/documenting-specifications/SKILL.md +300 -0
- package/assets/.claude/skills/documenting-specifications/guides/error-handling.md +78 -0
- package/assets/.claude/skills/documenting-specifications/guides/stdd-violations.md +237 -0
- package/assets/.claude/skills/documenting-specifications/templates/requirements.md +184 -0
- package/assets/.claude/skills/documenting-specifications/templates/screen-items-definition.md +179 -0
- package/assets/.claude/skills/documenting-specifications/templates/tech-design.md +241 -0
- package/assets/.claude/skills/generating-wireframes/SKILL.md +121 -0
- package/assets/.claude/skills/generating-wireframes/examples/tob-form.html +497 -0
- package/assets/.claude/skills/generating-wireframes/examples/tob-list.html +536 -0
- package/assets/.claude/skills/generating-wireframes/examples/toc-form.html +493 -0
- package/assets/.claude/skills/generating-wireframes/examples/toc-list.html +538 -0
- package/assets/.claude/skills/generating-wireframes/guides/from-requirements.md +53 -0
- package/assets/.claude/skills/generating-wireframes/templates/index.html +472 -0
- package/assets/.claude/skills/generating-wireframes/templates/screen.html +480 -0
- package/assets/.claude/skills/introducing-stdd/SKILL.md +185 -0
- package/assets/.claude/skills/introducing-stdd/templates/introduction-plan.md +64 -0
- package/assets/.claude/skills/kaizen/SKILL.md +129 -0
- package/assets/.claude/skills/kaizen/references/code-examples.md +233 -0
- package/assets/.claude/skills/reverse-engineering-common-spec/SKILL.md +137 -0
- package/assets/.claude/skills/reverse-engineering-feature-spec/SKILL.md +463 -0
- package/assets/.claude/skills/reverse-engineering-feature-spec/guides/accuracy.md +215 -0
- package/assets/.claude/skills/reverse-engineering-feature-spec/guides/figma-capture.md +313 -0
- package/assets/.claude/skills/review-pr-with-agents/SKILL.md +159 -0
- package/assets/.claude/skills/searching-existing-solutions/SKILL.md +110 -0
- package/assets/.claude/skills/setup-stdd/SKILL.md +82 -0
- package/assets/.claude/skills/software-architecture/SKILL.md +260 -0
- package/assets/.claude/skills/starting-new-with-stdd/SKILL.md +142 -0
- package/assets/.claude/skills/starting-new-with-stdd/templates/bootstrap-plan.md +73 -0
- package/assets/.claude/skills/tailoring-spec-format/SKILL.md +103 -0
- package/assets/.claude/skills/verifying-consistency/SKILL.md +90 -0
- package/assets/stdd.config.yml.tpl +34 -0
- package/dist/cli.js +148 -0
- package/dist/cli.js.map +1 -0
- package/dist/install.js +121 -0
- package/dist/install.js.map +1 -0
- package/package.json +48 -0
|
@@ -0,0 +1,313 @@
|
|
|
1
|
+
# Figma UIキャプチャガイド - Playwright MCPを使った画面キャプチャとFigma取り込み
|
|
2
|
+
|
|
3
|
+
リバースエンジニアリング時に、実装済みのUIをPlaywright MCPで操作・キャプチャし、Figmaデザインファイルとして整理する手順。
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## 目的
|
|
8
|
+
|
|
9
|
+
- 実装済みUIの**視覚的なドキュメント**をFigmaに集約する
|
|
10
|
+
- REQUIREMENTS.mdの「UI/UXデザイン」セクションからFigmaリンクで参照できるようにする
|
|
11
|
+
- デザインの現状を正確に記録し、今後のUI改善・レビューの基盤とする
|
|
12
|
+
|
|
13
|
+
---
|
|
14
|
+
|
|
15
|
+
## 前提条件
|
|
16
|
+
|
|
17
|
+
- 対象アプリがローカル環境で起動していること
|
|
18
|
+
- Playwright MCPが利用可能であること
|
|
19
|
+
- Figmaアカウントがあること
|
|
20
|
+
|
|
21
|
+
---
|
|
22
|
+
|
|
23
|
+
## 作業フロー
|
|
24
|
+
|
|
25
|
+
```
|
|
26
|
+
1. キャプチャ計画の作成(画面一覧・状態の洗い出し)
|
|
27
|
+
↓
|
|
28
|
+
2. Playwright MCPでアプリを操作し、各画面のスクリーンショットを取得
|
|
29
|
+
↓
|
|
30
|
+
3. Figmaファイルを作成し、スクリーンショットをフレームとして配置
|
|
31
|
+
↓
|
|
32
|
+
4. REQUIREMENTS.mdの「UI/UXデザイン」セクションにFigmaリンクを記載
|
|
33
|
+
↓
|
|
34
|
+
5. スクリーンショットファイルを削除(gitにはコミットしない)
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
---
|
|
38
|
+
|
|
39
|
+
## Step 1: キャプチャ計画の作成
|
|
40
|
+
|
|
41
|
+
コードリーディング(Phase 1)の結果を元に、キャプチャすべき画面と状態を一覧化する。
|
|
42
|
+
|
|
43
|
+
### 洗い出すべき画面状態
|
|
44
|
+
|
|
45
|
+
| カテゴリ | 状態例 |
|
|
46
|
+
|---------|--------|
|
|
47
|
+
| **初期状態** | データなし(空)、ローディング中 |
|
|
48
|
+
| **データあり** | 1件表示、複数件表示 |
|
|
49
|
+
| **フォーム** | 未入力、入力済み、バリデーションエラー |
|
|
50
|
+
| **モーダル** | 開いた状態(新規追加/編集) |
|
|
51
|
+
| **操作結果** | 成功トースト、削除確認ダイアログ |
|
|
52
|
+
| **レスポンシブ** | デスクトップ(1280px)、モバイル(375px) |
|
|
53
|
+
|
|
54
|
+
### 計画テンプレート
|
|
55
|
+
|
|
56
|
+
```markdown
|
|
57
|
+
## キャプチャ計画: [機能名]
|
|
58
|
+
|
|
59
|
+
### デスクトップ(1280x800)
|
|
60
|
+
| # | 画面名 | 状態 | 操作手順 |
|
|
61
|
+
|---|--------|------|---------|
|
|
62
|
+
| 1 | 一覧画面 | データあり | ログイン → 対象ページへ遷移 |
|
|
63
|
+
| 2 | 一覧画面 | データなし | テストデータなしユーザーでログイン |
|
|
64
|
+
| 3 | 追加モーダル | 空フォーム | 「追加」ボタンクリック |
|
|
65
|
+
| 4 | 追加モーダル | 入力済み | フォーム項目を入力 |
|
|
66
|
+
| 5 | 編集モーダル | 既存データ読み込み済み | 編集ボタンクリック |
|
|
67
|
+
| 6 | 削除確認 | ダイアログ表示 | 削除ボタンクリック |
|
|
68
|
+
|
|
69
|
+
### モバイル(375x812)
|
|
70
|
+
| # | 画面名 | 状態 | 操作手順 |
|
|
71
|
+
|---|--------|------|---------|
|
|
72
|
+
| 1 | 一覧画面 | データあり | (同上、ビューポート変更) |
|
|
73
|
+
| 2 | 追加モーダル | 空フォーム | (同上、ビューポート変更) |
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
---
|
|
77
|
+
|
|
78
|
+
## Step 2: Playwright MCPでスクリーンショット取得
|
|
79
|
+
|
|
80
|
+
### 操作ルール
|
|
81
|
+
|
|
82
|
+
CLAUDE.mdの「Playwright MCPでのブラウザ操作ルール」に従う:
|
|
83
|
+
|
|
84
|
+
```
|
|
85
|
+
1. ブラウザを開く
|
|
86
|
+
2. ログイン(テストユーザーを使用)
|
|
87
|
+
3. 対象画面に遷移
|
|
88
|
+
4. 各状態のスクリーンショットを取得
|
|
89
|
+
5. ログアウト
|
|
90
|
+
6. ブラウザを閉じる
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
### スクリーンショット取得のポイント
|
|
94
|
+
|
|
95
|
+
**1. ビューポートサイズを明示的に設定する**
|
|
96
|
+
|
|
97
|
+
```
|
|
98
|
+
デスクトップ: 1280x800
|
|
99
|
+
モバイル: 375x812
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
**2. 状態を正確に再現してからキャプチャする**
|
|
103
|
+
|
|
104
|
+
```
|
|
105
|
+
❌ 悪い例: ページを開いた直後にキャプチャ(ローディング中の可能性)
|
|
106
|
+
✅ 良い例: データが表示されたことを確認してからキャプチャ
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
**3. 画面全体をキャプチャする(フルページ)**
|
|
110
|
+
|
|
111
|
+
スクロールが必要な長い画面は、フルページスクリーンショットを取得する。
|
|
112
|
+
|
|
113
|
+
**4. ファイル名は一貫した命名規則に従う**
|
|
114
|
+
|
|
115
|
+
```
|
|
116
|
+
{feature}-{screen}-{state}-{viewport}.png
|
|
117
|
+
|
|
118
|
+
例:
|
|
119
|
+
dashboard-overview-with-data-desktop.png
|
|
120
|
+
dashboard-projects-add-modal-empty-desktop.png
|
|
121
|
+
dashboard-projects-list-mobile.png
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
**5. スクリーンショットの一時保存先**
|
|
125
|
+
|
|
126
|
+
```
|
|
127
|
+
docs/<app>/<feature-path>/screenshots/
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
例:
|
|
131
|
+
```
|
|
132
|
+
docs/<app.id>/dashboard/common/screenshots/
|
|
133
|
+
docs/<app.id>/dashboard/projects/screenshots/
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
⚠️ **重要: スクリーンショットはFigma取り込み後に削除すること。gitにはコミットしない。**
|
|
137
|
+
詳細は「Step 5: スクリーンショットの削除」を参照。
|
|
138
|
+
|
|
139
|
+
---
|
|
140
|
+
|
|
141
|
+
## Step 3: Figmaファイル作成
|
|
142
|
+
|
|
143
|
+
### Figmaファイル構成
|
|
144
|
+
|
|
145
|
+
```
|
|
146
|
+
Figmaファイル名: <app>-<Feature-Name>
|
|
147
|
+
例: <app.id>-Dashboard-Common
|
|
148
|
+
|
|
149
|
+
ページ構成:
|
|
150
|
+
├── Desktop(1280px)
|
|
151
|
+
│ ├── フレーム1: [画面名 - 状態]
|
|
152
|
+
│ ├── フレーム2: [画面名 - 状態]
|
|
153
|
+
│ └── ...
|
|
154
|
+
└── Mobile(375px)
|
|
155
|
+
├── フレーム1: [画面名 - 状態]
|
|
156
|
+
└── ...
|
|
157
|
+
```
|
|
158
|
+
|
|
159
|
+
### Figmaへの取り込み手順
|
|
160
|
+
|
|
161
|
+
1. Figmaで新しいファイルを作成
|
|
162
|
+
2. 「Desktop」「Mobile」のページを作成
|
|
163
|
+
3. 各スクリーンショットをフレームとして配置
|
|
164
|
+
4. フレーム名を設定(画面名 + 状態を含める)
|
|
165
|
+
5. 必要に応じてアノテーション(注釈)を追加
|
|
166
|
+
|
|
167
|
+
### フレーム命名規則
|
|
168
|
+
|
|
169
|
+
```
|
|
170
|
+
[画面名] - [状態]
|
|
171
|
+
|
|
172
|
+
例:
|
|
173
|
+
Overview Tab - データあり
|
|
174
|
+
Projects Tab - 一覧表示
|
|
175
|
+
Projects - 追加モーダル(空)
|
|
176
|
+
Projects - 追加モーダル(入力済み)
|
|
177
|
+
Projects - 削除確認ダイアログ
|
|
178
|
+
```
|
|
179
|
+
|
|
180
|
+
---
|
|
181
|
+
|
|
182
|
+
## Step 4: REQUIREMENTS.mdへの記載
|
|
183
|
+
|
|
184
|
+
オンボーディングのREQUIREMENTS.mdを参考に、以下のフォーマットで記載する。
|
|
185
|
+
|
|
186
|
+
### 記載フォーマット
|
|
187
|
+
|
|
188
|
+
```markdown
|
|
189
|
+
## 3. UI/UXデザイン
|
|
190
|
+
|
|
191
|
+
### Figmaデザイン
|
|
192
|
+
|
|
193
|
+
**Figmaファイル**: [<ファイル名>](<FigmaファイルURL>)
|
|
194
|
+
|
|
195
|
+
#### [画面名1]
|
|
196
|
+
|
|
197
|
+
- [状態A](<FigmaファイルURL>?node-id=<node-id>)
|
|
198
|
+
- [状態B](<FigmaファイルURL>?node-id=<node-id>)
|
|
199
|
+
|
|
200
|
+
#### [画面名2]
|
|
201
|
+
|
|
202
|
+
- [状態A](<FigmaファイルURL>?node-id=<node-id>)
|
|
203
|
+
- [状態B](<FigmaファイルURL>?node-id=<node-id>)
|
|
204
|
+
```
|
|
205
|
+
|
|
206
|
+
### 記載例(ダッシュボードの場合)
|
|
207
|
+
|
|
208
|
+
```markdown
|
|
209
|
+
## 3. UI/UXデザイン
|
|
210
|
+
|
|
211
|
+
### Figmaデザイン
|
|
212
|
+
|
|
213
|
+
**Figmaファイル**: [<app.id>-Dashboard-Common](https://www.figma.com/design/xxxxx/<app.id>-Dashboard-Common)
|
|
214
|
+
|
|
215
|
+
#### OverviewTab
|
|
216
|
+
|
|
217
|
+
- [実績サマリ表示](https://www.figma.com/design/xxxxx/<app.id>-Dashboard-Common?node-id=1-2)
|
|
218
|
+
|
|
219
|
+
#### タブ切り替え
|
|
220
|
+
|
|
221
|
+
- [Overviewタブ(アクティブ)](https://www.figma.com/design/xxxxx/<app.id>-Dashboard-Common?node-id=2-2)
|
|
222
|
+
- [Projectsタブ(アクティブ)](https://www.figma.com/design/xxxxx/<app.id>-Dashboard-Common?node-id=3-2)
|
|
223
|
+
|
|
224
|
+
#### WelcomeSection
|
|
225
|
+
|
|
226
|
+
- [ウェルカムバナー表示](https://www.figma.com/design/xxxxx/<app.id>-Dashboard-Common?node-id=4-2)
|
|
227
|
+
```
|
|
228
|
+
|
|
229
|
+
### node-idの取得方法
|
|
230
|
+
|
|
231
|
+
1. Figmaでフレームを選択
|
|
232
|
+
2. 右クリック → 「リンクをコピー」
|
|
233
|
+
3. URLの`node-id=`パラメータが該当のnode-id
|
|
234
|
+
|
|
235
|
+
---
|
|
236
|
+
|
|
237
|
+
## Step 5: スクリーンショットの削除
|
|
238
|
+
|
|
239
|
+
⚠️ **スクリーンショットはFigmaへの取り込みが完了したら必ず削除する。gitにはコミットしない。**
|
|
240
|
+
|
|
241
|
+
### 理由
|
|
242
|
+
|
|
243
|
+
- スクリーンショットはFigmaに取り込むための**一時ファイル**であり、Figmaが正(Single Source of Truth)
|
|
244
|
+
- 画像ファイルはgitリポジトリを肥大化させる
|
|
245
|
+
- UIの更新はFigma上で管理する
|
|
246
|
+
|
|
247
|
+
### 削除手順
|
|
248
|
+
|
|
249
|
+
```bash
|
|
250
|
+
# Figma取り込み完了後、screenshotsディレクトリごと削除
|
|
251
|
+
rm -rf docs/<app>/<feature-path>/screenshots/
|
|
252
|
+
|
|
253
|
+
# 例
|
|
254
|
+
rm -rf docs/<app.id>/dashboard/common/screenshots/
|
|
255
|
+
rm -rf docs/<app.id>/dashboard/projects/screenshots/
|
|
256
|
+
```
|
|
257
|
+
|
|
258
|
+
### 削除タイミング
|
|
259
|
+
|
|
260
|
+
```
|
|
261
|
+
スクリーンショット取得 → Figma取り込み → node-idリンク記載 → スクリーンショット削除 → コミット
|
|
262
|
+
```
|
|
263
|
+
|
|
264
|
+
Figmaリンクの記載が完了し、node-idが正しいことを確認してから削除する。削除後にコミットすることで、スクリーンショットがgit履歴に残ることを防ぐ。
|
|
265
|
+
|
|
266
|
+
---
|
|
267
|
+
|
|
268
|
+
## チェックリスト
|
|
269
|
+
|
|
270
|
+
### キャプチャ計画時
|
|
271
|
+
|
|
272
|
+
```
|
|
273
|
+
□ コードリーディングで全画面・全状態を洗い出した
|
|
274
|
+
□ デスクトップ・モバイル両方の計画を作成した
|
|
275
|
+
□ フォーム状態(空/入力済み/エラー)を網羅した
|
|
276
|
+
□ モーダル・ダイアログの状態を含めた
|
|
277
|
+
```
|
|
278
|
+
|
|
279
|
+
### スクリーンショット取得時
|
|
280
|
+
|
|
281
|
+
```
|
|
282
|
+
□ テストユーザーでログインした
|
|
283
|
+
□ ビューポートサイズを正しく設定した
|
|
284
|
+
□ データが表示されたことを確認してからキャプチャした
|
|
285
|
+
□ 命名規則に従ったファイル名を付けた
|
|
286
|
+
□ 操作完了後にログアウトした
|
|
287
|
+
```
|
|
288
|
+
|
|
289
|
+
### Figma作成時
|
|
290
|
+
|
|
291
|
+
```
|
|
292
|
+
□ ファイル名が命名規則に従っている
|
|
293
|
+
□ Desktop/Mobileのページを分けた
|
|
294
|
+
□ フレーム名が画面名+状態を含んでいる
|
|
295
|
+
□ 全スクリーンショットをフレームとして配置した
|
|
296
|
+
```
|
|
297
|
+
|
|
298
|
+
### REQUIREMENTS.md記載時
|
|
299
|
+
|
|
300
|
+
```
|
|
301
|
+
□ FigmaファイルURLを記載した
|
|
302
|
+
□ 各画面のnode-id付きリンクを記載した
|
|
303
|
+
□ 複数状態がある画面は状態ごとにリンクを記載した
|
|
304
|
+
```
|
|
305
|
+
|
|
306
|
+
### スクリーンショット削除時
|
|
307
|
+
|
|
308
|
+
```
|
|
309
|
+
□ Figmaへの取り込みが完了した
|
|
310
|
+
□ REQUIREMENTS.mdのnode-idリンクが正しいことを確認した
|
|
311
|
+
□ screenshotsディレクトリを削除した
|
|
312
|
+
□ スクリーンショットがgit stagingに含まれていないことを確認した
|
|
313
|
+
```
|
|
@@ -0,0 +1,159 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: review-pr-with-agents
|
|
3
|
+
description: |-
|
|
4
|
+
作成済み PR を `qa-engineer` と `code-reviewer` の2つの専門エージェントに並列でレビューさせ、結果を統合報告する。マージ前の最終チェックを2観点(QA観点=整合性・テスト・論理バグ/コードレビュー観点=規約・品質・セキュリティ・レスポンシブ)から同時に行う。PR の新規作成は `create-pr` が担い、本スキルは作成済み PR へのレビュー適用に特化する。
|
|
5
|
+
when_to_use: |-
|
|
6
|
+
「PRをqa-engineerとcode-reviewerにレビューさせて」「let qa-engineer and code-reviewer handle this pr」「専門エージェントにPRをレビューさせて」「PRをチームレビューに回して」「PRにマルチレビューかけて」「review PR with agents」「PR #123をレビューさせて」「マージ前チェック」「PR最終確認」など、既存の PR を専門エージェントにレビュー依頼するとき。
|
|
7
|
+
allowed-tools: Bash, Read, Grep, Glob, Agent
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
# Pull Request マルチエージェントレビュー
|
|
11
|
+
|
|
12
|
+
作成済みのPRを `qa-engineer` と `code-reviewer` の2エージェントに**並列**でレビューさせ、結果を統合してユーザーに報告する。
|
|
13
|
+
|
|
14
|
+
## 位置付け
|
|
15
|
+
|
|
16
|
+
- `create-pr`: PRを新規作成する
|
|
17
|
+
- `review-pr-with-agents`(本スキル): **既にあるPR**を専門エージェントに投げてレビューしてもらう
|
|
18
|
+
- `auto-implement` の Phase 3/4 と観点は重なるが、本スキルはパイプライン全体ではなく「レビュー適用のみ」に切り出した単発操作
|
|
19
|
+
|
|
20
|
+
## 1. PR番号の特定
|
|
21
|
+
|
|
22
|
+
引数で明示的にPR番号(`#1198` / `1198`)が指定されていればそれを使う。無ければ現在のブランチに紐づくPRを特定する。
|
|
23
|
+
|
|
24
|
+
```bash
|
|
25
|
+
# 現在のブランチに紐づくPR番号を取得
|
|
26
|
+
gh pr view --json number,title,headRefName,baseRefName,url
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
該当PRが存在しない場合はその旨をユーザーに伝えて停止(create-pr を案内)。
|
|
30
|
+
|
|
31
|
+
## 2. PR情報の収集
|
|
32
|
+
|
|
33
|
+
次をまとめて把握する:
|
|
34
|
+
|
|
35
|
+
```bash
|
|
36
|
+
gh pr view <PR番号> --json number,title,body,headRefName,baseRefName,url,commits,files
|
|
37
|
+
git fetch origin <baseRef>
|
|
38
|
+
git log --oneline origin/<baseRef>...HEAD
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
集める情報:
|
|
42
|
+
|
|
43
|
+
- PR番号・タイトル・概要(body)
|
|
44
|
+
- base ブランチ(`.stdd.config.yml` の `project.primary_branch`)
|
|
45
|
+
- 対象コミット一覧(`origin/<base>...HEAD`)
|
|
46
|
+
- 主要な変更ファイル
|
|
47
|
+
|
|
48
|
+
## 3. worktree / devcontainer の確定
|
|
49
|
+
|
|
50
|
+
レビュー対象の作業が走っている worktree を確定する。
|
|
51
|
+
|
|
52
|
+
```bash
|
|
53
|
+
git worktree list
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
該当ブランチの worktree パスを控え、対応する devcontainer コマンドのテンプレを用意する:
|
|
57
|
+
|
|
58
|
+
```
|
|
59
|
+
devcontainer exec --workspace-folder <WORKTREE_PATH> --override-config <WORKTREE_PATH>/.devcontainer/devcontainer.override.json bash -c "<COMMAND>"
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
**重要**: devcontainer コマンドは必ず `devcontainer exec` から始める(変数代入を先頭に置かない)。プロジェクトの CLAUDE.md / memory「devcontainerコマンドパターン」を参照。
|
|
63
|
+
|
|
64
|
+
## 4. 2エージェントを並列起動
|
|
65
|
+
|
|
66
|
+
`qa-engineer` と `code-reviewer` を**同一メッセージ内の2つの `Agent` 呼び出し**として同時に起動する。片方を待ってから次を投げてはいけない(並列で効率化する意図)。片方をバックグラウンドにしたい場合は `run_in_background: true` を併用してよい。
|
|
67
|
+
|
|
68
|
+
### 4.1 qa-engineer へのプロンプト雛形
|
|
69
|
+
|
|
70
|
+
```
|
|
71
|
+
PR #<番号> (ブランチ `<headRef>`) のQAレビューを実施してください。
|
|
72
|
+
|
|
73
|
+
## PR概要
|
|
74
|
+
<タイトル>
|
|
75
|
+
<body のサマリ>
|
|
76
|
+
|
|
77
|
+
## 対象コミット(origin/<base> からの N コミット)
|
|
78
|
+
<git log --oneline の結果を貼り付け>
|
|
79
|
+
|
|
80
|
+
## 作業場所
|
|
81
|
+
- worktree: <WORKTREE_PATH>
|
|
82
|
+
- devcontainer コマンドテンプレ:
|
|
83
|
+
devcontainer exec --workspace-folder <WORKTREE_PATH> --override-config <WORKTREE_PATH>/.devcontainer/devcontainer.override.json bash -c "cd /workspace/<app> && npm test -- --no-cache 2>&1 | tail -80"
|
|
84
|
+
|
|
85
|
+
## レビュー観点
|
|
86
|
+
1. Spec ⇔ テスト ⇔ 実装 の整合性(REQUIREMENTS.md / TECH_DESIGN.md ↔ *.test.* ↔ 実装ファイル)
|
|
87
|
+
2. 影響する app のユニットテスト全体 pass/fail(--no-cache で実行)
|
|
88
|
+
3. 論理的なバグ・エッジケース
|
|
89
|
+
4. seed/マイグレーション変更時は既存データとの整合
|
|
90
|
+
|
|
91
|
+
## 報告形式
|
|
92
|
+
Critical / Major / Minor で分類し、ファイル:行で指摘。テスト結果サマリ含め <文字数制限> 字以内で。
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
### 4.2 code-reviewer へのプロンプト雛形
|
|
96
|
+
|
|
97
|
+
```
|
|
98
|
+
PR #<番号> (ブランチ `<headRef>`, worktree `<WORKTREE_PATH>`) のコードレビューを実施してください。
|
|
99
|
+
|
|
100
|
+
## PR概要
|
|
101
|
+
<タイトル>
|
|
102
|
+
|
|
103
|
+
## 対象コミット(origin/<base> からの N コミット)
|
|
104
|
+
<git log --oneline の結果>
|
|
105
|
+
|
|
106
|
+
## レビュー観点
|
|
107
|
+
1. CLAUDE.md 規約準拠(Domain層構造・命名・コメント方針・npm workspaces 依存ルール)
|
|
108
|
+
2. 品質(YAGNI・Rule of Three・過剰設計の排除)
|
|
109
|
+
3. セキュリティ(IDOR・XSS・SQLi・認可漏れ・URLパラメータ信頼)
|
|
110
|
+
4. レスポンシブ / アクセシビリティ
|
|
111
|
+
5. STDD 整合性(Spec → Test → 実装のフロー痕跡)
|
|
112
|
+
|
|
113
|
+
## 主な変更ファイル
|
|
114
|
+
<gh pr view の files 結果を貼り付け>
|
|
115
|
+
|
|
116
|
+
## 報告形式
|
|
117
|
+
Critical / Major / Minor で分類し、ファイル:行で指摘。マージ可否判定と総括を <文字数制限> 字以内で。
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
### 4.3 並列起動時の工夫
|
|
121
|
+
|
|
122
|
+
- 両エージェントは独立作業のため、どちらかを `run_in_background: true` にして、もう一方が完了してから結果を束ねてもよい
|
|
123
|
+
- ただし**片方ずつ起動するのは禁止**(並列化のメリットが消える)。1回のメッセージで2つの Agent tool use を含めること
|
|
124
|
+
|
|
125
|
+
## 5. 結果の統合・報告
|
|
126
|
+
|
|
127
|
+
両エージェントのレポートを受け取ったら、重複や類似の指摘をまとめ、以下の形式でユーザーに報告する:
|
|
128
|
+
|
|
129
|
+
```
|
|
130
|
+
## PR #<番号> マルチレビュー結果
|
|
131
|
+
|
|
132
|
+
### テスト結果(qa-engineer)
|
|
133
|
+
- <app名>: X passed / Y skipped / Z failed
|
|
134
|
+
|
|
135
|
+
### Critical(両エージェント合算)
|
|
136
|
+
- (無ければ「なし」)
|
|
137
|
+
|
|
138
|
+
### Major
|
|
139
|
+
- [QA] <指摘内容>(<ファイル:行>)
|
|
140
|
+
- [CR] <指摘内容>(<ファイル:行>)
|
|
141
|
+
|
|
142
|
+
### Minor(概要のみ)
|
|
143
|
+
- QA: N件(詳細はエージェント返答参照)
|
|
144
|
+
- CR: N件
|
|
145
|
+
|
|
146
|
+
### 総合判定
|
|
147
|
+
- <PASS / 要修正 / ブロッカーあり> の判断を明示
|
|
148
|
+
- マージ前に必ず対処すべきもののチェックリスト
|
|
149
|
+
```
|
|
150
|
+
|
|
151
|
+
Critical / Major が残っている場合は「マージ前に対処が必要」と明確に伝え、Minor のみであれば「マージ可能(後続対応可)」の判断を明示する。判断はユーザーの最終決定に委ねるが、推奨は伝える。
|
|
152
|
+
|
|
153
|
+
## 注意事項
|
|
154
|
+
|
|
155
|
+
- **独自の判定ロジックは書かない**: 本スキルは `qa-engineer` / `code-reviewer` エージェントへのラッパーであり、評価は各エージェントに委ねる
|
|
156
|
+
- **並列起動を徹底**: 同一メッセージで2つ起動しないと時間を無駄にする
|
|
157
|
+
- **devcontainer コマンドは先頭から**: `devcontainer exec ...` で始めること。変数代入を先頭に置くとパーミッション承認を都度求められる
|
|
158
|
+
- **複合コマンド禁止**: `&&` や `;` を使った複合 Bash コマンドは避ける(プロジェクトの pre-bash-check.sh でブロックされる)
|
|
159
|
+
- 既存PRがない状態で呼ばれたら `create-pr` スキルを案内して停止する
|
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: searching-existing-solutions
|
|
3
|
+
description: |-
|
|
4
|
+
実装前に既存ソリューションを調査する「車輪の再発明防止」ワークフロー。npm パッケージ、Supabase 組み込み機能、プロジェクト内の既存コードを調査してから実装を開始する。
|
|
5
|
+
when_to_use: |-
|
|
6
|
+
「実装」「新機能」「ライブラリ」「パッケージ」「自前実装」「ユーティリティ」「ヘルパー」など、コードを書き始める前のとき。
|
|
7
|
+
allowed-tools: Read, Grep, Glob, Bash
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
# 既存ソリューション調査(車輪の再発明防止)
|
|
11
|
+
|
|
12
|
+
コードを書く前に既存のソリューションを調査し、車輪の再発明を防止するワークフロー。
|
|
13
|
+
|
|
14
|
+
## 原則
|
|
15
|
+
|
|
16
|
+
**実装を始める前に、以下の順序で既存ソリューションを調査すること:**
|
|
17
|
+
|
|
18
|
+
1. プロジェクト内に同等の実装が既にないか
|
|
19
|
+
2. 使用中の依存パッケージに該当機能がないか
|
|
20
|
+
3. 信頼性の高いnpmパッケージで解決できないか
|
|
21
|
+
4. Supabaseの組み込み機能で解決できないか
|
|
22
|
+
|
|
23
|
+
## 5段階調査ワークフロー
|
|
24
|
+
|
|
25
|
+
### Stage 1: プロジェクト内検索
|
|
26
|
+
|
|
27
|
+
既存コードベースに同等機能がないか確認する。
|
|
28
|
+
|
|
29
|
+
```
|
|
30
|
+
検索対象(.stdd.config.yml の apps[] を読み、各 apps[].path について繰り返す):
|
|
31
|
+
- <apps[].path>/lib/ — ユーティリティ・ヘルパー関数
|
|
32
|
+
- packages/shared/ — 共有コード(モノレポの共有パッケージがある場合)
|
|
33
|
+
- <apps[].path>/domain/service/ — ビジネスロジック
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
**チェックポイント**:
|
|
37
|
+
- [ ] 同名・類似名の関数/コンポーネントが存在しないか
|
|
38
|
+
- [ ] 類似の処理を行っているファイルがないか
|
|
39
|
+
- [ ] `packages/shared/` に共通化済みのコードがないか
|
|
40
|
+
|
|
41
|
+
### Stage 2: 依存パッケージの機能確認
|
|
42
|
+
|
|
43
|
+
現在の`package.json`に含まれるパッケージの機能を確認する。
|
|
44
|
+
|
|
45
|
+
```
|
|
46
|
+
よく見落とされるパッケージ機能:
|
|
47
|
+
- date-fns: 日付フォーマット・計算(自前のDate操作は禁止)
|
|
48
|
+
- zod: バリデーション(自前のバリデーション関数は禁止)
|
|
49
|
+
- next/: Next.js組み込み機能(Image, Link, Font, Metadata等)
|
|
50
|
+
- @supabase/supabase-js: Supabaseクライアントの組み込みメソッド
|
|
51
|
+
- react-hook-form: フォーム状態管理(自前のフォーム管理は禁止)
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
### Stage 3: Supabase組み込み機能の確認
|
|
55
|
+
|
|
56
|
+
Supabaseが提供する機能で解決できないか確認する。
|
|
57
|
+
|
|
58
|
+
```
|
|
59
|
+
見落としやすいSupabase機能:
|
|
60
|
+
- RLS (Row Level Security): アクセス制御はRLSで実装
|
|
61
|
+
- Database Functions: 複雑なクエリはDB関数で
|
|
62
|
+
- Storage: ファイル管理はSupabase Storageで
|
|
63
|
+
- Auth: 認証フローはSupabase Authで
|
|
64
|
+
- Realtime: リアルタイム更新はSupabase Realtimeで
|
|
65
|
+
- Edge Functions: サーバーサイド処理はEdge Functionsで
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
### Stage 4: npmパッケージの調査
|
|
69
|
+
|
|
70
|
+
自前実装の前に、広く使われている信頼性の高いパッケージがないか確認する。
|
|
71
|
+
|
|
72
|
+
**採用基準**:
|
|
73
|
+
- 週間ダウンロード数が10万以上
|
|
74
|
+
- メンテナンスが活発(直近6ヶ月以内のリリース)
|
|
75
|
+
- TypeScript型定義が含まれている
|
|
76
|
+
- バンドルサイズが妥当
|
|
77
|
+
|
|
78
|
+
**注意**: npm workspaces依存管理ルール(CLAUDE.md参照)に従い、適切なpackage.jsonに追加すること。
|
|
79
|
+
|
|
80
|
+
### Stage 5: 自前実装の判断
|
|
81
|
+
|
|
82
|
+
上記すべてで適切なソリューションが見つからない場合のみ、自前実装を行う。
|
|
83
|
+
|
|
84
|
+
**自前実装が許容されるケース**:
|
|
85
|
+
- プロジェクト固有のビジネスロジック
|
|
86
|
+
- 既存パッケージでは要件を満たせない
|
|
87
|
+
- セキュリティ上の理由で外部依存を避ける必要がある
|
|
88
|
+
|
|
89
|
+
## アンチパターン
|
|
90
|
+
|
|
91
|
+
### やってはいけないこと
|
|
92
|
+
|
|
93
|
+
1. **日付操作の自前実装**: `date-fns`を使う
|
|
94
|
+
2. **バリデーション関数の自前実装**: `zod`スキーマを使う
|
|
95
|
+
3. **HTTPクライアントの自前ラッパー**: `fetch`または既存のクライアントを使う
|
|
96
|
+
4. **認証ロジックの自前実装**: Supabase Auth / NextAuthを使う
|
|
97
|
+
5. **ファイルアップロードの自前実装**: Supabase Storageを使う
|
|
98
|
+
6. **既存utility関数の重複作成**: `lib/`を検索して既存実装を再利用する
|
|
99
|
+
|
|
100
|
+
## 出力テンプレート
|
|
101
|
+
|
|
102
|
+
調査結果は以下のフォーマットで簡潔に記録する:
|
|
103
|
+
|
|
104
|
+
```
|
|
105
|
+
## Search-First 調査結果
|
|
106
|
+
- プロジェクト内: [既存実装あり/なし] — [詳細]
|
|
107
|
+
- 依存パッケージ: [利用可能/不可] — [パッケージ名・機能]
|
|
108
|
+
- Supabase機能: [利用可能/不可] — [機能名]
|
|
109
|
+
- 判断: [既存利用 / パッケージ追加 / 自前実装]
|
|
110
|
+
```
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: setup-stdd
|
|
3
|
+
description: |-
|
|
4
|
+
STDD の導入入口(ルーター)。「STDD を導入して / 始めて / セットアップして」と言われたとき最初に起動し、対象プロジェクトが新規(コードがまだ無い)か既存(稼働コードがある)かを自動判定して、適切な駆動スキル(新規=starting-new-with-stdd / 既存=introducing-stdd)へ委譲する薄いディスパッチャ。再開中の導入PLAN/立ち上げPLANがあればそれを優先して続きから再開する。判定はユーザーに一言確認してから委譲する。
|
|
5
|
+
when_to_use: |-
|
|
6
|
+
「STDDを導入して」「STDDを始めて」「STDDをセットアップ」「STDDを使い始める」「setup stdd」「start stdd」「stddを入れて」など、どちらのフローか未確定のままSTDD導入を頼まれた最初のとき。新規/既存が明確で続きから進める場合は starting-new-with-stdd / introducing-stdd を直接使う。
|
|
7
|
+
allowed-tools: Read, Glob, Grep, Bash, Skill
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
# STDD 導入ルーター
|
|
11
|
+
|
|
12
|
+
「STDD を導入して」と言われたときの**最初の受け口**。対象プロジェクトを調べ、
|
|
13
|
+
**新規(コードなし)** か **既存(稼働コードあり)** かを判定し、適切な駆動スキルへ委譲する。
|
|
14
|
+
自分自身は spec を書いたり実装したりせず、判定と委譲だけを行う薄い役割。
|
|
15
|
+
|
|
16
|
+
---
|
|
17
|
+
|
|
18
|
+
## 手順
|
|
19
|
+
|
|
20
|
+
### 1. 再開中の PLAN を最優先で確認
|
|
21
|
+
|
|
22
|
+
すでに導入/立ち上げが始まっている場合は、続きから再開する。次が存在するか確認する:
|
|
23
|
+
|
|
24
|
+
```
|
|
25
|
+
□ docs/common/plans/stdd-introduction.md がある → 既存フロー継続 → introducing-stdd へ
|
|
26
|
+
□ docs/common/plans/stdd-bootstrap.md がある → 新規フロー継続 → starting-new-with-stdd へ
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
どちらかがあれば、ユーザーに「導入を途中から再開します」と伝えて該当スキルへ委譲し、以降の判定はスキップする。
|
|
30
|
+
|
|
31
|
+
### 2. 新規 / 既存 を判定
|
|
32
|
+
|
|
33
|
+
PLAN が無ければ、リポジトリにアプリケーションのソースコードが実在するかで判定する。
|
|
34
|
+
|
|
35
|
+
```
|
|
36
|
+
□ アプリのソース(src / app / pages / packages の実装ファイル等)が実在するか
|
|
37
|
+
□ package.json の dependencies に実プロダクトの依存があるか(雛形のみではないか)
|
|
38
|
+
□ git 履歴に機能実装のコミットがあるか
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
判定基準:
|
|
42
|
+
- **コードが実質ゼロ**(空ディレクトリ、または README / `.stdd.config.yml` / `.claude/` / `docs/` の雛形だけ)→ **新規**
|
|
43
|
+
- **アプリのソースが存在する**(既に動く機能がある)→ **既存**
|
|
44
|
+
|
|
45
|
+
判定材料の集め方の例:
|
|
46
|
+
|
|
47
|
+
```bash
|
|
48
|
+
# .git / node_modules / .claude / docs / 設定ファイルを除いた実ソースの有無をざっと見る
|
|
49
|
+
git ls-files 2>/dev/null | grep -vE '^(\.claude/|docs/|\.stdd\.config\.yml|README|LICENSE|\.gitignore)' | head -50
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
### 3. ユーザーに確認してから委譲
|
|
53
|
+
|
|
54
|
+
判定結果を一言で伝え、合っているか確認してから委譲する(誤判定を防ぐ)。
|
|
55
|
+
|
|
56
|
+
- 例(既存): 「アプリのソースを検出しました。**既存プロジェクトへの導入**として進めます。よいですか?」
|
|
57
|
+
- 例(新規): 「コードはまだ無いようです。**新規プロジェクトの立ち上げ**として進めます。よいですか?」
|
|
58
|
+
|
|
59
|
+
確認が取れたら、対応する駆動スキルを起動する:
|
|
60
|
+
|
|
61
|
+
| 判定 | 委譲先スキル |
|
|
62
|
+
| --- | --- |
|
|
63
|
+
| 新規(コードなし) | `starting-new-with-stdd` |
|
|
64
|
+
| 既存(コードあり) | `introducing-stdd` |
|
|
65
|
+
|
|
66
|
+
委譲後は、そのスキルが以降のフロー(spec 生成・フォーマット策定・機能ループ等)を駆動する。
|
|
67
|
+
|
|
68
|
+
---
|
|
69
|
+
|
|
70
|
+
## 前提
|
|
71
|
+
|
|
72
|
+
- このスキルは `stdd init`(`.claude/` と `.stdd.config.yml` の配置)が済んだプロジェクトで使う想定。
|
|
73
|
+
`.stdd.config.yml` が無い場合は、まず `npx @careerchain/stdd init` を案内する。
|
|
74
|
+
- 判定がどうしても曖昧な場合は決め打ちせず、ユーザーにどちらで進めるか尋ねる。
|
|
75
|
+
|
|
76
|
+
---
|
|
77
|
+
|
|
78
|
+
## When NOT to Use This Skill
|
|
79
|
+
|
|
80
|
+
- **新規/既存が明確で続きから進めたい**: `starting-new-with-stdd` / `introducing-stdd` を直接呼ぶ。
|
|
81
|
+
- **単一機能のリバースだけしたい**: `reverse-engineering-feature-spec` を直接使う。
|
|
82
|
+
- **個別機能の新規実装**: `auto-implement`(順行 STDD)を使う。
|