@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.
- package/CLAUDE.md +18 -5
- package/README.md +31 -24
- package/agents/{teams/figma → figma}/figma-analyst.md +2 -2
- package/agents/research/{best-practices-agent.md → best-practices.md} +1 -1
- package/agents/research/{codebase-patterns-agent.md → codebase-patterns.md} +1 -1
- package/agents/research/{framework-docs-agent.md → framework-docs.md} +1 -1
- package/agents/research/{security-advisory-agent.md → security-advisory.md} +1 -1
- package/agents/teams/research-team.md +4 -4
- package/agents/teams/review-debate-team.md +2 -2
- package/agents/teams/security-team.md +4 -4
- package/dist/cli/postinstall/claude-agents.d.ts +3 -1
- package/dist/cli/postinstall/claude-agents.d.ts.map +1 -1
- package/dist/cli/postinstall/claude-agents.js +47 -9
- package/dist/cli/postinstall/claude-agents.js.map +1 -1
- package/dist/cli/postinstall/constants.d.ts +5 -0
- package/dist/cli/postinstall/constants.d.ts.map +1 -1
- package/dist/cli/postinstall/constants.js +165 -23
- package/dist/cli/postinstall/constants.js.map +1 -1
- package/dist/cli/postinstall/cursor-skills.js +2 -2
- package/dist/cli/postinstall/main.d.ts.map +1 -1
- package/dist/cli/postinstall/main.js +19 -10
- package/dist/cli/postinstall/main.js.map +1 -1
- package/dist/infra/lib/OrchestrateWorkflow.js +1 -1
- package/dist/infra/lib/OrchestrateWorkflow.js.map +1 -1
- package/dist/infra/lib/telemetry/SkillTelemetry.test.js +4 -4
- package/dist/infra/lib/telemetry/SkillTelemetry.test.js.map +1 -1
- package/dist/infra/orchestrator/parallelResearch.js +4 -4
- package/dist/infra/orchestrator/parallelResearch.js.map +1 -1
- package/hooks/scripts/clone-extract.js +712 -0
- package/hooks/scripts/clone-refine.js +510 -0
- package/hooks/scripts/clone-to-scss.js +275 -0
- package/hooks/scripts/clone-validate.js +280 -0
- package/hooks/scripts/step-counter.js +1 -1
- package/package.json +2 -1
- package/skills/agents-md/SKILL.md +2 -0
- package/skills/arch-guard/SKILL.md +2 -0
- package/skills/brand-assets/SKILL.md +1 -0
- package/skills/capability-loop/SKILL.md +2 -0
- package/skills/characterization-test/SKILL.md +2 -0
- package/skills/chub-usage/SKILL.md +1 -0
- package/skills/claude-md-guide/SKILL.md +2 -0
- package/skills/clone/SKILL.md +361 -0
- package/skills/commerce-patterns/SKILL.md +1 -0
- package/skills/commit-push-pr/SKILL.md +1 -0
- package/skills/context7-usage/SKILL.md +1 -0
- package/skills/{vibe-contract → contract}/SKILL.md +7 -8
- package/skills/create-prd/SKILL.md +1 -0
- package/skills/design-audit/SKILL.md +1 -0
- package/skills/design-critique/SKILL.md +1 -0
- package/skills/design-distill/SKILL.md +1 -0
- package/skills/design-normalize/SKILL.md +1 -0
- package/skills/design-polish/SKILL.md +1 -0
- package/skills/design-teach/SKILL.md +2 -0
- package/skills/devlog/SKILL.md +1 -0
- package/skills/{vibe-docs → docs}/SKILL.md +5 -5
- package/skills/e2e-commerce/SKILL.md +1 -0
- package/skills/event-comms/SKILL.md +1 -0
- package/skills/event-ops/SKILL.md +1 -0
- package/skills/event-planning/SKILL.md +1 -0
- package/skills/exec-plan/SKILL.md +2 -0
- package/skills/{vibe-figma → figma}/SKILL.md +4 -3
- package/skills/{vibe-figma-convert → figma-convert}/SKILL.md +4 -3
- package/skills/{vibe-figma-extract → figma-extract}/SKILL.md +4 -3
- package/skills/git-worktree/SKILL.md +1 -0
- package/skills/handoff/SKILL.md +2 -0
- package/skills/{vibe-interview → interview}/SKILL.md +16 -16
- package/skills/parallel-research/SKILL.md +2 -0
- package/skills/{vibe-plan → plan}/SKILL.md +9 -9
- package/skills/prioritization-frameworks/SKILL.md +1 -0
- package/skills/priority-todos/SKILL.md +2 -0
- package/skills/{vibe-regress → regress}/SKILL.md +5 -6
- package/skills/rob-pike/SKILL.md +2 -0
- package/skills/seo-checklist/SKILL.md +1 -0
- package/skills/{vibe-spec → spec}/SKILL.md +14 -14
- package/skills/{vibe-spec-review → spec-review}/SKILL.md +8 -9
- package/skills/systematic-debugging/SKILL.md +2 -0
- package/skills/techdebt/SKILL.md +2 -0
- package/skills/{vibe-test → test}/SKILL.md +12 -12
- package/skills/tool-fallback/SKILL.md +1 -0
- package/skills/typescript-advanced-types/SKILL.md +1 -0
- package/skills/ui-ux-pro-max/SKILL.md +1 -0
- package/skills/user-personas/SKILL.md +1 -0
- package/skills/vercel-react-best-practices/SKILL.md +1 -0
- package/skills/vibe/SKILL.md +266 -0
- package/{commands/vibe.analyze.md → skills/vibe.analyze/SKILL.md} +2 -0
- package/skills/vibe.clone/SKILL.md +117 -0
- package/{commands/vibe.contract.md → skills/vibe.contract/SKILL.md} +3 -1
- package/{commands/vibe.docs.md → skills/vibe.docs/SKILL.md} +3 -1
- package/{commands/vibe.event.md → skills/vibe.event/SKILL.md} +2 -0
- package/{commands/vibe.figma.md → skills/vibe.figma/SKILL.md} +25 -23
- package/{commands/vibe.harness.md → skills/vibe.harness/SKILL.md} +2 -0
- package/{commands/vibe.reason.md → skills/vibe.reason/SKILL.md} +2 -0
- package/{commands/vibe.regress.md → skills/vibe.regress/SKILL.md} +5 -3
- package/{commands/vibe.review.md → skills/vibe.review/SKILL.md} +2 -0
- package/{commands/vibe.run.md → skills/vibe.run/SKILL.md} +3 -1
- package/{commands/vibe.scaffold.md → skills/vibe.scaffold/SKILL.md} +2 -0
- package/{commands/vibe.spec.md → skills/vibe.spec/SKILL.md} +36 -34
- package/{commands/vibe.test.md → skills/vibe.test/SKILL.md} +4 -2
- package/{commands/vibe.trace.md → skills/vibe.trace/SKILL.md} +7 -0
- package/{commands/vibe.utils.md → skills/vibe.utils/SKILL.md} +2 -0
- package/{commands/vibe.verify.md → skills/vibe.verify/SKILL.md} +4 -2
- package/skills/video-production/SKILL.md +1 -0
- /package/agents/{teams/figma → figma}/figma-architect.md +0 -0
- /package/agents/{teams/figma → figma}/figma-auditor.md +0 -0
- /package/agents/{teams/figma → figma}/figma-builder.md +0 -0
- /package/skills/{vibe-docs → docs}/templates/architecture.md +0 -0
- /package/skills/{vibe-docs → docs}/templates/behavioral-principles.md +0 -0
- /package/skills/{vibe-docs → docs}/templates/readme.md +0 -0
- /package/skills/{vibe-docs → docs}/templates/release-notes.md +0 -0
- /package/skills/{vibe-figma → figma}/rubrics/extraction-checklist.md +0 -0
- /package/skills/{vibe-figma → figma}/templates/component-index.md +0 -0
- /package/skills/{vibe-figma → figma}/templates/component-spec.md +0 -0
- /package/skills/{vibe-figma → figma}/templates/figma-handoff.md +0 -0
- /package/skills/{vibe-figma → figma}/templates/remapped-tree.md +0 -0
- /package/skills/{vibe-figma-convert → figma-convert}/rubrics/conversion-rules.md +0 -0
- /package/skills/{vibe-figma-convert → figma-convert}/templates/component.md +0 -0
- /package/skills/{vibe-figma-extract → figma-extract}/rubrics/image-rules.md +0 -0
- /package/skills/{vibe-interview → interview}/checklists/api.md +0 -0
- /package/skills/{vibe-interview → interview}/checklists/feature.md +0 -0
- /package/skills/{vibe-interview → interview}/checklists/library.md +0 -0
- /package/skills/{vibe-interview → interview}/checklists/mobile.md +0 -0
- /package/skills/{vibe-interview → interview}/checklists/webapp.md +0 -0
- /package/skills/{vibe-interview → interview}/checklists/website.md +0 -0
- /package/skills/{vibe-regress → regress}/templates/bug.md +0 -0
- /package/skills/{vibe-regress → regress}/templates/test-jest.md +0 -0
- /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: 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:
|
|
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 `
|
|
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 `
|
|
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 `
|
|
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-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]
|
package/skills/devlog/SKILL.md
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
---
|
|
2
|
-
name:
|
|
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/
|
|
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:
|
|
3
|
-
description: Figma
|
|
4
|
-
|
|
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:
|
|
3
|
-
description: Figma tree →
|
|
4
|
-
|
|
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:
|
|
3
|
-
description:
|
|
4
|
-
|
|
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]
|
package/skills/handoff/SKILL.md
CHANGED
|
@@ -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]
|