@su-record/vibe 2.9.40 → 2.10.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.
Files changed (126) hide show
  1. package/CLAUDE.md +18 -5
  2. package/README.md +31 -24
  3. package/agents/{teams/figma → figma}/figma-analyst.md +2 -2
  4. package/agents/research/{best-practices-agent.md → best-practices.md} +1 -1
  5. package/agents/research/{codebase-patterns-agent.md → codebase-patterns.md} +1 -1
  6. package/agents/research/{framework-docs-agent.md → framework-docs.md} +1 -1
  7. package/agents/research/{security-advisory-agent.md → security-advisory.md} +1 -1
  8. package/agents/teams/research-team.md +4 -4
  9. package/agents/teams/review-debate-team.md +2 -2
  10. package/agents/teams/security-team.md +4 -4
  11. package/dist/cli/postinstall/claude-agents.d.ts +3 -1
  12. package/dist/cli/postinstall/claude-agents.d.ts.map +1 -1
  13. package/dist/cli/postinstall/claude-agents.js +47 -9
  14. package/dist/cli/postinstall/claude-agents.js.map +1 -1
  15. package/dist/cli/postinstall/constants.d.ts +5 -0
  16. package/dist/cli/postinstall/constants.d.ts.map +1 -1
  17. package/dist/cli/postinstall/constants.js +165 -23
  18. package/dist/cli/postinstall/constants.js.map +1 -1
  19. package/dist/cli/postinstall/cursor-skills.js +2 -2
  20. package/dist/cli/postinstall/main.d.ts.map +1 -1
  21. package/dist/cli/postinstall/main.js +19 -10
  22. package/dist/cli/postinstall/main.js.map +1 -1
  23. package/dist/infra/lib/OrchestrateWorkflow.js +1 -1
  24. package/dist/infra/lib/OrchestrateWorkflow.js.map +1 -1
  25. package/dist/infra/lib/telemetry/SkillTelemetry.test.js +4 -4
  26. package/dist/infra/lib/telemetry/SkillTelemetry.test.js.map +1 -1
  27. package/dist/infra/orchestrator/parallelResearch.js +4 -4
  28. package/dist/infra/orchestrator/parallelResearch.js.map +1 -1
  29. package/hooks/scripts/clone-extract.js +712 -0
  30. package/hooks/scripts/clone-refine.js +510 -0
  31. package/hooks/scripts/clone-to-scss.js +275 -0
  32. package/hooks/scripts/clone-validate.js +280 -0
  33. package/hooks/scripts/step-counter.js +1 -1
  34. package/package.json +2 -1
  35. package/skills/agents-md/SKILL.md +2 -0
  36. package/skills/arch-guard/SKILL.md +2 -0
  37. package/skills/brand-assets/SKILL.md +1 -0
  38. package/skills/capability-loop/SKILL.md +2 -0
  39. package/skills/characterization-test/SKILL.md +2 -0
  40. package/skills/chub-usage/SKILL.md +1 -0
  41. package/skills/claude-md-guide/SKILL.md +2 -0
  42. package/skills/clone/SKILL.md +361 -0
  43. package/skills/commerce-patterns/SKILL.md +1 -0
  44. package/skills/commit-push-pr/SKILL.md +1 -0
  45. package/skills/context7-usage/SKILL.md +1 -0
  46. package/skills/{vibe-contract → contract}/SKILL.md +7 -8
  47. package/skills/create-prd/SKILL.md +1 -0
  48. package/skills/design-audit/SKILL.md +1 -0
  49. package/skills/design-critique/SKILL.md +1 -0
  50. package/skills/design-distill/SKILL.md +1 -0
  51. package/skills/design-normalize/SKILL.md +1 -0
  52. package/skills/design-polish/SKILL.md +1 -0
  53. package/skills/design-teach/SKILL.md +2 -0
  54. package/skills/devlog/SKILL.md +1 -0
  55. package/skills/{vibe-docs → docs}/SKILL.md +5 -5
  56. package/skills/e2e-commerce/SKILL.md +1 -0
  57. package/skills/event-comms/SKILL.md +1 -0
  58. package/skills/event-ops/SKILL.md +1 -0
  59. package/skills/event-planning/SKILL.md +1 -0
  60. package/skills/exec-plan/SKILL.md +2 -0
  61. package/skills/{vibe-figma → figma}/SKILL.md +4 -3
  62. package/skills/{vibe-figma-convert → figma-convert}/SKILL.md +4 -3
  63. package/skills/{vibe-figma-extract → figma-extract}/SKILL.md +4 -3
  64. package/skills/git-worktree/SKILL.md +1 -0
  65. package/skills/handoff/SKILL.md +2 -0
  66. package/skills/{vibe-interview → interview}/SKILL.md +16 -16
  67. package/skills/parallel-research/SKILL.md +2 -0
  68. package/skills/{vibe-plan → plan}/SKILL.md +9 -9
  69. package/skills/prioritization-frameworks/SKILL.md +1 -0
  70. package/skills/priority-todos/SKILL.md +2 -0
  71. package/skills/{vibe-regress → regress}/SKILL.md +5 -6
  72. package/skills/rob-pike/SKILL.md +2 -0
  73. package/skills/seo-checklist/SKILL.md +1 -0
  74. package/skills/{vibe-spec → spec}/SKILL.md +14 -14
  75. package/skills/{vibe-spec-review → spec-review}/SKILL.md +8 -9
  76. package/skills/systematic-debugging/SKILL.md +2 -0
  77. package/skills/techdebt/SKILL.md +2 -0
  78. package/skills/{vibe-test → test}/SKILL.md +12 -12
  79. package/skills/tool-fallback/SKILL.md +1 -0
  80. package/skills/typescript-advanced-types/SKILL.md +1 -0
  81. package/skills/ui-ux-pro-max/SKILL.md +1 -0
  82. package/skills/user-personas/SKILL.md +1 -0
  83. package/skills/vercel-react-best-practices/SKILL.md +1 -0
  84. package/skills/vibe/SKILL.md +266 -0
  85. package/{commands/vibe.analyze.md → skills/vibe.analyze/SKILL.md} +2 -0
  86. package/skills/vibe.clone/SKILL.md +117 -0
  87. package/{commands/vibe.contract.md → skills/vibe.contract/SKILL.md} +3 -1
  88. package/{commands/vibe.docs.md → skills/vibe.docs/SKILL.md} +3 -1
  89. package/{commands/vibe.event.md → skills/vibe.event/SKILL.md} +2 -0
  90. package/{commands/vibe.figma.md → skills/vibe.figma/SKILL.md} +25 -23
  91. package/{commands/vibe.harness.md → skills/vibe.harness/SKILL.md} +2 -0
  92. package/{commands/vibe.reason.md → skills/vibe.reason/SKILL.md} +2 -0
  93. package/{commands/vibe.regress.md → skills/vibe.regress/SKILL.md} +5 -3
  94. package/{commands/vibe.review.md → skills/vibe.review/SKILL.md} +2 -0
  95. package/{commands/vibe.run.md → skills/vibe.run/SKILL.md} +3 -1
  96. package/{commands/vibe.scaffold.md → skills/vibe.scaffold/SKILL.md} +2 -0
  97. package/{commands/vibe.spec.md → skills/vibe.spec/SKILL.md} +36 -34
  98. package/{commands/vibe.test.md → skills/vibe.test/SKILL.md} +4 -2
  99. package/{commands/vibe.trace.md → skills/vibe.trace/SKILL.md} +7 -0
  100. package/{commands/vibe.utils.md → skills/vibe.utils/SKILL.md} +2 -0
  101. package/{commands/vibe.verify.md → skills/vibe.verify/SKILL.md} +4 -2
  102. package/skills/video-production/SKILL.md +1 -0
  103. /package/agents/{teams/figma → figma}/figma-architect.md +0 -0
  104. /package/agents/{teams/figma → figma}/figma-auditor.md +0 -0
  105. /package/agents/{teams/figma → figma}/figma-builder.md +0 -0
  106. /package/skills/{vibe-docs → docs}/templates/architecture.md +0 -0
  107. /package/skills/{vibe-docs → docs}/templates/behavioral-principles.md +0 -0
  108. /package/skills/{vibe-docs → docs}/templates/readme.md +0 -0
  109. /package/skills/{vibe-docs → docs}/templates/release-notes.md +0 -0
  110. /package/skills/{vibe-figma → figma}/rubrics/extraction-checklist.md +0 -0
  111. /package/skills/{vibe-figma → figma}/templates/component-index.md +0 -0
  112. /package/skills/{vibe-figma → figma}/templates/component-spec.md +0 -0
  113. /package/skills/{vibe-figma → figma}/templates/figma-handoff.md +0 -0
  114. /package/skills/{vibe-figma → figma}/templates/remapped-tree.md +0 -0
  115. /package/skills/{vibe-figma-convert → figma-convert}/rubrics/conversion-rules.md +0 -0
  116. /package/skills/{vibe-figma-convert → figma-convert}/templates/component.md +0 -0
  117. /package/skills/{vibe-figma-extract → figma-extract}/rubrics/image-rules.md +0 -0
  118. /package/skills/{vibe-interview → interview}/checklists/api.md +0 -0
  119. /package/skills/{vibe-interview → interview}/checklists/feature.md +0 -0
  120. /package/skills/{vibe-interview → interview}/checklists/library.md +0 -0
  121. /package/skills/{vibe-interview → interview}/checklists/mobile.md +0 -0
  122. /package/skills/{vibe-interview → interview}/checklists/webapp.md +0 -0
  123. /package/skills/{vibe-interview → interview}/checklists/website.md +0 -0
  124. /package/skills/{vibe-regress → regress}/templates/bug.md +0 -0
  125. /package/skills/{vibe-regress → regress}/templates/test-jest.md +0 -0
  126. /package/skills/{vibe-regress → regress}/templates/test-vitest.md +0 -0
@@ -0,0 +1,361 @@
1
+ ---
2
+ name: clone
3
+ description: URL → markup 수준 pixel-perfect 클론 본체 — headless browser로 라이브 사이트 캡처 후 현재 스택으로 스캐폴드.
4
+ when_to_use: /vibe.clone 진입점에서 체인 호출. 직접 호출 금지.
5
+ user-invocable: false
6
+ tier: standard
7
+ ---
8
+
9
+ # vibe.clone — Markup-Level Website Clone
10
+
11
+ ## Core Principles
12
+
13
+ ```
14
+ The rendered DOM is the source of truth for markup. Screenshots are for pixel verification only.
15
+
16
+ ✅ Puppeteer-rendered DOM (post-JS) → HTML structural mapping
17
+ ✅ Computed CSS → SCSS direct conversion (no guessing)
18
+ ✅ All remote assets (images, fonts) → downloaded locally and rewritten to project paths
19
+ ✅ Claude handles semantic decisions only: tag selection, component splitting, interactions
20
+ ✅ Screenshots are used for verification only, not generation
21
+ ```
22
+
23
+ ## Immutable Rules
24
+
25
+ ```
26
+ 1. Do NOT generate CSS values by guessing or eyeballing screenshots.
27
+ ✅ Use clone-extract.js computed CSS output as-is.
28
+ ❌ Do NOT write CSS values directly inside scoped <style> blocks.
29
+
30
+ 2. Do NOT hotlink remote assets. All images/fonts must be downloaded and rewritten.
31
+
32
+ 3. Do NOT skip the pixel verification loop (Phase 5). The clone is incomplete without it.
33
+
34
+ 4. Do NOT copy textual content verbatim from copyrighted sources for production use.
35
+ This skill is for layout/markup learning ("클론 코딩"). Replace text with placeholders
36
+ or user-provided copy when shipping a real product.
37
+ ```
38
+
39
+ ## Full Flow
40
+
41
+ ```
42
+ Input: a URL (or multiple URLs for multi-page clones)
43
+
44
+ → Phase 0: Setup (stack detection, feature naming, working dir)
45
+ → Phase 1: Capture (Puppeteer → rendered HTML + computed CSS + screenshots + assets)
46
+ → Phase 2: Refine (DOM → sections.json per breakpoint)
47
+ → Phase 3: Scaffold (sections.json → SCSS auto-gen + Claude-authored HTML/components)
48
+ → Phase 4: Compile gate
49
+ → Phase 5: Pixel verification loop
50
+
51
+ Working directory:
52
+ /tmp/{feature}/
53
+ ├── mo/ (375×812) — rendered.html, computed.json, screenshot.png, assets/, sections.json
54
+ ├── pc/ (1440×900) — rendered.html, computed.json, screenshot.png, assets/, sections.json
55
+ └── tokens.json — extracted design tokens (colors/fonts/spacing)
56
+
57
+ Code output: placed directly in the project directory per detected stack
58
+ components/{feature}/, styles/{feature}/, public/images/{feature}/
59
+ ```
60
+
61
+ ---
62
+
63
+ ## Phase 0: Setup
64
+
65
+ ```
66
+ 1. Stack detection:
67
+ - .vibe/config.json → stack (react/vue/next/svelte/vanilla, scss/tailwind/css-modules)
68
+ - Fallback: package.json deps
69
+ 2. Feature name: URL hostname → kebab-case (e.g. stripe.com → stripe-clone)
70
+ - User may override with --name=<custom>
71
+ 3. Directories:
72
+ - components/{feature}/, styles/{feature}/, public/images/{feature}/
73
+ 4. Component indexing → /tmp/{feature}/component-index.json
74
+ (scan up to 50 existing components, extract props/slots/classes, within 2 minutes)
75
+ 5. Design token scan → /tmp/{feature}/project-tokens.json
76
+ (SCSS > CSS Variables > Tailwind > CSS-in-JS)
77
+ ```
78
+
79
+ ---
80
+
81
+ ## Phase 1: Capture ← Headless browser (parallel MO/PC)
82
+
83
+ **Coordinator pattern: run MO/PC capture as parallel workers.**
84
+
85
+ ### BLOCKING Command — Use only clone-extract.js for capture
86
+
87
+ ```bash
88
+ # [CLONE_SCRIPT] = {{VIBE_PATH}}/hooks/scripts/clone-extract.js
89
+
90
+ # Mobile (375×812)
91
+ node {{VIBE_PATH}}/hooks/scripts/clone-extract.js capture <URL> \
92
+ --out=/tmp/{feature}/mo/ \
93
+ --viewport=375x812 \
94
+ --bp=mo
95
+
96
+ # Desktop (1440×900)
97
+ node {{VIBE_PATH}}/hooks/scripts/clone-extract.js capture <URL> \
98
+ --out=/tmp/{feature}/pc/ \
99
+ --viewport=1440x900 \
100
+ --bp=pc
101
+ ```
102
+
103
+ ⛔ **Writing custom capture scripts (puppeteer-fetch.mjs, etc.) is forbidden.**
104
+ ⛔ **Do NOT use WebFetch or curl** — they cannot render JS-driven SPAs.
105
+ ✅ Use clone-extract.js. If output is unsatisfactory, modify the script.
106
+
107
+ ### Output per breakpoint
108
+
109
+ ```
110
+ /tmp/{feature}/{bp}/
111
+ ├── rendered.html — final DOM after JS execution
112
+ ├── computed.json — per-element computed CSS + bounding box
113
+ ├── screenshot.png — full-page screenshot
114
+ ├── assets/
115
+ │ ├── images/ — all <img>, background-image, <picture> sources
116
+ │ └── fonts/ — @font-face srcs
117
+ └── asset-map.json — remote URL → local path mapping
118
+ ```
119
+
120
+ ### Capture rules
121
+
122
+ ```
123
+ 1. Wait for `networkidle2` (no in-flight requests for 500ms) before snapshot
124
+ 2. Scroll to bottom slowly to trigger lazy-loaded content
125
+ 3. Resolve all <img src>, srcset, and computed background-image URLs
126
+ 4. Resolve @font-face src() URLs from all stylesheets
127
+ 5. Download assets in parallel (concurrency=8), preserve original extensions
128
+ 6. Rewrite asset URLs in rendered.html and computed.json to local paths
129
+ 7. Strip inline analytics/tracking scripts before saving rendered.html
130
+ ```
131
+
132
+ ---
133
+
134
+ ## Phase 2: Refine ← DOM → sections.json (independent per BP)
135
+
136
+ ### BLOCKING Command — Writing custom refine scripts is forbidden
137
+
138
+ ```bash
139
+ # MO
140
+ node {{VIBE_PATH}}/hooks/scripts/clone-refine.js \
141
+ /tmp/{feature}/mo/rendered.html \
142
+ /tmp/{feature}/mo/computed.json \
143
+ --out=/tmp/{feature}/mo/sections.json \
144
+ --bp=mo
145
+
146
+ # PC
147
+ node {{VIBE_PATH}}/hooks/scripts/clone-refine.js \
148
+ /tmp/{feature}/pc/rendered.html \
149
+ /tmp/{feature}/pc/computed.json \
150
+ --out=/tmp/{feature}/pc/sections.json \
151
+ --bp=pc
152
+ ```
153
+
154
+ ⛔ **Phase 3 is blocked until refine completes for all required BPs.**
155
+ ⛔ **Do NOT parse rendered.html with custom Python/Node scripts.**
156
+ ✅ Use clone-refine.js output as-is. If unsatisfactory, modify the script.
157
+
158
+ ### Refinement rules
159
+
160
+ ```
161
+ Refinement applied when converting rendered.html + computed.json → sections.json:
162
+ 1. Strip <script>, <noscript>, <style>, tracking pixels
163
+ 2. Strip nodes with display:none, visibility:hidden, opacity:0, size 0
164
+ 3. Detect sections: <header>, <nav>, top-level <section>/<main> children, <footer>
165
+ Fallback: top-level children of <body> with height > 100px
166
+ 4. Detect repeated patterns (sibling nodes with same tag+class signature, count >= 3)
167
+ → mark as component candidates
168
+ 5. Extract design tokens:
169
+ - colors: unique color/background-color values, sorted by frequency
170
+ - typography: font-family/size/weight combinations
171
+ - spacing: padding/margin values (px), bucketed to nearest 4px
172
+ 6. Background images (background-image: url) → images.bg
173
+ 7. Inline <img> → images.content
174
+ 8. Keep CSS subset: layout (display/flex/grid/position/inset/margin/padding/width/height/gap),
175
+ typography (font-*, line-height, letter-spacing, text-*, color),
176
+ decoration (background, border, border-radius, box-shadow, opacity),
177
+ transform/transition
178
+ ```
179
+
180
+ ### Output
181
+
182
+ ```
183
+ /tmp/{feature}/{bp}/sections.json:
184
+ {
185
+ meta: { feature, url, viewport, bp },
186
+ tokens: { colors: [...], typography: [...], spacing: [...] },
187
+ sections: [
188
+ {
189
+ name: "Header" | "Hero" | "Features" | ...,
190
+ nodeRef, tag, size, css,
191
+ text, // text content (placeholder candidates)
192
+ components: [...], // detected repeated patterns
193
+ children: [...], // full recursive subtree
194
+ images: { bg, content: [...] }
195
+ }
196
+ ]
197
+ }
198
+ ```
199
+
200
+ ---
201
+
202
+ ## Phase 3: Scaffold ← stack-specific code generation
203
+
204
+ **⛔ Implement MO fully first → pass verification → then PC. No responsive conversion in this phase.**
205
+ **⛔ CSS values must use computed.json output as-is. No vw/clamp/@media in this phase.**
206
+
207
+ ### BLOCKING Command — SCSS must only use script output
208
+
209
+ ```bash
210
+ # Step A: Auto-generate SCSS skeleton (run once per BP)
211
+ node {{VIBE_PATH}}/hooks/scripts/clone-to-scss.js \
212
+ /tmp/{feature}/{bp}/sections.json \
213
+ --out=/path/to/project/styles/{feature}/ \
214
+ --token-file=/tmp/{feature}/project-tokens.json
215
+
216
+ # Step B: Per-section validation (after writing each section's component code)
217
+ node {{VIBE_PATH}}/hooks/scripts/clone-validate.js \
218
+ /path/to/project/styles/{feature}/ \
219
+ /tmp/{feature}/{bp}/sections.json \
220
+ --section={SectionName}
221
+ ```
222
+
223
+ ⛔ **Writing SCSS files directly without calling clone-to-scss.js invalidates Phase 3.**
224
+ ⛔ **Do NOT write custom SCSS generation scripts.**
225
+ ⛔ **Do NOT proceed to the next section without a clone-validate.js PASS.**
226
+ ✅ Use clone-to-scss.js output as-is. If unsatisfactory, modify the script.
227
+
228
+ ```
229
+ Phase 3A: MO Scaffold
230
+ Input: /tmp/{feature}/mo/sections.json
231
+ ⛔ No parallelism. Process one section at a time:
232
+ 1. Read the target section from sections.json
233
+ 2. Map component candidates against component-index.json
234
+ ├─ Match → import existing
235
+ └─ No match → create new in components/{feature}/
236
+ 3. clone-to-scss.js → auto-generate SCSS skeleton (computed values as-is) — Step A once
237
+ 4. Claude: HTML structure + semantic tags + framework-specific component file
238
+ ⛔ No CSS written directly in <style> blocks — only @import/@use allowed
239
+ Framework mapping:
240
+ - React/Next → .tsx with CSS Modules or styled-components per stack
241
+ - Vue/Nuxt → .vue with scoped <style lang="scss"> @import only
242
+ - Svelte → .svelte with <style> @import only
243
+ - Vanilla → .html + linked .scss
244
+ 5. Asset references → public/images/{feature}/ (already populated in Phase 1)
245
+ 6. clone-validate.js → compare SCSS vs sections.json — Step B
246
+ ├─ PASS → next section
247
+ └─ FAIL → fix discrepancies → re-run step 6 (loop until P1=0, no round cap)
248
+ → Phase 4 (MO compile) → Phase 5 (MO pixel verification)
249
+
250
+ Phase 3B: PC Scaffold
251
+ Same process as MO, input /tmp/{feature}/pc/sections.json
252
+ → Phase 4 (PC compile) → Phase 5 (PC pixel verification)
253
+
254
+ Phase 3C: Responsive Integration (after both MO+PC pass verification)
255
+ → Merge MO+PC styles into @media-based responsive layout (separate flow, TODO)
256
+
257
+ Claude's role (restricted):
258
+ ✅ Component candidates: decide which patterns become reusable components
259
+ ✅ HTML semantics: section/h1/p/button/nav tag selection
260
+ ✅ Text replacement: substitute copyrighted copy with placeholders or user-supplied text
261
+ ✅ Interactions: hover/focus states, click handlers, conditional rendering
262
+ ❌ Do NOT modify SCSS CSS values (use clone-to-scss.js output as-is)
263
+ ❌ Do NOT write CSS directly in <style> blocks
264
+ ❌ Do NOT use vw/clamp/@media or create custom mixins in Phase 3A/3B
265
+ ❌ Do NOT hotlink remote URLs — all assets must use local public/images/ paths
266
+ ```
267
+
268
+ ---
269
+
270
+ ## Phase 4: Compile Gate
271
+
272
+ ```
273
+ No round cap. Loop until compile succeeds (or stuck → ask user).
274
+
275
+ 0. Capture baseline (before Phase 3): record existing tsc + build errors
276
+ → Phase 4 only fixes NEW errors
277
+
278
+ 1. TypeScript: vue-tsc / svelte-check / tsc --noEmit
279
+ 2. Build: npm run build (120s timeout)
280
+ 3. Dev server: npm run dev → detect port → polling
281
+
282
+ On error: parse → auto-fix → re-check
283
+ Termination:
284
+ ✅ Success: all checks pass → enter Phase 5
285
+ ⚠️ Stuck: same errors as previous round → ask user
286
+ 1. Direct fix instructions → retry
287
+ 2. "proceed" — record remaining errors as TODO, proceed to Phase 5
288
+ 3. "abort" — halt
289
+ ultrawork mode: on stuck, record TODO without prompting and proceed
290
+
291
+ ⛔ Must enter Phase 5 after Phase 4 passes. Do NOT output a "completion summary".
292
+ ```
293
+
294
+ ---
295
+
296
+ ## Phase 5: Pixel Verification Loop ← MANDATORY
297
+
298
+ **⛔ Phase 5 is mandatory, not optional. Enter automatically after Phase 4.**
299
+ **⛔ Skipping Phase 5 makes the entire clone "incomplete".**
300
+
301
+ ```
302
+ No round cap. Loop until P1=0 (or stuck → ask user).
303
+ Infrastructure: src/infra/lib/browser/ (Puppeteer + CDP) — same as figma Phase 6.
304
+
305
+ 1. Render scaffolded page in dev server at matching viewport
306
+ 2. Capture screenshot → pixelmatch comparison against /tmp/{feature}/{bp}/screenshot.png
307
+ diffRatio > 0.05 (clone target is tighter than figma) → P1
308
+ 3. CSS comparison: live computed CSS vs /tmp/{feature}/{bp}/computed.json
309
+ delta > 2px → P1, ≤ 2px → P2
310
+ 4. Asset audit: every <img>/background-image resolves to local public/images/ path → else P1
311
+ 5. Fix P1 first (refer to computed.json, no guessing) → revalidate compile → reload
312
+
313
+ Narrowing scope:
314
+ Round 1: P1+P2+P3
315
+ Round 2: P1+P2
316
+ Round 3+: P1 only
317
+
318
+ Termination:
319
+ ✅ P1=0 AND no new findings → complete
320
+ ⚠️ Stuck: same findings → ask user (resolve / proceed / abort)
321
+ ultrawork mode: on stuck, record TODO without prompting and complete
322
+
323
+ Responsive: after MO verification → change viewport → repeat against PC screenshot
324
+ Cleanup: shut down browser + dev server
325
+
326
+ ⛔ "Completion summary" output only allowed after Phase 5 completes.
327
+ ```
328
+
329
+ ---
330
+
331
+ ## Legal & Ethical Notes
332
+
333
+ ```
334
+ This skill is intended for:
335
+ ✅ "Clone coding" learning exercises (markup/layout study)
336
+ ✅ Rebuilding the user's own previously-deployed sites
337
+ ✅ Authorized redesigns where the user has rights to the source
338
+
339
+ NOT intended for:
340
+ ❌ Republishing copyrighted content (text, images, logos) without permission
341
+ ❌ Deceptive look-alike sites (phishing, brand impersonation)
342
+ ❌ Bypassing robots.txt or rate-limiting protections
343
+
344
+ Claude must:
345
+ - Replace copyrighted text content with placeholders (e.g. "[Lorem ipsum]") by default
346
+ - Skip and warn when robots.txt disallows fetching the target path
347
+ - Refuse if the user's stated intent is brand impersonation or deception
348
+ ```
349
+
350
+ ---
351
+
352
+ ## Error Recovery
353
+
354
+ | Failure | Recovery |
355
+ |---------|----------|
356
+ | clone-extract.js Puppeteer launch failure | Verify Node ≥18 and that Chromium is installed (`npx puppeteer browsers install chrome`). Retry once. |
357
+ | Target site blocks headless (403/Cloudflare) | Retry with `--stealth` flag (uses puppeteer-extra stealth plugin). If still blocked, report to user. |
358
+ | Asset download 404 | Log to asset-map.json with `status: missing`. Use a 1×1 transparent placeholder. Continue. |
359
+ | robots.txt disallows path | Halt Phase 1. Inform user; require explicit `--ignore-robots` flag to proceed. |
360
+ | clone-refine.js produces empty sections | Site likely uses Shadow DOM or canvas rendering. Report and ask whether to fall back to screenshot-only mode. |
361
+ | Pixel diff stuck > 0.05 after 5 rounds | Likely font fallback or anti-aliasing. Report metric, allow user to accept threshold. |
@@ -1,5 +1,6 @@
1
1
  ---
2
2
  name: commerce-patterns
3
+ invocation: [auto]
3
4
  tier: core
4
5
  description: "E-commerce domain patterns — cart management, payment processing (Toss/Stripe/PG), inventory tracking, and order state machines with transaction safety. Use when implementing any shopping cart, checkout flow, payment integration, stock management, or order lifecycle. Covers idempotency keys, double-charge prevention, stock reservation, and refund flows. Must use this skill when the codebase involves e-commerce — even for seemingly simple 'add to cart' features."
5
6
  triggers: [commerce, ecommerce, cart, payment, checkout, inventory, stock, order, pg, toss, stripe]
@@ -1,5 +1,6 @@
1
1
  ---
2
2
  name: commit-push-pr
3
+ invocation: [auto, chain]
3
4
  tier: optional
4
5
  description: "Commit, push, and create PR in one go. Auto-activates on commit, PR, push keywords."
5
6
  triggers: [commit, push, PR, pull request, merge]
@@ -1,5 +1,6 @@
1
1
  ---
2
2
  name: context7-usage
3
+ invocation: [auto]
3
4
  tier: optional
4
5
  description: "Context7 plugin for latest library documentation. Auto-activates when docs, documentation, latest version, official docs, API reference, or library help is needed."
5
6
  triggers: [docs, documentation, latest version, official docs, API reference, library help, context7]
@@ -1,10 +1,9 @@
1
1
  ---
2
- name: vibe-contract
2
+ name: contract
3
+ description: API contract drift 탐지 본체 — SPEC contract 추출 → 구현 비교 → breaking drift P1을 regress로 자동 등록.
4
+ when_to_use: /vibe.contract 진입점 / /vibe.spec 완료 / /vibe.verify 통과 시 체인. 직접 호출 금지.
5
+ user-invocable: false
3
6
  tier: core
4
- description: "API contract drift detection. Extracts HTTP/GraphQL/event/public-function contracts from SPEC into .vibe/contracts/<feature>.md, compares to implementation, and fails loudly on breaking drift (missing endpoints, removed required fields, type changes). P1 drifts auto-register as regressions via vibe-regress. Must use this skill when user runs /vibe.contract, when /vibe.spec completes, when /vibe.verify passes scenarios, or when the user says 'contract', 'API schema', 'breaking change', 'drift', '계약', '스키마 바뀜'."
5
- triggers: [contract, drift, "계약", "API 변경", "breaking change", "schema drift"]
6
- priority: 70
7
- chain-next: []
8
7
  ---
9
8
 
10
9
  # vibe.contract — API Contract Drift Detection
@@ -116,7 +115,7 @@ endpoints:
116
115
 
117
116
  Auto-invoke right after the SPEC is written:
118
117
  ```
119
- Load skill `vibe-contract` with: extract <feature>
118
+ Load skill `contract` with: extract <feature>
120
119
  ```
121
120
  Failure does not stop `/vibe.spec` (extraction is optional). On success, `/vibe.run` references this contract.
122
121
 
@@ -124,7 +123,7 @@ Failure does not stop `/vibe.spec` (extraction is optional). On success, `/vibe.
124
123
 
125
124
  After all scenarios pass:
126
125
  ```
127
- Load skill `vibe-contract` with: check <feature>
126
+ Load skill `contract` with: check <feature>
128
127
  ```
129
128
  - no drift → verify still passes
130
129
  - P1 drift → demote verify to fail; auto-register
@@ -134,7 +133,7 @@ Load skill `vibe-contract` with: check <feature>
134
133
 
135
134
  On P1 drift:
136
135
  ```
137
- Load skill `vibe-regress` with:
136
+ Load skill `regress` with:
138
137
  subcommand: register --from-contract
139
138
  feature: <feature>
140
139
  symptom: "Contract drift: <endpoint-id> <drift-type>"
@@ -1,5 +1,6 @@
1
1
  ---
2
2
  name: create-prd
3
+ invocation: [auto, chain]
3
4
  tier: standard
4
5
  description: "Create a Product Requirements Document using a comprehensive 8-section template covering problem, objectives, segments, value propositions, solution, and release planning."
5
6
  triggers: [prd, product requirements, feature spec, requirements document]
@@ -1,5 +1,6 @@
1
1
  ---
2
2
  name: design-audit
3
+ invocation: [command, auto]
3
4
  tier: standard
4
5
  description: "Design technical quality audit — a11y, performance, responsive, theming, AI slop detection with 5-dimension scoring. Use when design-audit, ui-audit, a11y-check, design-check."
5
6
  triggers: [design-audit, ui-audit, a11y-check, design-check]
@@ -1,5 +1,6 @@
1
1
  ---
2
2
  name: design-critique
3
+ invocation: [auto]
3
4
  tier: standard
4
5
  description: "UX design review — Nielsen heuristics scoring, 5-persona red flag analysis. Use when design-critique, ux-review, design-review."
5
6
  triggers: [design-critique, ux-review, design-review]
@@ -1,5 +1,6 @@
1
1
  ---
2
2
  name: design-distill
3
+ invocation: [auto]
3
4
  tier: standard
4
5
  description: "Remove unnecessary visual complexity — strip decorative clutter, apply progressive disclosure, simplify UI to essentials. Use when design-distill, simplify-ui, ui-simplify, strip-ui."
5
6
  triggers: [design-distill, simplify-ui, ui-simplify, strip-ui]
@@ -1,5 +1,6 @@
1
1
  ---
2
2
  name: design-normalize
3
+ invocation: [command, auto]
3
4
  tier: standard
4
5
  description: "Normalize hardcoded values to design system tokens — colors, typography, spacing, shadows aligned to MASTER.md. Use when design-normalize, design-system, token-align."
5
6
  triggers: [design-normalize, design-system, token-align]
@@ -1,5 +1,6 @@
1
1
  ---
2
2
  name: design-polish
3
+ invocation: [auto]
3
4
  tier: standard
4
5
  description: "Pre-ship final polish pass — pixel alignment, interaction states, micro-details check and auto-fix. Use when design-polish, ui-polish, final-pass, ship-ready."
5
6
  triggers: [design-polish, ui-polish, final-pass, ship-ready]
@@ -1,5 +1,7 @@
1
1
  ---
2
2
  name: design-teach
3
+ user-invocable: false
4
+ invocation: [command, auto]
3
5
  tier: standard
4
6
  description: "Gather and store project design context — target audience, brand personality, aesthetic direction, constraints. Used by other design-* skills. Use when design-teach, design-setup, design-context."
5
7
  triggers: [design-teach, design-setup, design-context]
@@ -1,5 +1,6 @@
1
1
  ---
2
2
  name: devlog
3
+ invocation: [auto]
3
4
  tier: standard
4
5
  description: "Auto-generate devlog posts from git commit history. Triggers every N commits, writes markdown to configured target repo."
5
6
  triggers: [devlog, 개발일지, dev log, devlog 작성, 개발일지 작성]
@@ -1,9 +1,9 @@
1
1
  ---
2
- name: vibe-docs
2
+ name: docs
3
+ description: 프로젝트 문서 생성 본체 — README / 아키텍처 / 사용자 가이드 / 릴리즈 노트.
4
+ when_to_use: /vibe.docs 진입점에서 체인 호출. 직접 호출 금지.
5
+ user-invocable: false
3
6
  tier: standard
4
- description: "Generate project documentation — README, architecture docs, user guide, release notes. Activates on docs, readme, documentation keywords."
5
- triggers: [vibe-docs, docs, documentation, readme, release notes, architecture doc]
6
- priority: 50
7
7
  ---
8
8
 
9
9
  # vibe.docs — Project Documentation Generator
@@ -112,7 +112,7 @@ Gemini CLI / Codex CLI / Cursor are not supported — do not generate or check `
112
112
 
113
113
  **Source of truth:**
114
114
  - **`CLAUDE.md` is the content SSOT.** Always edit it first; `AGENTS.md` is a regenerated derivative.
115
- - Behavioral block: `skills/vibe-docs/templates/behavioral-principles.md` (4 Karpathy principles, wrapped in `<!-- VIBE-BEHAVIORAL:START/END -->` markers).
115
+ - Behavioral block: `skills/docs/templates/behavioral-principles.md` (4 Karpathy principles, wrapped in `<!-- VIBE-BEHAVIORAL:START/END -->` markers).
116
116
 
117
117
  **Procedure (applies to both creation and modification):**
118
118
 
@@ -1,5 +1,6 @@
1
1
  ---
2
2
  name: e2e-commerce
3
+ invocation: [auto]
3
4
  tier: core
4
5
  description: "E2E test scenarios for commerce checkout and payment flows. Provides ready-made Playwright test templates for cart→checkout→payment→confirmation flows, including PG sandbox testing (Toss/Stripe), error scenarios (payment failure, timeout, stock exhaustion), and idempotency verification. Use when writing E2E tests for any e-commerce feature — checkout, payment, order status, or refund flows."
5
6
  triggers: [e2e commerce, checkout test, payment test, order flow test]
@@ -1,5 +1,6 @@
1
1
  ---
2
2
  name: event-comms
3
+ invocation: [auto]
3
4
  tier: standard
4
5
  description: "Event communication automation — SMS via Aligo, email via Gmail OAuth, SNS posts for LinkedIn/Threads. Handles templates, BCC rules, and confirmation protocol."
5
6
  triggers: [sms, aligo, gmail, event email, event sms, 문자 발송, 메일 발송, SNS 홍보]
@@ -1,5 +1,6 @@
1
1
  ---
2
2
  name: event-ops
3
+ invocation: [auto]
3
4
  tier: standard
4
5
  description: "Event operations — nametags, checklists, operational slides, Slido plans, image generation specs, settlement reports."
5
6
  triggers: [nametag, checklist, event slide, slido, 이름표, 체크리스트, 운영 슬라이드, 정산]
@@ -1,5 +1,6 @@
1
1
  ---
2
2
  name: event-planning
3
+ invocation: [auto]
3
4
  tier: standard
4
5
  description: "Community event automation — D-Day timeline, community patterns, proactive task execution. Auto-activates for event planning, meetup/webinar/conference management."
5
6
  triggers: [event planning, meetup, webinar, conference, 행사, 밋업, 웨비나, D-Day, 이벤트 준비]
@@ -1,5 +1,7 @@
1
1
  ---
2
2
  name: exec-plan
3
+ user-invocable: false
4
+ invocation: [auto, chain]
3
5
  tier: core
4
6
  description: "Convert SPEC into a self-contained execution plan that agents can run autonomously for hours. Use when a SPEC has 3+ phases, multiple files to change, or complex dependencies between tasks. Produces a plan with explicit file paths, interface extracts, and acceptance criteria so agents never need to 'figure out' context. Must use this skill when launching long-running autonomous work, parallelizing implementation across agents, or when user says 'execute this spec' or 'run this plan'."
5
7
  triggers: [exec plan, execution plan, autonomous plan, self-contained plan, long-running]
@@ -1,7 +1,8 @@
1
1
  ---
2
- name: vibe-figma
3
- description: Figma design to code — tree-based structural code generation
4
- triggers: []
2
+ name: figma
3
+ description: Figma 코드 본체 — tree 기반 구조적 코드 생성.
4
+ when_to_use: /vibe.figma 진입점에서 체인 호출. 직접 호출 금지.
5
+ user-invocable: false
5
6
  tier: standard
6
7
  ---
7
8
 
@@ -1,7 +1,8 @@
1
1
  ---
2
- name: vibe-figma-convert
3
- description: Figma tree → structured code generation + screenshot validation
4
- triggers: []
2
+ name: figma-convert
3
+ description: Figma tree → 구조적 코드 변환 + 스크린샷 검증 본체.
4
+ when_to_use: figma 체인에서 호출. 직접 호출 금지.
5
+ user-invocable: false
5
6
  tier: standard
6
7
  ---
7
8
 
@@ -1,7 +1,8 @@
1
1
  ---
2
- name: vibe-figma-extract
3
- description: Acquire code generation data via Figma REST API — tree (primary), images, screenshots (for validation)
4
- triggers: []
2
+ name: figma-extract
3
+ description: Figma REST API로 코드 생성 데이터 수집 — tree() + 이미지 + 스크린샷(검증).
4
+ when_to_use: figma 체인에서 호출. 직접 호출 금지.
5
+ user-invocable: false
5
6
  tier: standard
6
7
  ---
7
8
 
@@ -1,5 +1,6 @@
1
1
  ---
2
2
  name: git-worktree
3
+ invocation: [auto]
3
4
  tier: optional
4
5
  description: "Git Worktree for parallel branch work. Auto-activates for PR review, hotfix, parallel testing, or working on multiple branches simultaneously."
5
6
  triggers: [worktree, PR review, hotfix, parallel branch, multiple branches]
@@ -1,5 +1,7 @@
1
1
  ---
2
2
  name: handoff
3
+ user-invocable: false
4
+ invocation: [auto]
3
5
  tier: standard
4
6
  description: "Generate HANDOFF.md work handover document before session end. Auto-activates on handoff, handover, session cleanup keywords."
5
7
  triggers: [handoff, handover, session cleanup, session end, context save]