@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,480 @@
|
|
|
1
|
+
<!--
|
|
2
|
+
screen.html — 1 画面ぶんのワイヤーフレーム ひな型
|
|
3
|
+
|
|
4
|
+
使い方:
|
|
5
|
+
- このファイルを docs/<app>/<feature_path>/wireframes/<screen>.html としてコピーする。
|
|
6
|
+
- <head> の <style> がデザインシステム本体。CSS 単体ファイルは作らず、この <style> ごと自己完結させる。
|
|
7
|
+
- <title> と .wf-screen-label に「画面名 / 状態名」を実値で入れる。
|
|
8
|
+
- 不要なブロックは削除し、必要なコンポーネント(wf-*)を組み合わせる。
|
|
9
|
+
- タイトル・ボタン文言・項目ラベルは必ず実値(プレースホルダではなく合意済みの文言)を入れる。
|
|
10
|
+
-->
|
|
11
|
+
<!DOCTYPE html>
|
|
12
|
+
<html lang="ja">
|
|
13
|
+
<head>
|
|
14
|
+
<meta charset="UTF-8" />
|
|
15
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
16
|
+
<title>[画面名] - ワイヤーフレーム</title>
|
|
17
|
+
<style>
|
|
18
|
+
/*
|
|
19
|
+
* wireframe.css — STDD 汎用ワイヤーフレーム デザインシステム
|
|
20
|
+
*
|
|
21
|
+
* 目的:
|
|
22
|
+
* 低忠実度(low-fidelity)のワイヤーフレームを、技術スタック非依存の
|
|
23
|
+
* 素の HTML + CSS で表現するための共通スタイル。
|
|
24
|
+
*
|
|
25
|
+
* 方針:
|
|
26
|
+
* - グレースケール基調。ブランドカラー・装飾は持たない(実装の自由度を縛らない)。
|
|
27
|
+
* - レイアウト・情報設計・主要文言(タイトル / ボタン / 項目ラベル)の合意形成に用いる。
|
|
28
|
+
* - モバイルファースト。768px 以上でデスクトップレイアウトに展開する。
|
|
29
|
+
* - 各画面 HTML の <head> 内に <style> として直接埋め込む(CSS 単体ファイルは作らない / 自己完結 HTML)。
|
|
30
|
+
*
|
|
31
|
+
* 使い方:
|
|
32
|
+
* components の各クラス(wf-*)を組み合わせて画面を組む。
|
|
33
|
+
* クラス一覧は同ディレクトリの SKILL.md / templates/screen.html を参照。
|
|
34
|
+
*/
|
|
35
|
+
|
|
36
|
+
/* ===== Reset / Base ===== */
|
|
37
|
+
* {
|
|
38
|
+
box-sizing: border-box;
|
|
39
|
+
margin: 0;
|
|
40
|
+
padding: 0;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
:root {
|
|
44
|
+
--wf-ink: #2b2b2b; /* 主要テキスト */
|
|
45
|
+
--wf-muted: #777; /* 補助テキスト・プレースホルダ */
|
|
46
|
+
--wf-line: #c9c9c9; /* 枠線 */
|
|
47
|
+
--wf-fill: #f2f2f2; /* 面(薄) */
|
|
48
|
+
--wf-fill-2: #e4e4e4; /* 面(中) */
|
|
49
|
+
--wf-fill-3: #d2d2d2; /* 面(濃)/ primary ボタン */
|
|
50
|
+
--wf-bg: #ffffff;
|
|
51
|
+
--wf-radius: 4px;
|
|
52
|
+
--wf-gap: 12px;
|
|
53
|
+
--wf-pad: 16px;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
body {
|
|
57
|
+
font-family: -apple-system, "Segoe UI", "Noto Sans JP", "Hiragino Sans", sans-serif;
|
|
58
|
+
color: var(--wf-ink);
|
|
59
|
+
background: #eaeaea;
|
|
60
|
+
line-height: 1.5;
|
|
61
|
+
font-size: 14px;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
/* ===== ラベル(画面名・状態名の注記) ===== */
|
|
65
|
+
.wf-screen-label {
|
|
66
|
+
max-width: 1100px;
|
|
67
|
+
margin: 16px auto 0;
|
|
68
|
+
padding: 0 16px;
|
|
69
|
+
font-size: 12px;
|
|
70
|
+
color: var(--wf-muted);
|
|
71
|
+
letter-spacing: 0.04em;
|
|
72
|
+
}
|
|
73
|
+
.wf-screen-label strong {
|
|
74
|
+
color: var(--wf-ink);
|
|
75
|
+
font-size: 13px;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
/* ===== Page shell ===== */
|
|
79
|
+
.wf-page {
|
|
80
|
+
max-width: 1100px;
|
|
81
|
+
margin: 8px auto 32px;
|
|
82
|
+
background: var(--wf-bg);
|
|
83
|
+
border: 1px solid var(--wf-line);
|
|
84
|
+
border-radius: var(--wf-radius);
|
|
85
|
+
overflow: hidden;
|
|
86
|
+
}
|
|
87
|
+
/* モバイル枠(幅 390px 固定)でプレビューしたい場合に付与 */
|
|
88
|
+
.wf-page--mobile {
|
|
89
|
+
max-width: 390px;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
/* ===== Header(グローバルヘッダー) ===== */
|
|
93
|
+
.wf-header {
|
|
94
|
+
display: flex;
|
|
95
|
+
align-items: center;
|
|
96
|
+
gap: var(--wf-gap);
|
|
97
|
+
padding: 12px var(--wf-pad);
|
|
98
|
+
border-bottom: 1px solid var(--wf-line);
|
|
99
|
+
background: var(--wf-fill);
|
|
100
|
+
}
|
|
101
|
+
.wf-header__logo {
|
|
102
|
+
font-weight: 700;
|
|
103
|
+
padding: 6px 10px;
|
|
104
|
+
border: 1px solid var(--wf-line);
|
|
105
|
+
border-radius: var(--wf-radius);
|
|
106
|
+
background: var(--wf-bg);
|
|
107
|
+
}
|
|
108
|
+
.wf-header__nav {
|
|
109
|
+
display: flex;
|
|
110
|
+
gap: 16px;
|
|
111
|
+
flex-wrap: wrap;
|
|
112
|
+
color: var(--wf-muted);
|
|
113
|
+
}
|
|
114
|
+
.wf-header__spacer { flex: 1; }
|
|
115
|
+
|
|
116
|
+
/* ===== Body layout(サイドバー + メイン) ===== */
|
|
117
|
+
.wf-body {
|
|
118
|
+
display: flex;
|
|
119
|
+
min-height: 360px;
|
|
120
|
+
}
|
|
121
|
+
.wf-sidebar {
|
|
122
|
+
width: 200px;
|
|
123
|
+
flex-shrink: 0;
|
|
124
|
+
border-right: 1px solid var(--wf-line);
|
|
125
|
+
background: var(--wf-fill);
|
|
126
|
+
padding: var(--wf-pad);
|
|
127
|
+
}
|
|
128
|
+
.wf-sidebar__item {
|
|
129
|
+
padding: 8px 10px;
|
|
130
|
+
border-radius: var(--wf-radius);
|
|
131
|
+
color: var(--wf-muted);
|
|
132
|
+
}
|
|
133
|
+
.wf-sidebar__item--active {
|
|
134
|
+
background: var(--wf-fill-2);
|
|
135
|
+
color: var(--wf-ink);
|
|
136
|
+
font-weight: 600;
|
|
137
|
+
}
|
|
138
|
+
.wf-main {
|
|
139
|
+
flex: 1;
|
|
140
|
+
padding: var(--wf-pad);
|
|
141
|
+
min-width: 0;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
/* モバイル: サイドバーは隠してハンバーガー前提(注記用ダミー) */
|
|
145
|
+
@media (max-width: 767px) {
|
|
146
|
+
.wf-sidebar { display: none; }
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
/* ===== 見出し / パンくず / タブ ===== */
|
|
150
|
+
.wf-breadcrumb {
|
|
151
|
+
color: var(--wf-muted);
|
|
152
|
+
font-size: 12px;
|
|
153
|
+
margin-bottom: 8px;
|
|
154
|
+
}
|
|
155
|
+
.wf-title {
|
|
156
|
+
font-size: 20px;
|
|
157
|
+
font-weight: 700;
|
|
158
|
+
margin-bottom: 4px;
|
|
159
|
+
}
|
|
160
|
+
.wf-subtitle {
|
|
161
|
+
color: var(--wf-muted);
|
|
162
|
+
margin-bottom: var(--wf-pad);
|
|
163
|
+
}
|
|
164
|
+
.wf-tabs {
|
|
165
|
+
display: flex;
|
|
166
|
+
gap: 4px;
|
|
167
|
+
border-bottom: 1px solid var(--wf-line);
|
|
168
|
+
margin-bottom: var(--wf-pad);
|
|
169
|
+
}
|
|
170
|
+
.wf-tabs__item {
|
|
171
|
+
padding: 8px 14px;
|
|
172
|
+
color: var(--wf-muted);
|
|
173
|
+
border: 1px solid transparent;
|
|
174
|
+
border-bottom: none;
|
|
175
|
+
}
|
|
176
|
+
.wf-tabs__item--active {
|
|
177
|
+
color: var(--wf-ink);
|
|
178
|
+
font-weight: 600;
|
|
179
|
+
border-color: var(--wf-line);
|
|
180
|
+
border-radius: var(--wf-radius) var(--wf-radius) 0 0;
|
|
181
|
+
background: var(--wf-fill);
|
|
182
|
+
margin-bottom: -1px;
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
/* ===== ツールバー(件数 + アクション) ===== */
|
|
186
|
+
.wf-toolbar {
|
|
187
|
+
display: flex;
|
|
188
|
+
align-items: center;
|
|
189
|
+
gap: var(--wf-gap);
|
|
190
|
+
flex-wrap: wrap;
|
|
191
|
+
margin-bottom: var(--wf-pad);
|
|
192
|
+
}
|
|
193
|
+
.wf-toolbar__spacer { flex: 1; }
|
|
194
|
+
.wf-count { color: var(--wf-muted); }
|
|
195
|
+
|
|
196
|
+
/* ===== 検索 / フィルタ ===== */
|
|
197
|
+
.wf-search {
|
|
198
|
+
border: 1px solid var(--wf-line);
|
|
199
|
+
border-radius: var(--wf-radius);
|
|
200
|
+
margin-bottom: var(--wf-pad);
|
|
201
|
+
overflow: hidden;
|
|
202
|
+
}
|
|
203
|
+
.wf-search__head {
|
|
204
|
+
padding: 8px var(--wf-pad);
|
|
205
|
+
background: var(--wf-fill-2);
|
|
206
|
+
font-weight: 600;
|
|
207
|
+
}
|
|
208
|
+
.wf-search__body {
|
|
209
|
+
padding: var(--wf-pad);
|
|
210
|
+
display: grid;
|
|
211
|
+
grid-template-columns: 1fr;
|
|
212
|
+
gap: var(--wf-gap);
|
|
213
|
+
}
|
|
214
|
+
@media (min-width: 768px) {
|
|
215
|
+
.wf-search__body { grid-template-columns: 1fr 1fr; }
|
|
216
|
+
}
|
|
217
|
+
.wf-search__actions {
|
|
218
|
+
grid-column: 1 / -1;
|
|
219
|
+
display: flex;
|
|
220
|
+
justify-content: flex-end;
|
|
221
|
+
gap: 8px;
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
/* ===== Form / Field ===== */
|
|
225
|
+
.wf-form {
|
|
226
|
+
display: grid;
|
|
227
|
+
grid-template-columns: 1fr;
|
|
228
|
+
gap: var(--wf-gap);
|
|
229
|
+
}
|
|
230
|
+
@media (min-width: 768px) {
|
|
231
|
+
.wf-form--2col { grid-template-columns: 1fr 1fr; }
|
|
232
|
+
}
|
|
233
|
+
.wf-field { display: flex; flex-direction: column; gap: 4px; }
|
|
234
|
+
.wf-field--full { grid-column: 1 / -1; }
|
|
235
|
+
.wf-label { font-size: 12px; color: var(--wf-ink); font-weight: 600; }
|
|
236
|
+
.wf-label--required::after { content: " *"; color: var(--wf-muted); }
|
|
237
|
+
.wf-input,
|
|
238
|
+
.wf-select,
|
|
239
|
+
.wf-textarea {
|
|
240
|
+
border: 1px solid var(--wf-line);
|
|
241
|
+
border-radius: var(--wf-radius);
|
|
242
|
+
background: var(--wf-bg);
|
|
243
|
+
padding: 8px 10px;
|
|
244
|
+
color: var(--wf-muted);
|
|
245
|
+
min-height: 36px;
|
|
246
|
+
}
|
|
247
|
+
.wf-textarea { min-height: 88px; }
|
|
248
|
+
/* セレクトのプルダウン矢印は HTML 側に「▾」を明示的に書く(例: <span class="wf-select">すべて ▾</span>) */
|
|
249
|
+
.wf-help { font-size: 11px; color: var(--wf-muted); }
|
|
250
|
+
.wf-error { font-size: 11px; color: var(--wf-ink); font-weight: 600; }
|
|
251
|
+
|
|
252
|
+
/* ===== Buttons ===== */
|
|
253
|
+
.wf-button {
|
|
254
|
+
display: inline-flex;
|
|
255
|
+
align-items: center;
|
|
256
|
+
justify-content: center;
|
|
257
|
+
gap: 6px;
|
|
258
|
+
min-height: 36px;
|
|
259
|
+
padding: 8px 16px;
|
|
260
|
+
border: 1px solid var(--wf-line);
|
|
261
|
+
border-radius: var(--wf-radius);
|
|
262
|
+
background: var(--wf-bg);
|
|
263
|
+
color: var(--wf-ink);
|
|
264
|
+
font: inherit;
|
|
265
|
+
cursor: default;
|
|
266
|
+
}
|
|
267
|
+
.wf-button--primary { background: var(--wf-fill-3); font-weight: 600; }
|
|
268
|
+
.wf-button--ghost { border-color: transparent; color: var(--wf-muted); }
|
|
269
|
+
.wf-button--sm { min-height: 28px; padding: 4px 10px; font-size: 12px; }
|
|
270
|
+
|
|
271
|
+
/* ===== Table ===== */
|
|
272
|
+
.wf-table-wrap {
|
|
273
|
+
border: 1px solid var(--wf-line);
|
|
274
|
+
border-radius: var(--wf-radius);
|
|
275
|
+
overflow-x: auto;
|
|
276
|
+
}
|
|
277
|
+
.wf-table {
|
|
278
|
+
width: 100%;
|
|
279
|
+
border-collapse: collapse;
|
|
280
|
+
min-width: 640px;
|
|
281
|
+
}
|
|
282
|
+
.wf-table th,
|
|
283
|
+
.wf-table td {
|
|
284
|
+
text-align: left;
|
|
285
|
+
padding: 10px 12px;
|
|
286
|
+
border-bottom: 1px solid var(--wf-line);
|
|
287
|
+
white-space: nowrap;
|
|
288
|
+
}
|
|
289
|
+
.wf-table thead th {
|
|
290
|
+
background: var(--wf-fill-2);
|
|
291
|
+
font-weight: 600;
|
|
292
|
+
}
|
|
293
|
+
.wf-table tbody tr:last-child td { border-bottom: none; }
|
|
294
|
+
.wf-table td.wf-td--muted { color: var(--wf-muted); }
|
|
295
|
+
|
|
296
|
+
/* ===== Cards / Grid ===== */
|
|
297
|
+
.wf-grid {
|
|
298
|
+
display: grid;
|
|
299
|
+
grid-template-columns: 1fr;
|
|
300
|
+
gap: var(--wf-gap);
|
|
301
|
+
}
|
|
302
|
+
@media (min-width: 768px) { .wf-grid--2 { grid-template-columns: repeat(2, 1fr); } }
|
|
303
|
+
@media (min-width: 1024px) { .wf-grid--3 { grid-template-columns: repeat(3, 1fr); } }
|
|
304
|
+
.wf-card {
|
|
305
|
+
border: 1px solid var(--wf-line);
|
|
306
|
+
border-radius: var(--wf-radius);
|
|
307
|
+
padding: var(--wf-pad);
|
|
308
|
+
background: var(--wf-bg);
|
|
309
|
+
display: flex;
|
|
310
|
+
flex-direction: column;
|
|
311
|
+
gap: 6px;
|
|
312
|
+
}
|
|
313
|
+
.wf-card__title { font-weight: 600; }
|
|
314
|
+
.wf-card__meta { color: var(--wf-muted); font-size: 12px; }
|
|
315
|
+
|
|
316
|
+
/* ===== Kanban ===== */
|
|
317
|
+
.wf-kanban {
|
|
318
|
+
display: grid;
|
|
319
|
+
grid-template-columns: 1fr;
|
|
320
|
+
gap: var(--wf-gap);
|
|
321
|
+
}
|
|
322
|
+
@media (min-width: 768px) {
|
|
323
|
+
.wf-kanban--3 { grid-template-columns: repeat(3, 1fr); }
|
|
324
|
+
}
|
|
325
|
+
.wf-kanban__col {
|
|
326
|
+
background: var(--wf-fill);
|
|
327
|
+
border: 1px solid var(--wf-line);
|
|
328
|
+
border-radius: var(--wf-radius);
|
|
329
|
+
padding: 10px;
|
|
330
|
+
display: flex;
|
|
331
|
+
flex-direction: column;
|
|
332
|
+
gap: 10px;
|
|
333
|
+
}
|
|
334
|
+
.wf-kanban__head { font-weight: 600; }
|
|
335
|
+
|
|
336
|
+
/* ===== Tag / Badge ===== */
|
|
337
|
+
.wf-tag {
|
|
338
|
+
display: inline-block;
|
|
339
|
+
padding: 2px 8px;
|
|
340
|
+
border: 1px solid var(--wf-line);
|
|
341
|
+
border-radius: 999px;
|
|
342
|
+
font-size: 11px;
|
|
343
|
+
color: var(--wf-muted);
|
|
344
|
+
background: var(--wf-fill);
|
|
345
|
+
}
|
|
346
|
+
|
|
347
|
+
/* ===== Placeholder(画像 / アバター) ===== */
|
|
348
|
+
.wf-img {
|
|
349
|
+
position: relative;
|
|
350
|
+
background: var(--wf-fill);
|
|
351
|
+
border: 1px solid var(--wf-line);
|
|
352
|
+
border-radius: var(--wf-radius);
|
|
353
|
+
min-height: 96px;
|
|
354
|
+
}
|
|
355
|
+
.wf-img::after {
|
|
356
|
+
content: "";
|
|
357
|
+
position: absolute;
|
|
358
|
+
inset: 0;
|
|
359
|
+
background:
|
|
360
|
+
linear-gradient(to top right, transparent calc(50% - 1px), var(--wf-line), transparent calc(50% + 1px)),
|
|
361
|
+
linear-gradient(to top left, transparent calc(50% - 1px), var(--wf-line), transparent calc(50% + 1px));
|
|
362
|
+
}
|
|
363
|
+
.wf-avatar {
|
|
364
|
+
width: 40px;
|
|
365
|
+
height: 40px;
|
|
366
|
+
border-radius: 999px;
|
|
367
|
+
background: var(--wf-fill-2);
|
|
368
|
+
border: 1px solid var(--wf-line);
|
|
369
|
+
flex-shrink: 0;
|
|
370
|
+
}
|
|
371
|
+
|
|
372
|
+
/* ===== Pagination ===== */
|
|
373
|
+
.wf-pagination {
|
|
374
|
+
display: flex;
|
|
375
|
+
justify-content: center;
|
|
376
|
+
gap: 4px;
|
|
377
|
+
margin-top: var(--wf-pad);
|
|
378
|
+
}
|
|
379
|
+
.wf-pagination__item {
|
|
380
|
+
min-width: 32px;
|
|
381
|
+
min-height: 32px;
|
|
382
|
+
display: inline-flex;
|
|
383
|
+
align-items: center;
|
|
384
|
+
justify-content: center;
|
|
385
|
+
border: 1px solid var(--wf-line);
|
|
386
|
+
border-radius: var(--wf-radius);
|
|
387
|
+
color: var(--wf-muted);
|
|
388
|
+
}
|
|
389
|
+
.wf-pagination__item--active {
|
|
390
|
+
background: var(--wf-fill-2);
|
|
391
|
+
color: var(--wf-ink);
|
|
392
|
+
font-weight: 600;
|
|
393
|
+
}
|
|
394
|
+
|
|
395
|
+
/* ===== 空状態 / エラー状態 ===== */
|
|
396
|
+
.wf-empty {
|
|
397
|
+
border: 1px dashed var(--wf-line);
|
|
398
|
+
border-radius: var(--wf-radius);
|
|
399
|
+
padding: 40px var(--wf-pad);
|
|
400
|
+
text-align: center;
|
|
401
|
+
color: var(--wf-muted);
|
|
402
|
+
}
|
|
403
|
+
|
|
404
|
+
/* ===== Modal / Dialog(重ね表示はせず、注記付きで並置) ===== */
|
|
405
|
+
.wf-modal {
|
|
406
|
+
max-width: 480px;
|
|
407
|
+
margin: 0 auto;
|
|
408
|
+
border: 1px solid var(--wf-line);
|
|
409
|
+
border-radius: var(--wf-radius);
|
|
410
|
+
background: var(--wf-bg);
|
|
411
|
+
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
|
412
|
+
}
|
|
413
|
+
.wf-modal__head {
|
|
414
|
+
padding: 12px var(--wf-pad);
|
|
415
|
+
border-bottom: 1px solid var(--wf-line);
|
|
416
|
+
font-weight: 600;
|
|
417
|
+
display: flex;
|
|
418
|
+
align-items: center;
|
|
419
|
+
}
|
|
420
|
+
.wf-modal__head .wf-toolbar__spacer { flex: 1; }
|
|
421
|
+
.wf-modal__body { padding: var(--wf-pad); display: grid; gap: var(--wf-gap); }
|
|
422
|
+
.wf-modal__foot {
|
|
423
|
+
padding: 12px var(--wf-pad);
|
|
424
|
+
border-top: 1px solid var(--wf-line);
|
|
425
|
+
display: flex;
|
|
426
|
+
justify-content: flex-end;
|
|
427
|
+
gap: 8px;
|
|
428
|
+
}
|
|
429
|
+
|
|
430
|
+
/* ===== 注記(インタラクション説明など) ===== */
|
|
431
|
+
.wf-note {
|
|
432
|
+
font-size: 11px;
|
|
433
|
+
color: var(--wf-muted);
|
|
434
|
+
border-left: 3px solid var(--wf-line);
|
|
435
|
+
padding: 2px 8px;
|
|
436
|
+
margin-top: 6px;
|
|
437
|
+
}
|
|
438
|
+
|
|
439
|
+
/* ===== ユーティリティ ===== */
|
|
440
|
+
.wf-row { display: flex; align-items: center; gap: var(--wf-gap); flex-wrap: wrap; }
|
|
441
|
+
.wf-stack { display: flex; flex-direction: column; gap: 8px; }
|
|
442
|
+
.wf-mt { margin-top: var(--wf-pad); }
|
|
443
|
+
.wf-muted { color: var(--wf-muted); }
|
|
444
|
+
</style>
|
|
445
|
+
</head>
|
|
446
|
+
<body>
|
|
447
|
+
<p class="wf-screen-label"><strong>[画面名]</strong> / 状態: [通常 / 空 / エラー など]</p>
|
|
448
|
+
|
|
449
|
+
<div class="wf-page">
|
|
450
|
+
<!-- グローバルヘッダー -->
|
|
451
|
+
<header class="wf-header">
|
|
452
|
+
<span class="wf-header__logo">[サービス名]</span>
|
|
453
|
+
<nav class="wf-header__nav">
|
|
454
|
+
<span>[ナビ1]</span>
|
|
455
|
+
<span>[ナビ2]</span>
|
|
456
|
+
</nav>
|
|
457
|
+
<span class="wf-header__spacer"></span>
|
|
458
|
+
<span class="wf-button wf-button--sm">[ユーザーメニュー]</span>
|
|
459
|
+
</header>
|
|
460
|
+
|
|
461
|
+
<div class="wf-body">
|
|
462
|
+
<!-- 管理画面などはサイドバー、toC で不要なら削除 -->
|
|
463
|
+
<aside class="wf-sidebar">
|
|
464
|
+
<div class="wf-sidebar__item wf-sidebar__item--active">[メニュー1]</div>
|
|
465
|
+
<div class="wf-sidebar__item">[メニュー2]</div>
|
|
466
|
+
<div class="wf-sidebar__item">[メニュー3]</div>
|
|
467
|
+
</aside>
|
|
468
|
+
|
|
469
|
+
<main class="wf-main">
|
|
470
|
+
<div class="wf-breadcrumb">[親] / [現在の画面]</div>
|
|
471
|
+
<h1 class="wf-title">[画面タイトル]</h1>
|
|
472
|
+
<p class="wf-subtitle">[画面の説明文(任意)]</p>
|
|
473
|
+
|
|
474
|
+
<!-- ここに wf-search / wf-table / wf-form / wf-grid / wf-kanban などを組む -->
|
|
475
|
+
|
|
476
|
+
</main>
|
|
477
|
+
</div>
|
|
478
|
+
</div>
|
|
479
|
+
</body>
|
|
480
|
+
</html>
|
|
@@ -0,0 +1,185 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: introducing-stdd
|
|
3
|
+
description: |-
|
|
4
|
+
既存(稼働中)プロジェクトへの STDD 導入を、Claude セッションで段階的に駆動する。導入ガイドに従い、共通spec生成→機能インベントリ→代表機能リバース→フォーマット策定→機能ループ→順行運用への移行までを、既存スキル(reverse-engineering-common-spec / reverse-engineering-feature-spec / auto-implement / verifying-consistency)を順に呼びながら進める。進捗は導入PLANで保持し、セッションを跨いで再開できる。単一機能のリバースのみなら reverse-engineering-feature-spec を直接使う。
|
|
5
|
+
when_to_use: |-
|
|
6
|
+
既存(稼働中)プロジェクトへの STDD 導入を進める/再開するとき。「既存プロジェクトにstddを入れる」「導入の続き」「導入ブートストラップ」など、既存フローと確定している場合。新規/既存が未確定の最初の入口は setup-stdd(ルーター)が判定して本スキルへ委譲する。
|
|
7
|
+
allowed-tools: Read, Write, Edit, Glob, Grep, Bash
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
# STDD 導入ドライバー(既存プロジェクト)
|
|
11
|
+
|
|
12
|
+
既存プロジェクトへの STDD 導入を、セッションで 1 ステップずつ進めるための**薄い駆動役**。
|
|
13
|
+
自前の実装ロジックは持たず、各ステップで**既存スキルを順に呼び**、人間判断ポイントで停止し、進捗を**導入PLAN**に記録する。
|
|
14
|
+
|
|
15
|
+
> 「なぜ」「各ステップで何を判断するか」は [`guide-for-existing-project.md`](../../../packages/core/docs/guide-for-existing-project.md) を参照。
|
|
16
|
+
> 本スキルはその operational な実行役。
|
|
17
|
+
|
|
18
|
+
## 設計方針(重要)
|
|
19
|
+
|
|
20
|
+
- **agent オーケストレーションはしない**。Claude がメインセッションで手順を進める軽量ドライバー。
|
|
21
|
+
- 導入は一度きり・判断主体のため、**人間を常にループに入れる**(フォーマット策定・優先順・粒度は必ず確認)。
|
|
22
|
+
- 状態は導入PLAN(`docs/common/plans/stdd-introduction.md`)にのみ持つ。本スキルはステートレス。
|
|
23
|
+
|
|
24
|
+
---
|
|
25
|
+
|
|
26
|
+
## 起動時の動作
|
|
27
|
+
|
|
28
|
+
### 1. 導入PLAN の有無を確認
|
|
29
|
+
|
|
30
|
+
```
|
|
31
|
+
docs/common/plans/stdd-introduction.md
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
- **無い場合 → 初回**: 下記「初回フロー」を実行し、導入PLAN を作成する。
|
|
35
|
+
- **ある場合 → 再開**: 導入PLAN を読み、最初の未チェック項目(`- [ ]`)を「次にやること」として提示し、該当ステップを実行する。
|
|
36
|
+
|
|
37
|
+
### 2. 設定確認
|
|
38
|
+
|
|
39
|
+
`.stdd.config.yml` を読み、`apps[]` / `docs.layout`(`common_requirements` / `common_architecture` 含む)を把握する。無ければ **step 0(対話的セットアップ)** を実行する(下記「step 0」詳細)。
|
|
40
|
+
|
|
41
|
+
---
|
|
42
|
+
|
|
43
|
+
## ステップ実行表
|
|
44
|
+
|
|
45
|
+
各ステップは「呼ぶスキル」と「停止して人間に確認すること」を持つ。
|
|
46
|
+
|
|
47
|
+
| step | 実行内容 | 呼ぶスキル | ★停止して確認 |
|
|
48
|
+
| ---- | -------- | ---------- | ------------- |
|
|
49
|
+
| 0 | `.stdd.config.yml` を対話的に作成(下記「step 0」詳細)/ テンプレ・skill 配置 | — | 構成(単一/複数アプリ・パス規約) |
|
|
50
|
+
| 1 | common ティア生成 | `reverse-engineering-common-spec` | 生成後の `<!-- 要確認 -->` 一覧 |
|
|
51
|
+
| 1.5 | 機能インベントリ + 優先順 → 導入PLAN へ記載 | — | ★ 機能一覧と優先順(P0 から) |
|
|
52
|
+
| 2 | 代表機能 1 つをリバース | `reverse-engineering-feature-spec` | ★ Spec 粒度・スコープ |
|
|
53
|
+
| 3-4 | フォーマット策定 → テンプレ特化 | `tailoring-spec-format` | ★★ フォーマット決定(テーラリング) |
|
|
54
|
+
| 5 | 残り機能を優先順でループ | `reverse-engineering-feature-spec` | ★ 機能ごとの粒度 |
|
|
55
|
+
| 6 | 順行運用へ移行 | `auto-implement`(以降) | 導入完了の確認 |
|
|
56
|
+
|
|
57
|
+
各機能リバース後は `verifying-consistency` で spec ⇔ test ⇔ 実装 の整合を確認する。
|
|
58
|
+
|
|
59
|
+
---
|
|
60
|
+
|
|
61
|
+
## 初回フロー(導入PLAN が無いとき)
|
|
62
|
+
|
|
63
|
+
1. **プロジェクト点検**: ディレクトリ構成・`package.json`・ルーティングをざっと把握。
|
|
64
|
+
2. **step 0(対話的セットアップ)**: `.stdd.config.yml` が無ければ、下記「step 0」手順で 点検 → 草案 → 確認 → 書き込み を対話的に行う。
|
|
65
|
+
3. **step 1 実行**: `reverse-engineering-common-spec` を呼び、common ティアを生成。`<!-- 要確認 -->` を一覧化して人間に提示。
|
|
66
|
+
4. **step 1.5(★人間判断)**: ルーティング・主要ドメインから機能を洗い出し、**優先順をユーザーと合意**。
|
|
67
|
+
5. **導入PLAN 生成**: `templates/introduction-plan.md` を雛形に `docs/common/plans/stdd-introduction.md` を作成し、機能を優先順で並べる。
|
|
68
|
+
6. 「次は step 2(代表機能のリバース)」を提示して停止。
|
|
69
|
+
|
|
70
|
+
---
|
|
71
|
+
|
|
72
|
+
## 再開フロー(導入PLAN があるとき)
|
|
73
|
+
|
|
74
|
+
1. 導入PLAN を読み、完了済み(`- [x]`)と未着手(`- [ ]`)を把握。
|
|
75
|
+
2. 最初の未着手項目を「次にやること」として 1 つ提示。
|
|
76
|
+
3. ユーザーの了承後、該当ステップのスキルを呼んで実行。
|
|
77
|
+
4. 完了したら導入PLAN の該当項目を `- [x]` に更新し、フォーマット決定があれば「決定ログ」に追記。
|
|
78
|
+
5. 次の未着手を提示して停止(**一度に 1 ステップ**。バッチ全自動にしない)。
|
|
79
|
+
|
|
80
|
+
---
|
|
81
|
+
|
|
82
|
+
## step 0: 対話的セットアップ(詳細)
|
|
83
|
+
|
|
84
|
+
`.stdd.config.yml` が無いときは、skill 自身が **点検 → 草案 → 確認 → 書き込み** を対話的に行う(サブスキルは呼ばない)。
|
|
85
|
+
|
|
86
|
+
### 0-1. リポジトリ点検(自動)
|
|
87
|
+
|
|
88
|
+
読み取って構成を推定する:
|
|
89
|
+
|
|
90
|
+
```
|
|
91
|
+
□ トップレベル構成 / package.json の workspaces → apps[] 候補(id・path)
|
|
92
|
+
- monorepo: workspaces 各エントリ、apps/* や packages/* 配下のアプリ
|
|
93
|
+
- 単一アプリ: ルート構成(id は project 名 または "web" 等)
|
|
94
|
+
□ package.json の scripts → commands(test / typecheck(tsc) / lint / format)
|
|
95
|
+
□ DB 型生成コマンド(例: supabase gen types)→ commands.db_types 候補
|
|
96
|
+
□ git のデフォルトブランチ → project.primary_branch
|
|
97
|
+
□ framework(next / remix / vite / sveltekit 等)→ apps[].framework
|
|
98
|
+
□ 既存 docs/ 構成 → docs.layout のパターン推定
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
### 0-2. 草案を提示
|
|
102
|
+
|
|
103
|
+
点検結果から `.stdd.config.yml` の草案を生成して提示する。先頭に `yaml-language-server` の schema ディレクティブを付ける。**推定できなかった項目は「要確認」として明示し、ユーザーに尋ねる**。
|
|
104
|
+
|
|
105
|
+
```yaml
|
|
106
|
+
# yaml-language-server: $schema=<schema の URL または相対パス>
|
|
107
|
+
project:
|
|
108
|
+
name: <推定>
|
|
109
|
+
primary_branch: <git のデフォルトブランチ>
|
|
110
|
+
apps:
|
|
111
|
+
- id: <推定> # ^[a-z][a-z0-9_-]*$
|
|
112
|
+
path: <推定>
|
|
113
|
+
commands:
|
|
114
|
+
typecheck: <推定>
|
|
115
|
+
test: <推定>
|
|
116
|
+
docs:
|
|
117
|
+
layout:
|
|
118
|
+
common_requirements: docs/common/REQUIREMENTS.md # common ティアを使う場合のみ
|
|
119
|
+
common_architecture: docs/common/ARCHITECTURE.md
|
|
120
|
+
requirements: docs/{{app.id}}/{{feature_path}}/REQUIREMENTS.md
|
|
121
|
+
tech_design: docs/{{app.id}}/{{feature_path}}/TECH_DESIGN.md
|
|
122
|
+
plan: docs/{{app.id}}/{{feature_path}}/plans/{{date}}.md
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
### 0-3. ★確認(停止)
|
|
126
|
+
|
|
127
|
+
書き込み前に、特に次をユーザーに確認する:
|
|
128
|
+
|
|
129
|
+
```
|
|
130
|
+
□ 単一 / 複数アプリ、各アプリの id・path
|
|
131
|
+
□ docs.layout のパス規約(単一アプリなら {{app.id}} を省く等の調整)
|
|
132
|
+
□ test / typecheck コマンドが実際に動くか
|
|
133
|
+
□ common ティアを使うか(使うなら common_requirements / common_architecture を含める)
|
|
134
|
+
□ worktree / devcontainer を使うか(workflow セクションを足すか)
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
### 0-4. 書き込み & 検証
|
|
138
|
+
|
|
139
|
+
- 合意後 `.stdd.config.yml` をリポジトリルートに書き込む。
|
|
140
|
+
- スキーマ検証(`packages/core/README.md`「JSON Schema のローカル検証」の手順):
|
|
141
|
+
```
|
|
142
|
+
npx -y js-yaml .stdd.config.yml > /tmp/stdd.json
|
|
143
|
+
npx -y ajv-cli validate -s packages/core/schema/.stdd.config.schema.json -d /tmp/stdd.json
|
|
144
|
+
```
|
|
145
|
+
- skill / agent / テンプレの配置(vendoring または参照)が未了なら案内する。
|
|
146
|
+
- 検証が通ったら step 1 へ進む。
|
|
147
|
+
|
|
148
|
+
### 完了条件
|
|
149
|
+
|
|
150
|
+
```
|
|
151
|
+
□ .stdd.config.yml が存在し schema 検証を通る
|
|
152
|
+
□ 後続ステップが参照する apps / commands / docs.layout が揃っている
|
|
153
|
+
```
|
|
154
|
+
|
|
155
|
+
> 配置は `npx @careerchain/stdd init`(カレントディレクトリに `.claude/` と `.stdd.config.yml` を導入)に委譲してよい。未導入なら step 0 はそれを案内する。
|
|
156
|
+
|
|
157
|
+
---
|
|
158
|
+
|
|
159
|
+
## 守ること
|
|
160
|
+
|
|
161
|
+
- **一度に 1 ステップ**。複数機能を無確認で連続処理しない。
|
|
162
|
+
- **★ポイントでは必ず停止**してユーザーに聞く(優先順・粒度・フォーマット)。
|
|
163
|
+
- 遡行フェーズでは「実装が真実」。推測で spec を書かない。
|
|
164
|
+
- 導入PLAN 以外に進捗・履歴を持たない(SSOT 原則。spec 本体に「今回」「変更前」等を書かない)。
|
|
165
|
+
|
|
166
|
+
---
|
|
167
|
+
|
|
168
|
+
## When NOT to Use This Skill
|
|
169
|
+
|
|
170
|
+
- **単一機能のリバースだけ**したい: `reverse-engineering-feature-spec` を直接使う
|
|
171
|
+
- **common ティアだけ**作りたい: `reverse-engineering-common-spec` を直接使う
|
|
172
|
+
- **新規機能を実装**したい(導入済みプロジェクト): `auto-implement` を使う
|
|
173
|
+
- **新規プロジェクト**(コードがまだ無い)の立ち上げ: `starting-new-with-stdd` を使う
|
|
174
|
+
|
|
175
|
+
---
|
|
176
|
+
|
|
177
|
+
## 参照ファイル
|
|
178
|
+
|
|
179
|
+
- **導入ガイド(なぜ/判断基準)**: [guide-for-existing-project.md](../../../packages/core/docs/guide-for-existing-project.md)
|
|
180
|
+
- **導入PLAN テンプレート**: [templates/introduction-plan.md](templates/introduction-plan.md)
|
|
181
|
+
- **common ティアのリバース**: [reverse-engineering-common-spec skill](../reverse-engineering-common-spec/SKILL.md)
|
|
182
|
+
- **機能単位のリバース**: [reverse-engineering-feature-spec skill](../reverse-engineering-feature-spec/SKILL.md)
|
|
183
|
+
- **フォーマット策定・テーラリング(step 3-4 / 7)**: [tailoring-spec-format skill](../tailoring-spec-format/SKILL.md)
|
|
184
|
+
- **整合性チェック**: [verifying-consistency skill](../verifying-consistency/SKILL.md)
|
|
185
|
+
- **順行運用(新機能実装)**: [auto-implement skill](../auto-implement/SKILL.md)
|