@su-record/vibe 3.2.1 → 3.2.2
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 +1 -1
- package/README.en.md +4 -4
- package/README.md +4 -4
- package/dist/__tests__/skill-namespace.test.d.ts +2 -0
- package/dist/__tests__/skill-namespace.test.d.ts.map +1 -0
- package/dist/__tests__/skill-namespace.test.js +60 -0
- package/dist/__tests__/skill-namespace.test.js.map +1 -0
- package/dist/__tests__/wiring-integrity.test.js +5 -5
- package/dist/__tests__/wiring-integrity.test.js.map +1 -1
- package/dist/cli/generate-release-notes.d.ts +3 -0
- package/dist/cli/generate-release-notes.d.ts.map +1 -0
- package/dist/cli/generate-release-notes.js +47 -0
- package/dist/cli/generate-release-notes.js.map +1 -0
- package/dist/cli/postinstall/constants.d.ts +6 -6
- package/dist/cli/postinstall/constants.d.ts.map +1 -1
- package/dist/cli/postinstall/constants.js +114 -46
- package/dist/cli/postinstall/constants.js.map +1 -1
- package/dist/cli/postinstall/fs-utils.d.ts +1 -0
- package/dist/cli/postinstall/fs-utils.d.ts.map +1 -1
- package/dist/cli/postinstall/fs-utils.js +25 -0
- package/dist/cli/postinstall/fs-utils.js.map +1 -1
- package/dist/cli/postinstall/fs-utils.test.js +46 -11
- package/dist/cli/postinstall/fs-utils.test.js.map +1 -1
- package/dist/cli/postinstall/main.d.ts.map +1 -1
- package/dist/cli/postinstall/main.js +3 -2
- package/dist/cli/postinstall/main.js.map +1 -1
- package/dist/tests/curated-release-notes.test.d.ts +2 -0
- package/dist/tests/curated-release-notes.test.d.ts.map +1 -0
- package/dist/tests/curated-release-notes.test.js +106 -0
- package/dist/tests/curated-release-notes.test.js.map +1 -0
- package/dist/tools/release/releaseNotes.d.ts +21 -0
- package/dist/tools/release/releaseNotes.d.ts.map +1 -0
- package/dist/tools/release/releaseNotes.js +105 -0
- package/dist/tools/release/releaseNotes.js.map +1 -0
- package/hooks/scripts/__tests__/.vibe/command-log.txt +3 -3
- package/package.json +2 -2
- package/skills/{agents-md → vibe.agents-md}/SKILL.md +1 -1
- package/skills/{brand-assets → vibe.brand-assets}/SKILL.md +1 -1
- package/skills/{capability-loop → vibe.capability-loop}/SKILL.md +1 -1
- package/skills/{chub-usage → vibe.chub-usage}/SKILL.md +1 -1
- package/skills/vibe.clone/SKILL.md +295 -3
- package/skills/{commerce-patterns → vibe.commerce-patterns}/SKILL.md +1 -1
- package/skills/{commit-push-pr → vibe.commit-push-pr}/SKILL.md +2 -2
- package/skills/{context7-usage → vibe.context7-usage}/SKILL.md +1 -1
- package/skills/vibe.contract/SKILL.md +162 -1
- package/skills/{create-prd → vibe.create-prd}/SKILL.md +2 -2
- package/skills/{design-refine → vibe.design-refine}/SKILL.md +1 -1
- package/skills/{design-review → vibe.design-review}/SKILL.md +1 -1
- package/skills/{design-teach → vibe.design-teach}/SKILL.md +1 -1
- package/skills/{devlog → vibe.devlog}/SKILL.md +1 -1
- package/skills/vibe.docs/SKILL.md +256 -1
- package/skills/{e2e-commerce → vibe.e2e-commerce}/SKILL.md +1 -1
- package/skills/vibe.educational-content/SKILL.md +157 -0
- package/skills/vibe.educational-content/references/learning-design.md +81 -0
- package/skills/vibe.educational-content/references/output-patterns.md +109 -0
- package/skills/vibe.educational-content/references/source-method.md +40 -0
- package/skills/{event-comms → vibe.event-comms}/SKILL.md +1 -1
- package/skills/{event-ops → vibe.event-ops}/SKILL.md +1 -1
- package/skills/{event-planning → vibe.event-planning}/SKILL.md +1 -1
- package/skills/vibe.figma/SKILL.md +473 -21
- package/skills/vibe.figma/references/branch-phases.md +1 -1
- package/skills/{git-worktree → vibe.git-worktree}/SKILL.md +1 -1
- package/skills/{handoff → vibe.handoff}/SKILL.md +1 -1
- package/skills/{parallel-research → vibe.parallel-research}/SKILL.md +2 -2
- package/skills/{presentation → vibe.presentation}/SKILL.md +1 -1
- package/skills/{prioritization-frameworks → vibe.prioritization}/SKILL.md +2 -2
- package/skills/{priority-todos → vibe.priority-todos}/SKILL.md +1 -1
- package/skills/{vercel-react-best-practices → vibe.react-best-practices}/SKILL.md +1 -1
- package/skills/vibe.regress/SKILL.md +182 -2
- package/skills/vibe.run/SKILL.md +388 -1
- package/skills/{arch-guard → vibe.run/internal/arch-guard}/templates/violation-report.md +1 -1
- package/skills/{seo-checklist → vibe.seo-checklist}/SKILL.md +1 -1
- package/skills/vibe.spec/SKILL.md +122 -1
- package/skills/vibe.test/SKILL.md +138 -2
- package/skills/{tool-fallback → vibe.tool-fallback}/SKILL.md +1 -1
- package/skills/{ui-ux-pro-max → vibe.ui-ux-pro-max}/SKILL.md +6 -6
- package/skills/{user-personas → vibe.user-personas}/SKILL.md +2 -2
- package/skills/vibe.verify/SKILL.md +2 -2
- package/skills/{video-production → vibe.video-production}/SKILL.md +1 -1
- package/skills/arch-guard/SKILL.md +0 -183
- package/skills/clone/SKILL.md +0 -296
- package/skills/contract/SKILL.md +0 -165
- package/skills/docs/SKILL.md +0 -259
- package/skills/exec-plan/SKILL.md +0 -151
- package/skills/figma/SKILL.md +0 -456
- package/skills/regress/SKILL.md +0 -184
- package/skills/restraint/SKILL.md +0 -72
- package/skills/spec/SKILL.md +0 -125
- package/skills/test/SKILL.md +0 -140
- /package/skills/{agents-md → vibe.agents-md}/rubrics/what-to-keep.md +0 -0
- /package/skills/{agents-md → vibe.agents-md}/templates/agents-md.md +0 -0
- /package/skills/{agents-md → vibe.agents-md}/templates/claude-md.md +0 -0
- /package/skills/{brand-assets → vibe.brand-assets}/rubrics/asset-checklist.md +0 -0
- /package/skills/{brand-assets → vibe.brand-assets}/templates/brand-guide.md +0 -0
- /package/skills/{capability-loop → vibe.capability-loop}/agents/capability-designer.md +0 -0
- /package/skills/{capability-loop → vibe.capability-loop}/agents/failure-analyst.md +0 -0
- /package/skills/{capability-loop → vibe.capability-loop}/agents/implementer.md +0 -0
- /package/skills/{capability-loop → vibe.capability-loop}/agents/tester.md +0 -0
- /package/skills/{capability-loop → vibe.capability-loop}/templates/capability-spec.md +0 -0
- /package/skills/{capability-loop → vibe.capability-loop}/templates/failure-analysis.md +0 -0
- /package/skills/{clone → vibe.clone}/references/capture-rules.md +0 -0
- /package/skills/{clone → vibe.clone}/references/legal-and-error-recovery.md +0 -0
- /package/skills/{clone → vibe.clone}/references/refine-rules.md +0 -0
- /package/skills/{clone → vibe.clone}/references/scaffold-phases.md +0 -0
- /package/skills/{clone → vibe.clone}/references/setup-and-layout.md +0 -0
- /package/skills/{commerce-patterns → vibe.commerce-patterns}/rubrics/checkout-flow.md +0 -0
- /package/skills/{commerce-patterns → vibe.commerce-patterns}/templates/product-schema.md +0 -0
- /package/skills/{commit-push-pr → vibe.commit-push-pr}/agents/change-analyzer.md +0 -0
- /package/skills/{commit-push-pr → vibe.commit-push-pr}/agents/message-writer.md +0 -0
- /package/skills/{commit-push-pr → vibe.commit-push-pr}/agents/pr-writer.md +0 -0
- /package/skills/{commit-push-pr → vibe.commit-push-pr}/agents/reviewer.md +0 -0
- /package/skills/{commit-push-pr → vibe.commit-push-pr}/rubrics/commit-message.md +0 -0
- /package/skills/{commit-push-pr → vibe.commit-push-pr}/templates/pr-body.md +0 -0
- /package/skills/{context7-usage → vibe.context7-usage}/rubrics/when-to-use.md +0 -0
- /package/skills/{create-prd → vibe.create-prd}/agents/edge-case-finder.md +0 -0
- /package/skills/{create-prd → vibe.create-prd}/agents/prioritizer.md +0 -0
- /package/skills/{create-prd → vibe.create-prd}/agents/requirements-writer.md +0 -0
- /package/skills/{create-prd → vibe.create-prd}/agents/researcher.md +0 -0
- /package/skills/{create-prd → vibe.create-prd}/agents/reviewer.md +0 -0
- /package/skills/{create-prd → vibe.create-prd}/frameworks/jobs-to-be-done.md +0 -0
- /package/skills/{create-prd → vibe.create-prd}/frameworks/rice-scoring.md +0 -0
- /package/skills/{create-prd → vibe.create-prd}/orchestrator.md +0 -0
- /package/skills/{create-prd → vibe.create-prd}/rubrics/completeness.md +0 -0
- /package/skills/{create-prd → vibe.create-prd}/templates/prd.md +0 -0
- /package/skills/{design-refine → vibe.design-refine}/rubrics/polish-checklist.md +0 -0
- /package/skills/{design-refine → vibe.design-refine}/rubrics/token-naming.md +0 -0
- /package/skills/{design-refine → vibe.design-refine}/templates/design-system.md +0 -0
- /package/skills/{design-refine → vibe.design-refine}/templates/polish-report.md +0 -0
- /package/skills/{design-refine → vibe.design-refine}/templates/token-audit.md +0 -0
- /package/skills/{design-review → vibe.design-review}/agents/a11y-auditor.md +0 -0
- /package/skills/{design-review → vibe.design-review}/agents/performance-auditor.md +0 -0
- /package/skills/{design-review → vibe.design-review}/agents/responsive-auditor.md +0 -0
- /package/skills/{design-review → vibe.design-review}/agents/scorer.md +0 -0
- /package/skills/{design-review → vibe.design-review}/agents/slop-detector.md +0 -0
- /package/skills/{design-review → vibe.design-review}/frameworks/core-web-vitals.md +0 -0
- /package/skills/{design-review → vibe.design-review}/frameworks/wcag-checklist.md +0 -0
- /package/skills/{design-review → vibe.design-review}/orchestrator.md +0 -0
- /package/skills/{design-review → vibe.design-review}/rubrics/ai-slop-patterns.md +0 -0
- /package/skills/{design-review → vibe.design-review}/rubrics/scoring.md +0 -0
- /package/skills/{design-review → vibe.design-review}/rubrics/ux-heuristics.md +0 -0
- /package/skills/{design-review → vibe.design-review}/templates/critique-report.md +0 -0
- /package/skills/{design-review → vibe.design-review}/templates/report.md +0 -0
- /package/skills/{design-teach → vibe.design-teach}/rubrics/brand-personality.md +0 -0
- /package/skills/{design-teach → vibe.design-teach}/templates/design-context.json +0 -0
- /package/skills/{docs → vibe.docs}/references/api-docs-changelog.md +0 -0
- /package/skills/{docs → vibe.docs}/references/codemaps-output.md +0 -0
- /package/skills/{docs → vibe.docs}/references/diagram-spec.md +0 -0
- /package/skills/{docs → vibe.docs}/templates/architecture.md +0 -0
- /package/skills/{docs → vibe.docs}/templates/behavioral-principles.md +0 -0
- /package/skills/{docs → vibe.docs}/templates/readme.md +0 -0
- /package/skills/{docs → vibe.docs}/templates/release-notes.md +0 -0
- /package/skills/{e2e-commerce → vibe.e2e-commerce}/templates/test-scenarios.md +0 -0
- /package/skills/{event-comms → vibe.event-comms}/templates/email-invite.md +0 -0
- /package/skills/{event-comms → vibe.event-comms}/templates/sns-post.md +0 -0
- /package/skills/{event-ops → vibe.event-ops}/rubrics/contingency.md +0 -0
- /package/skills/{event-ops → vibe.event-ops}/templates/d-day-checklist.md +0 -0
- /package/skills/{event-planning → vibe.event-planning}/rubrics/timeline.md +0 -0
- /package/skills/{event-planning → vibe.event-planning}/templates/event-plan.md +0 -0
- /package/skills/{figma → vibe.figma}/rubrics/conversion-rules.md +0 -0
- /package/skills/{figma → vibe.figma}/rubrics/css-mapping.md +0 -0
- /package/skills/{figma → vibe.figma}/rubrics/extraction-checklist.md +0 -0
- /package/skills/{figma → vibe.figma}/rubrics/image-rules.md +0 -0
- /package/skills/{figma → vibe.figma}/templates/component-index.md +0 -0
- /package/skills/{figma → vibe.figma}/templates/component-spec.md +0 -0
- /package/skills/{figma → vibe.figma}/templates/component.md +0 -0
- /package/skills/{figma → vibe.figma}/templates/figma-handoff.md +0 -0
- /package/skills/{figma → vibe.figma}/templates/remapped-tree.md +0 -0
- /package/skills/{git-worktree → vibe.git-worktree}/rubrics/when-to-use.md +0 -0
- /package/skills/{handoff → vibe.handoff}/agents/context-summarizer.md +0 -0
- /package/skills/{handoff → vibe.handoff}/agents/document-writer.md +0 -0
- /package/skills/{handoff → vibe.handoff}/agents/state-collector.md +0 -0
- /package/skills/{handoff → vibe.handoff}/agents/verifier.md +0 -0
- /package/skills/{handoff → vibe.handoff}/rubrics/completeness.md +0 -0
- /package/skills/{handoff → vibe.handoff}/templates/handoff.md +0 -0
- /package/skills/{parallel-research → vibe.parallel-research}/agents/best-practices.md +0 -0
- /package/skills/{parallel-research → vibe.parallel-research}/agents/codebase-patterns.md +0 -0
- /package/skills/{parallel-research → vibe.parallel-research}/agents/framework-docs.md +0 -0
- /package/skills/{parallel-research → vibe.parallel-research}/agents/security-advisory.md +0 -0
- /package/skills/{parallel-research → vibe.parallel-research}/agents/synthesizer.md +0 -0
- /package/skills/{parallel-research → vibe.parallel-research}/experts/best-practices.md +0 -0
- /package/skills/{parallel-research → vibe.parallel-research}/experts/codebase-patterns.md +0 -0
- /package/skills/{parallel-research → vibe.parallel-research}/experts/framework-docs.md +0 -0
- /package/skills/{parallel-research → vibe.parallel-research}/experts/security-advisory.md +0 -0
- /package/skills/{parallel-research → vibe.parallel-research}/orchestrator.md +0 -0
- /package/skills/{parallel-research → vibe.parallel-research}/templates/awesome-list.md +0 -0
- /package/skills/{parallel-research → vibe.parallel-research}/templates/paper.md +0 -0
- /package/skills/{parallel-research → vibe.parallel-research}/templates/synthesis.md +0 -0
- /package/skills/{presentation → vibe.presentation}/references/style-presets.md +0 -0
- /package/skills/{prioritization-frameworks → vibe.prioritization}/rubrics/frameworks.md +0 -0
- /package/skills/{prioritization-frameworks → vibe.prioritization}/templates/scoring-matrix.md +0 -0
- /package/skills/{priority-todos → vibe.priority-todos}/rubrics/prioritization.md +0 -0
- /package/skills/{priority-todos → vibe.priority-todos}/templates/todo-board.md +0 -0
- /package/skills/{vercel-react-best-practices → vibe.react-best-practices}/rubrics/performance.md +0 -0
- /package/skills/{vercel-react-best-practices → vibe.react-best-practices}/rubrics/server-components.md +0 -0
- /package/skills/{regress → vibe.regress}/templates/bug.md +0 -0
- /package/skills/{regress → vibe.regress}/templates/test-jest.md +0 -0
- /package/skills/{regress → vibe.regress}/templates/test-vitest.md +0 -0
- /package/skills/{arch-guard → vibe.run/internal/arch-guard}/agents/detector.md +0 -0
- /package/skills/{arch-guard → vibe.run/internal/arch-guard}/agents/reporter.md +0 -0
- /package/skills/{arch-guard → vibe.run/internal/arch-guard}/agents/rule-generator.md +0 -0
- /package/skills/{arch-guard → vibe.run/internal/arch-guard}/agents/violation-checker.md +0 -0
- /package/skills/{arch-guard → vibe.run/internal/arch-guard}/frameworks/clean-architecture.md +0 -0
- /package/skills/{arch-guard → vibe.run/internal/arch-guard}/frameworks/solid.md +0 -0
- /package/skills/{arch-guard → vibe.run/internal/arch-guard}/scripts/check-boundaries.js +0 -0
- /package/skills/{arch-guard → vibe.run/internal/arch-guard}/templates/arch-rules.json +0 -0
- /package/skills/{exec-plan → vibe.run/internal/exec-plan}/agents/decomposer.md +0 -0
- /package/skills/{exec-plan → vibe.run/internal/exec-plan}/agents/dependency-mapper.md +0 -0
- /package/skills/{exec-plan → vibe.run/internal/exec-plan}/agents/estimator.md +0 -0
- /package/skills/{exec-plan → vibe.run/internal/exec-plan}/agents/validator.md +0 -0
- /package/skills/{exec-plan → vibe.run/internal/exec-plan}/orchestrator.md +0 -0
- /package/skills/{exec-plan → vibe.run/internal/exec-plan}/rubrics/complexity-scoring.md +0 -0
- /package/skills/{exec-plan → vibe.run/internal/exec-plan}/templates/plan.md +0 -0
- /package/skills/{seo-checklist → vibe.seo-checklist}/frameworks/structured-data.md +0 -0
- /package/skills/{seo-checklist → vibe.seo-checklist}/rubrics/content-seo.md +0 -0
- /package/skills/{seo-checklist → vibe.seo-checklist}/rubrics/technical-seo.md +0 -0
- /package/skills/{tool-fallback → vibe.tool-fallback}/rubrics/fallback-chain.md +0 -0
- /package/skills/{ui-ux-pro-max → vibe.ui-ux-pro-max}/reference/color-and-contrast.md +0 -0
- /package/skills/{ui-ux-pro-max → vibe.ui-ux-pro-max}/reference/interaction-design.md +0 -0
- /package/skills/{ui-ux-pro-max → vibe.ui-ux-pro-max}/reference/motion-design.md +0 -0
- /package/skills/{ui-ux-pro-max → vibe.ui-ux-pro-max}/reference/responsive-design.md +0 -0
- /package/skills/{ui-ux-pro-max → vibe.ui-ux-pro-max}/reference/spatial-design.md +0 -0
- /package/skills/{ui-ux-pro-max → vibe.ui-ux-pro-max}/reference/typography.md +0 -0
- /package/skills/{ui-ux-pro-max → vibe.ui-ux-pro-max}/reference/ux-writing.md +0 -0
- /package/skills/{ui-ux-pro-max → vibe.ui-ux-pro-max}/rubrics/interaction-states.md +0 -0
- /package/skills/{ui-ux-pro-max → vibe.ui-ux-pro-max}/rubrics/responsive-breakpoints.md +0 -0
- /package/skills/{user-personas → vibe.user-personas}/rubrics/research-methods.md +0 -0
- /package/skills/{user-personas → vibe.user-personas}/templates/persona.md +0 -0
- /package/skills/{video-production → vibe.video-production}/rubrics/quality-checklist.md +0 -0
- /package/skills/{video-production → vibe.video-production}/templates/production-plan.md +0 -0
package/skills/figma/SKILL.md
DELETED
|
@@ -1,456 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
name: figma
|
|
3
|
-
description: Figma → 코드 본체 — tree 기반 구조적 코드 생성 (extract/convert 모드 통합).
|
|
4
|
-
when_to_use: /vibe.figma 진입점에서 체인 호출. 직접 호출 금지.
|
|
5
|
-
user-invocable: false
|
|
6
|
-
tier: standard
|
|
7
|
-
---
|
|
8
|
-
|
|
9
|
-
# vibe.figma — Structural Code Generation
|
|
10
|
-
|
|
11
|
-
## Core Principles
|
|
12
|
-
|
|
13
|
-
```
|
|
14
|
-
The Figma tree is the source of truth for code. Screenshots are for verification only.
|
|
15
|
-
|
|
16
|
-
✅ Figma Auto Layout → CSS Flexbox 1:1 mechanical mapping
|
|
17
|
-
✅ Figma CSS properties → SCSS direct conversion (no guessing)
|
|
18
|
-
✅ Claude handles semantic decisions only: tag selection, component splitting, interactions
|
|
19
|
-
```
|
|
20
|
-
|
|
21
|
-
## Immutable Rules
|
|
22
|
-
|
|
23
|
-
```
|
|
24
|
-
1. Do NOT render content as images (frames with TEXT children, INSTANCEs, buttons/prices,
|
|
25
|
-
whole sections). Image rendering only for BG, vector-text GROUPs, verification screenshots.
|
|
26
|
-
2. BG must use CSS background-image only. <img> tag is forbidden.
|
|
27
|
-
3. No new screenshot calls during Phase 4. Use only Phase 2 materials —
|
|
28
|
-
no matter how complex, implement with HTML+CSS.
|
|
29
|
-
```
|
|
30
|
-
|
|
31
|
-
## Full Flow
|
|
32
|
-
|
|
33
|
-
```
|
|
34
|
-
Input: receive all URLs at once
|
|
35
|
-
Storyboard: figma.com/...?node-id=aaa (if present)
|
|
36
|
-
MO Design: figma.com/...?node-id=xxx
|
|
37
|
-
PC Design: figma.com/...?node-id=yyy (if present)
|
|
38
|
-
|
|
39
|
-
→ Phase 0: Setup
|
|
40
|
-
→ Phase 1: Storyboard analysis → functional spec document
|
|
41
|
-
→ Phase 2: Gather materials (→ Extract Mode section below)
|
|
42
|
-
→ Phase 3: Remapping (MO↔PC matching → remapped.json)
|
|
43
|
-
→ Phase 4: Sequential code generation (→ Convert Mode section below)
|
|
44
|
-
→ Phase 5: Compile gate
|
|
45
|
-
→ Phase 6: Visual verification loop
|
|
46
|
-
|
|
47
|
-
Working directory: /tmp/{feature}/{mo,pc}-main/{tree.json, bg/, content/, sections/}
|
|
48
|
-
+ remapped.json ← sole input for Phase 4
|
|
49
|
-
Code output: directly in the project — components/{feature}/, styles/{feature}/
|
|
50
|
-
```
|
|
51
|
-
|
|
52
|
-
---
|
|
53
|
-
|
|
54
|
-
## Phase 0: Setup
|
|
55
|
-
|
|
56
|
-
```
|
|
57
|
-
1. Stack detection: package.json → react/vue/svelte, next/nuxt, scss/tailwind
|
|
58
|
-
2. Feature name: Figma filename → kebab-case
|
|
59
|
-
3. Directories: components/{feature}/, public/images/{feature}/, styles/{feature}/
|
|
60
|
-
4. Component indexing → component-index.json (≤50 components, props/slots/classes, ≤2 min)
|
|
61
|
-
5. Hooks/Types/Constants → context-index.json
|
|
62
|
-
6. Design token scan → project-tokens.json (SCSS > CSS Variables > Tailwind > CSS-in-JS)
|
|
63
|
-
(all indexes under /tmp/{feature}/)
|
|
64
|
-
```
|
|
65
|
-
|
|
66
|
-
---
|
|
67
|
-
|
|
68
|
-
## Phase 1: Storyboard Analysis
|
|
69
|
-
|
|
70
|
-
```
|
|
71
|
-
User input: URLs or PDF/images separated by newlines
|
|
72
|
-
URL classification (automatic): different fileKey → storyboard vs design;
|
|
73
|
-
ROOT name contains "MO" → mobile, "PC" → desktop
|
|
74
|
-
|
|
75
|
-
Storyboard analysis: collect frames at depth=3 → classify by name pattern
|
|
76
|
-
SPEC (functional definition) → CONFIG (resolution) → PAGE (main sections) → SHARED (common)
|
|
77
|
-
PDF/images follow the same structural extraction
|
|
78
|
-
|
|
79
|
-
❌ No code file creation during Phase 1
|
|
80
|
-
|
|
81
|
-
Output (text only): section list table · per-section functional definition
|
|
82
|
-
([Function] + [Interaction] + [State]) · common component list · TS interface draft
|
|
83
|
-
```
|
|
84
|
-
|
|
85
|
-
---
|
|
86
|
-
|
|
87
|
-
## Phase 2: Gather Materials ← Research (parallel)
|
|
88
|
-
|
|
89
|
-
**→ Follow the Extract Mode rules below.**
|
|
90
|
-
**Coordinator pattern: run MO/PC extraction as parallel workers.**
|
|
91
|
-
|
|
92
|
-
```
|
|
93
|
-
# [FIGMA_SCRIPT] = {{VIBE_PATH}}/hooks/scripts/figma-extract.js
|
|
94
|
-
|
|
95
|
-
Simultaneous MO/PC extraction — each worker: screenshot → tree → images →
|
|
96
|
-
asset rendering → sections/. Proceed to Phase 3 only after both complete.
|
|
97
|
-
Single BP: run sequentially with 1 worker
|
|
98
|
-
Multi-frame (same BP, different pages): sequential (500ms interval), partial failure allowed
|
|
99
|
-
```
|
|
100
|
-
|
|
101
|
-
---
|
|
102
|
-
|
|
103
|
-
## Phase 3: Data Refinement ← Synthesis (independent per BP)
|
|
104
|
-
|
|
105
|
-
**Split and refine each BP's tree.json by section. MO↔PC matching is NOT done here.**
|
|
106
|
-
|
|
107
|
-
### BLOCKING Command — Writing custom refine scripts is strictly forbidden
|
|
108
|
-
|
|
109
|
-
```bash
|
|
110
|
-
# MO
|
|
111
|
-
node {{VIBE_PATH}}/hooks/scripts/figma-refine.js \
|
|
112
|
-
/tmp/{feature}/mo-main/tree.json \
|
|
113
|
-
--out=/tmp/{feature}/mo-main/sections.json \
|
|
114
|
-
--design-width=720 \
|
|
115
|
-
--bp=mo
|
|
116
|
-
|
|
117
|
-
# PC
|
|
118
|
-
node {{VIBE_PATH}}/hooks/scripts/figma-refine.js \
|
|
119
|
-
/tmp/{feature}/pc-main/tree.json \
|
|
120
|
-
--out=/tmp/{feature}/pc-main/sections.json \
|
|
121
|
-
--design-width=2560 \
|
|
122
|
-
--bp=pc
|
|
123
|
-
```
|
|
124
|
-
|
|
125
|
-
⛔ **Phase 4 is blocked until these commands are executed.**
|
|
126
|
-
⛔ **No custom refine scripts, no parsing tree.json directly to produce sections.json.**
|
|
127
|
-
✅ Use only figma-refine.js output. If unsatisfactory, modify figma-refine.js.
|
|
128
|
-
|
|
129
|
-
```
|
|
130
|
-
⛔ Refine each BP independently — do NOT mix MO and PC.
|
|
131
|
-
⛔ The refined JSON (full recursive subtree per section) is the sole input for Phase 4.
|
|
132
|
-
```
|
|
133
|
-
|
|
134
|
-
### Output
|
|
135
|
-
|
|
136
|
-
```
|
|
137
|
-
/tmp/{feature}/{mo,pc}-main/sections.json ← per-BP refinement result
|
|
138
|
-
|
|
139
|
-
sections.json structure:
|
|
140
|
-
{
|
|
141
|
-
meta: { feature, designWidth, bp },
|
|
142
|
-
sections: [{
|
|
143
|
-
name: "Hero", nodeId, type, size, css,
|
|
144
|
-
text, imageRef, fills, layoutSizingH, layoutSizingV,
|
|
145
|
-
children: [ ... ], // ⛔ full recursive subtree — down to leaf nodes
|
|
146
|
-
images: { bg: "bg/hero-bg.webp", content: ["content/hero-title.webp"] }
|
|
147
|
-
}]
|
|
148
|
-
}
|
|
149
|
-
```
|
|
150
|
-
|
|
151
|
-
### Node Refinement Rules (tree.json → sections.json)
|
|
152
|
-
|
|
153
|
-
```
|
|
154
|
-
1. size-0px nodes, VECTOR decorative lines (w/h ≤ 2px), isMask nodes → remove
|
|
155
|
-
2. BG frames → separate from children, move to images.bg
|
|
156
|
-
3. Vector-text GROUPs + design text (TEXT with multiple/gradient fills or effects)
|
|
157
|
-
→ separate from children, add to images.content
|
|
158
|
-
4. Remaining nodes → keep in children (with CSS, recursive)
|
|
159
|
-
|
|
160
|
-
Multi-frame (same BP, different pages): identify common elements → shared components;
|
|
161
|
-
union of common tokens → shared _tokens.scss
|
|
162
|
-
```
|
|
163
|
-
|
|
164
|
-
---
|
|
165
|
-
|
|
166
|
-
## Phase 4: Per-BP Static Implementation ← Implement (sequential per BP)
|
|
167
|
-
|
|
168
|
-
**→ Follow the Convert Mode rules below.**
|
|
169
|
-
**⛔ Implement MO fully first → pass verification → then implement PC. No responsive conversion.**
|
|
170
|
-
**⛔ CSS values must use Figma original px as-is. vw conversion, clamp, @media are forbidden.**
|
|
171
|
-
|
|
172
|
-
### BLOCKING Command — SCSS must only use script output
|
|
173
|
-
|
|
174
|
-
```bash
|
|
175
|
-
# Step A: Auto-generate SCSS skeleton (run once per BP)
|
|
176
|
-
node {{VIBE_PATH}}/hooks/scripts/figma-to-scss.js \
|
|
177
|
-
/tmp/{feature}/{bp}-main/sections.json \
|
|
178
|
-
--out=/path/to/project/assets/scss/{feature}/
|
|
179
|
-
|
|
180
|
-
# Step B: Per-section validation (after writing each section's code)
|
|
181
|
-
node {{VIBE_PATH}}/hooks/scripts/figma-validate.js \
|
|
182
|
-
/path/to/project/assets/scss/{feature}/ \
|
|
183
|
-
/tmp/{feature}/{bp}-main/sections.json \
|
|
184
|
-
--section={SectionName}
|
|
185
|
-
```
|
|
186
|
-
|
|
187
|
-
⛔ **Writing SCSS directly (or via custom generation scripts) invalidates Phase 4.**
|
|
188
|
-
⛔ **Do NOT proceed to the next section without a figma-validate.js PASS.**
|
|
189
|
-
⛔ **No CSS values inside scoped style blocks** — only @import/@use of external SCSS files.
|
|
190
|
-
✅ Use figma-to-scss.js output as-is. If unsatisfactory, modify figma-to-scss.js.
|
|
191
|
-
|
|
192
|
-
```
|
|
193
|
-
Phase 4A: MO Static Implementation (input: mo-main/sections.json)
|
|
194
|
-
⛔ No parallelism. Process one section at a time:
|
|
195
|
-
1. Read the target section from sections.json
|
|
196
|
-
2. Write an image vs HTML classification table (BLOCKING — see Convert Mode §C1)
|
|
197
|
-
3. figma-to-scss.js → auto-generate SCSS skeleton (px as-is) — Step A once
|
|
198
|
-
4. Claude: HTML structure + semantic tags + layout + interactions (Vue/React files only)
|
|
199
|
-
5. figma-validate.js — Step B: PASS → next section │ FAIL → fix → re-run
|
|
200
|
-
(repeat until P1=0, no round cap)
|
|
201
|
-
→ Phase 5 (MO compile) → Phase 6 (MO visual verification)
|
|
202
|
-
|
|
203
|
-
Phase 4B: PC Static Implementation (input: pc-main/sections.json)
|
|
204
|
-
Same process as MO → Phase 5 (PC compile) → Phase 6 (PC visual verification)
|
|
205
|
-
|
|
206
|
-
Phase 4C: Responsive Integration (after both MO+PC pass verification)
|
|
207
|
-
→ Separate flow to be established (TODO)
|
|
208
|
-
|
|
209
|
-
Claude's role (restricted): semantic decisions only (Convert Mode §C3) + image classification
|
|
210
|
-
+ executing figma-to-scss.js / figma-validate.js.
|
|
211
|
-
❌ No modifying SCSS values, no CSS in <style> blocks, no vw/clamp/@media,
|
|
212
|
-
no custom functions/mixins, no custom refine/generate scripts.
|
|
213
|
-
|
|
214
|
-
SCSS Setup (before the first section):
|
|
215
|
-
index.scss, _tokens.scss, _base.scss
|
|
216
|
-
Token mapping: reference existing tokens from project-tokens.json → create new ones if no match
|
|
217
|
-
|
|
218
|
-
Component matching (before each section):
|
|
219
|
-
Compare against component-index.json → import if matched, create new if not
|
|
220
|
-
|
|
221
|
-
Multi-frame:
|
|
222
|
-
Step 1: shared components first → components/shared/
|
|
223
|
-
Step 2: unique sections per frame
|
|
224
|
-
```
|
|
225
|
-
|
|
226
|
-
---
|
|
227
|
-
|
|
228
|
-
## Phase 5: Compile Gate
|
|
229
|
-
|
|
230
|
-
```
|
|
231
|
-
No round cap. Loop until compile succeeds (or stuck → ask user).
|
|
232
|
-
|
|
233
|
-
0. Capture baseline (before Phase 4): record existing tsc + build errors → fix NEW errors only
|
|
234
|
-
1. TypeScript: vue-tsc/svelte-check/tsc --noEmit
|
|
235
|
-
2. Build: npm run build (120s timeout)
|
|
236
|
-
3. Dev server: npm run dev → detect port → polling
|
|
237
|
-
|
|
238
|
-
On error: parse → auto-fix → re-check
|
|
239
|
-
Termination:
|
|
240
|
-
✅ Success: all checks pass → enter Phase 6
|
|
241
|
-
⚠️ Stuck (same errors as previous round) → ask user: fix instructions │ "proceed"
|
|
242
|
-
(record TODO, go to Phase 6) │ "abort". ultrawork: record TODO + proceed silently.
|
|
243
|
-
|
|
244
|
-
On completion: preserve dev server PID → used in Phase 6
|
|
245
|
-
|
|
246
|
-
⛔ After Phase 5 passes (or user proceeds), must enter Phase 6.
|
|
247
|
-
Do NOT output a "completion summary" or declare work complete without Phase 6.
|
|
248
|
-
```
|
|
249
|
-
|
|
250
|
-
---
|
|
251
|
-
|
|
252
|
-
## Phase 6: Visual Verification Loop ← Verify (parallel) MANDATORY
|
|
253
|
-
|
|
254
|
-
**⛔ Mandatory — enter automatically upon Phase 5 completion; skipping = task "incomplete".**
|
|
255
|
-
**Coordinator pattern: independent per-section verification can run as parallel workers.**
|
|
256
|
-
|
|
257
|
-
```
|
|
258
|
-
No round cap. Loop until P1=0 (or stuck → ask user).
|
|
259
|
-
Infrastructure: src/infra/lib/browser/ (Puppeteer + CDP)
|
|
260
|
-
|
|
261
|
-
1. Capture rendered screenshot → pixelmatch comparison against Figma screenshot
|
|
262
|
-
diffRatio > 0.1 → P1
|
|
263
|
-
2. CSS value comparison: computed CSS vs tree.json expected values
|
|
264
|
-
delta > 4px → P1, ≤ 4px → P2
|
|
265
|
-
3. Check for missing images and text
|
|
266
|
-
4. Fix P1 issues first (refer to tree.json, no guessing) → revalidate compile → reload
|
|
267
|
-
|
|
268
|
-
Narrowing scope: Round 1 P1+P2+P3 → Round 2 P1+P2 → Round 3+ P1 only (until P1=0)
|
|
269
|
-
|
|
270
|
-
Termination:
|
|
271
|
-
✅ Success: P1 = 0 AND no new findings → complete
|
|
272
|
-
⚠️ Stuck (same findings as previous round) → ask user: direct resolution │ "proceed"
|
|
273
|
-
(record TODO, complete) │ "abort". ultrawork: record TODO + complete silently.
|
|
274
|
-
|
|
275
|
-
Responsive: after MO verification, change viewport → same loop against PC screenshots
|
|
276
|
-
Cleanup: shut down browser + dev server
|
|
277
|
-
|
|
278
|
-
⛔ "Completion summary" output is only allowed after Phase 6 is complete (or user proceeds).
|
|
279
|
-
```
|
|
280
|
-
|
|
281
|
-
---
|
|
282
|
-
|
|
283
|
-
## Extract Mode (Phase 2 body) — Acquire Code Generation Data
|
|
284
|
-
|
|
285
|
-
Uses the Figma REST API (`src/infra/lib/figma/`) to extract **all data needed for structural code generation**. Priority: 1st node tree + CSS (PRIMARY source) → 2nd image assets → 3rd screenshots (Phase 6 validation only, never for generation).
|
|
286
|
-
|
|
287
|
-
### E1. Node Tree + CSS — Source of Truth
|
|
288
|
-
|
|
289
|
-
```
|
|
290
|
-
Bash:
|
|
291
|
-
node "{{VIBE_PATH}}/hooks/scripts/figma-extract.js" tree {fileKey} {nodeId}
|
|
292
|
-
|
|
293
|
-
Returns (FigmaNode JSON):
|
|
294
|
-
{ nodeId, name, type, size, css: { display, flexDirection, gap, ... },
|
|
295
|
-
text (TEXT only), imageRef, imageScaleMode (FILL/FIT/CROP/TILE),
|
|
296
|
-
layoutSizingH/V (FIXED/HUG/FILL), fills (only when 2+), isMask,
|
|
297
|
-
raw: { itemSpacing, padding*, cornerRadius, strokeWeight, strokeAlign, blendMode,
|
|
298
|
-
opacity, fontSize, lineHeightPx, letterSpacing, fontWeight, leadingTrim,
|
|
299
|
-
textBoxTrim }, ← Figma numbers for Phase 6 raw-vs-computed reconciliation
|
|
300
|
-
warnings: [{ property, value, severity: "P1"|"P2", reason }], ← translation-loss only
|
|
301
|
-
children: [...] }
|
|
302
|
-
|
|
303
|
-
Root node also carries:
|
|
304
|
-
auditSummary: { total, p1, p2, items: [{ nodeId, name, property, value, severity, reason }] }
|
|
305
|
-
|
|
306
|
-
→ Save to /tmp/{feature}/tree.json
|
|
307
|
-
|
|
308
|
-
Figma property → CSS mapping (what the extractor auto-converts): rubrics/css-mapping.md
|
|
309
|
-
```
|
|
310
|
-
|
|
311
|
-
### E2. Translation-loss Audit (Figma → CSS Incompatibilities)
|
|
312
|
-
|
|
313
|
-
The extractor flags properties CSS cannot reproduce cleanly (per-node `warnings[]`, rolled up as root `auditSummary`).
|
|
314
|
-
|
|
315
|
-
**P1 (block Phase 3 until resolved or waived):** `strokeAlign` ≠ `CENTER` (CSS border only renders centered strokes) · `blendMode` ∈ { `LINEAR_BURN`, `LINEAR_DODGE`, `PLUS_DARKER`, `PLUS_LIGHTER` } (no CSS equivalent).
|
|
316
|
-
|
|
317
|
-
**P2 (record + proceed):** `leadingTrim`/`textBoxTrim` ≠ `NONE` (limited `text-box-trim` support) · `constraints` ∈ { `SCALE`, `CENTER` } (no direct CSS layout mapping) · `individualStrokeWeights` with `strokeAlign` ≠ `CENTER`.
|
|
318
|
-
|
|
319
|
-
**Gate rule:** if `auditSummary.p1 > 0`, resolve each item (replace layer in Figma, accept approximation with user sign-off, or mark as known deviation) before Phase 3. Log P2 items into feature notes for Phase 6 reviewer attention.
|
|
320
|
-
|
|
321
|
-
### E3. Image Assets — Node Rendering Based
|
|
322
|
-
|
|
323
|
-
Full determination rules and real-world failure cases: `rubrics/image-rules.md`.
|
|
324
|
-
|
|
325
|
-
```
|
|
326
|
-
Do NOT download imageRef individually (shared texture fill → multi-MB originals).
|
|
327
|
-
All images are rendered as nodes:
|
|
328
|
-
node "{{VIBE_PATH}}/hooks/scripts/figma-extract.js" screenshot {fileKey} {nodeId} --out=...
|
|
329
|
-
|
|
330
|
-
BG frames → bg/{section}-bg.webp
|
|
331
|
-
Identification: name contains "BG"/"bg", OR same size as parent (±10%) + 3+ child images
|
|
332
|
-
Content nodes → content/{name}.webp
|
|
333
|
-
Icons (VECTOR/GROUP ≤ 64px) · item/reward/token/coin thumbnails
|
|
334
|
-
· vector-text GROUPs (3+ VECTORs, each <60px)
|
|
335
|
-
· design text (TEXT with 2+ fills, effects, GRADIENT fill, or non-web-font fontFamily)
|
|
336
|
-
→ must be rendered; placed as <img alt="text content">, never CSS text
|
|
337
|
-
· decorative panels (textured backgrounds) → render like BG frames
|
|
338
|
-
|
|
339
|
-
imageRef download is a fallback only (API failure, DOCUMENT level); >5MB → texture-fill warning.
|
|
340
|
-
Screenshots (validation only): full-screenshot.webp + per 1-depth child → sections/{name}.webp
|
|
341
|
-
```
|
|
342
|
-
|
|
343
|
-
### E4. Extraction Completion Validation (Required Before Phase 3)
|
|
344
|
-
|
|
345
|
-
```
|
|
346
|
-
If any item is missing → re-extract (do NOT proceed to Phase 3)
|
|
347
|
-
|
|
348
|
-
1. tree.json exists + root children > 0 · 2. BG per section exists in bg/
|
|
349
|
-
3. Every design-text TEXT node (2+ fills or effects) rendered in content/
|
|
350
|
-
4. Every vector-text GROUP (3+ VECTORs) rendered in content/
|
|
351
|
-
5. Per-section validation screenshots exist in sections/ · 6. All filenames kebab-case
|
|
352
|
-
```
|
|
353
|
-
|
|
354
|
-
---
|
|
355
|
-
|
|
356
|
-
## Convert Mode (Phase 4 body) — Tree-Based Structured Code Generation
|
|
357
|
-
|
|
358
|
-
**Mechanically map sections.json to HTML. Do not guess.**
|
|
359
|
-
**Claude handles only semantic decisions (tag selection, component separation, interactions). SCSS comes from figma-to-scss.js (Phase 4 blocking commands).**
|
|
360
|
-
|
|
361
|
-
### C0. Reuse Check (Before Writing Code)
|
|
362
|
-
|
|
363
|
-
```
|
|
364
|
-
Matching component in component-index.json?
|
|
365
|
-
✅ Import and customize via props — do not create a new one
|
|
366
|
-
❌ Never modify an existing component's internals or duplicate a 90%-similar one
|
|
367
|
-
```
|
|
368
|
-
|
|
369
|
-
### C1. Image vs HTML Determination (BLOCKING)
|
|
370
|
-
|
|
371
|
-
```
|
|
372
|
-
⛔ Before writing code: write the determination table first.
|
|
373
|
-
|
|
374
|
-
YES on any one → HTML:
|
|
375
|
-
Q1. TEXT children? · Q2. repeating INSTANCE? (→ v-for, inner assets only as <img>)
|
|
376
|
-
Q3. interactive? (btn, CTA → <button>) · Q4. dynamic data? (price, quantity, duration)
|
|
377
|
-
All NO → image rendering is acceptable
|
|
378
|
-
|
|
379
|
-
⛔ Design text (Q1 exception — must be image; D1–D5, same as Extract Mode E3):
|
|
380
|
-
D1. 2+ fills · D2. effects (DROP_SHADOW, stroke) · D3. GRADIENT fill
|
|
381
|
-
D4. parent GROUP/FRAME has 3+ VECTORs · D5. fontFamily not in project web fonts
|
|
382
|
-
→ <img src="content/{section}-{name}.webp" alt="text content"> — no CSS text attempt
|
|
383
|
-
|
|
384
|
-
BG frames: ❌ no <img> tags — parent SCSS background-image only
|
|
385
|
-
.section { background-image: url('bg.webp'); background-size: cover; }
|
|
386
|
-
```
|
|
387
|
-
|
|
388
|
-
### C2. Node → HTML Mapping (Mechanical)
|
|
389
|
-
|
|
390
|
-
```
|
|
391
|
-
FRAME + Auto Layout → <div> + flex (direction/gap/padding directly mapped)
|
|
392
|
-
FRAME + no Auto Layout → <div> + position:relative (children absolute)
|
|
393
|
-
TEXT → <span> (Claude promotes to h2/p/button)
|
|
394
|
-
IMAGE fill (passed determination) → <img>
|
|
395
|
-
VECTOR/GROUP ≤64px → icon <img>
|
|
396
|
-
INSTANCE repeated 2+ → v-for / .map()
|
|
397
|
-
Size 0px, VECTOR ≤2px → skip
|
|
398
|
-
```
|
|
399
|
-
|
|
400
|
-
CSS property mapping reference (grounding for figma-to-scss.js output review, plus legacy vw/responsive rules): `rubrics/css-mapping.md` — Phase 4 forbids hand-writing these values.
|
|
401
|
-
|
|
402
|
-
### C3. Claude Semantic Decisions (The Only Inference Area)
|
|
403
|
-
|
|
404
|
-
```
|
|
405
|
-
1. Tag promotion: <span> → <h2> (section title) / <p> (description) / <button> (clickable)
|
|
406
|
-
2. Component separation: 1st-depth children = sections, INSTANCE repetition = shared
|
|
407
|
-
3. Interactions: @click handlers, state variables, conditional rendering
|
|
408
|
-
4. Accessibility: decorative → alt="" aria-hidden="true" · content → alt="description"
|
|
409
|
-
· interactive → role, aria-label
|
|
410
|
-
5. Semantic HTML: top-level <section>, heading order h1~h6, lists <ul>/<ol>
|
|
411
|
-
```
|
|
412
|
-
|
|
413
|
-
Component skeleton template: `templates/component.md`.
|
|
414
|
-
|
|
415
|
-
### C4. SCSS File Structure
|
|
416
|
-
|
|
417
|
-
```
|
|
418
|
-
layout/ → position, display, flex, width, height, padding, gap, overflow, z-index
|
|
419
|
-
components/ → font, color, border, shadow, opacity, background
|
|
420
|
-
_base.scss → .{feature} { width: 100%; max-width: 720px; margin: 0 auto; overflow-x: hidden; }
|
|
421
|
-
_tokens.scss → reference existing tokens (@use); if no mapping, create a new
|
|
422
|
-
feature-scoped token ($feature-color-xxx)
|
|
423
|
-
```
|
|
424
|
-
|
|
425
|
-
### C5. Self-Validation
|
|
426
|
-
|
|
427
|
-
```
|
|
428
|
-
⛔ Any failure → rewrite that section's code (do not proceed to the next section)
|
|
429
|
-
|
|
430
|
-
1. All template classes defined in SCSS · 2. Image src files actually exist
|
|
431
|
-
3. Auto Layout node → flex present in SCSS
|
|
432
|
-
4. ⛔ No @function/@mixin defined in SCSS (existing token @use is allowed)
|
|
433
|
-
5. ⛔ Every SCSS property grounded in sections.json css object
|
|
434
|
-
(aspect-ratio, container queries, etc. not in the tree → FAIL)
|
|
435
|
-
6. ⛔ Image filenames kebab-case (hash filenames like 68ad470b.webp → FAIL)
|
|
436
|
-
```
|
|
437
|
-
|
|
438
|
-
---
|
|
439
|
-
|
|
440
|
-
## Error Recovery
|
|
441
|
-
|
|
442
|
-
| Failure | Recovery |
|
|
443
|
-
|---------|----------|
|
|
444
|
-
| figma-extract.js script error | Node.js >=18? API token in config? Retry once. |
|
|
445
|
-
| Figma API 401 | Prompt user to set FIGMA_ACCESS_TOKEN in env or ~/.vibe/config.json |
|
|
446
|
-
| Figma API 404 | Verify fileKey from URL; check file is shared/accessible |
|
|
447
|
-
| Figma API 429 (rate limit) | Wait 60s, retry with reduced node scope (single page) |
|
|
448
|
-
| API timeout on large file | Split request by page via nodeId parameter |
|
|
449
|
-
| Screenshot download failure | Proceed with tree.json only (visual verification → manual) |
|
|
450
|
-
| tree.json missing in Phase 4 | Run Extract Mode (Phase 2) first |
|
|
451
|
-
| component-index.json missing | Generate minimal index from tree.json section names |
|
|
452
|
-
| sections.json malformed | Regenerate from tree.json via figma-refine.js |
|
|
453
|
-
| SCSS output empty | Check sections.json for valid style nodes; else default reset styles |
|
|
454
|
-
| figma-to-scss.js parse failure | Validate tree.json structure; if malformed, re-run Extract Mode |
|
|
455
|
-
| figma-validate.js comparison failure | Skip automated validation; screenshot side-by-side manual review |
|
|
456
|
-
| Puppeteer/CDP not available | Skip visual verification; manual browser check |
|
package/skills/regress/SKILL.md
DELETED
|
@@ -1,184 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
name: regress
|
|
3
|
-
description: 회귀 테스트 자동 진화 본체 — 버그 등록 → 예방 테스트 생성 → 반복 패턴 클러스터 → git fix 커밋 import. 저장소 .vibe/regressions/.
|
|
4
|
-
when_to_use: /vibe.regress 진입점 / /vibe.verify 실패 시 체인. 직접 호출 금지.
|
|
5
|
-
user-invocable: false
|
|
6
|
-
tier: core
|
|
7
|
-
---
|
|
8
|
-
|
|
9
|
-
# vibe.regress — Regression Auto-Evolution
|
|
10
|
-
|
|
11
|
-
**Purpose**: never fix the same bug twice. Each fix grows a preventive test.
|
|
12
|
-
|
|
13
|
-
## Why this exists
|
|
14
|
-
|
|
15
|
-
A classic vibe-coding weakness: LLMs reintroduce bugs of the same class. Regression tests are the only mechanical defense. But if the human has to write the test every time, it gets skipped — so automate.
|
|
16
|
-
|
|
17
|
-
## Characterization — lock behavior first
|
|
18
|
-
|
|
19
|
-
Before modifying legacy or untested code whose behavior is uncertain (large files without tests, complex branching, API contracts), **lock current behavior first, then change**:
|
|
20
|
-
|
|
21
|
-
1. Generate characterization tests over the public surface — snapshot the **actual** output (`toMatchSnapshot()`), not what you think it should be. Do NOT fix bugs while locking: a wrong value gets locked as-is; the goal is regression detection, not correctness.
|
|
22
|
-
2. Run them — all must pass against the unmodified code. A failure means the characterization is wrong: fix the test, never the code.
|
|
23
|
-
3. Make the change incrementally, re-running after each step. Unexpected failure = regression, stop and investigate.
|
|
24
|
-
4. Reconcile: update snapshots only for **intentionally** changed behavior, and add new tests for the new behavior.
|
|
25
|
-
|
|
26
|
-
Skip this for code you just wrote, already-well-tested code, or trivial changes — write regular unit tests instead. Test file naming/stack detection follows `generate` (below).
|
|
27
|
-
|
|
28
|
-
## Storage Contract
|
|
29
|
-
|
|
30
|
-
```
|
|
31
|
-
.vibe/regressions/
|
|
32
|
-
<bug-slug>.md # one file per bug
|
|
33
|
-
_cluster-<tag>.md # shared-test design produced by `cluster`
|
|
34
|
-
```
|
|
35
|
-
|
|
36
|
-
### Frontmatter schema (strict)
|
|
37
|
-
|
|
38
|
-
```yaml
|
|
39
|
-
slug: string # kebab-case, globally unique
|
|
40
|
-
symptom: string # one line, user-facing
|
|
41
|
-
root-cause-tag: enum # only the allowed tags below
|
|
42
|
-
fix-commit: string # git hash (or "pending")
|
|
43
|
-
test-path: string # generated test file path (or "pending")
|
|
44
|
-
status: open | test-generated | resolved
|
|
45
|
-
registered: YYYY-MM-DD
|
|
46
|
-
feature: string # related feature name (matches SPEC)
|
|
47
|
-
```
|
|
48
|
-
|
|
49
|
-
### Allowed `root-cause-tag` values
|
|
50
|
-
|
|
51
|
-
Clustering depends on this, so use **only the predefined set**:
|
|
52
|
-
|
|
53
|
-
- `timezone` — timezone / DST / off-by-one in time
|
|
54
|
-
- `nullability` — null / undefined / empty handling
|
|
55
|
-
- `concurrency` — race conditions
|
|
56
|
-
- `boundary` — off-by-one, edge values
|
|
57
|
-
- `encoding` — charset, URL encoding, escaping
|
|
58
|
-
- `validation` — missing input validation
|
|
59
|
-
- `auth` — authn/authz logic
|
|
60
|
-
- `state-sync` — client/server state mismatch
|
|
61
|
-
- `integration` — external API call failure
|
|
62
|
-
- `type-narrow` — TypeScript type narrowing mistake
|
|
63
|
-
- `other` — when nothing fits (add new tags later)
|
|
64
|
-
|
|
65
|
-
**Rule**: if a new tag is needed, do not force-fit into an existing one — register as `other`. Once `other` reaches 3 entries, propose adding a new tag.
|
|
66
|
-
|
|
67
|
-
## Subcommands
|
|
68
|
-
|
|
69
|
-
### 1. `register "<symptom>"` — manual registration
|
|
70
|
-
|
|
71
|
-
Most calls are automatic; manual use is rare (bugs found outside `/vibe.verify`, or production incidents).
|
|
72
|
-
|
|
73
|
-
**Steps**:
|
|
74
|
-
1. `getCurrentTime` for today's date
|
|
75
|
-
2. `git log -1 --format=%H` for current commit hash (fix-commit candidate)
|
|
76
|
-
3. Conversation extracts:
|
|
77
|
-
- Reproduction steps (Given/When/Then)
|
|
78
|
-
- Root-cause paragraph
|
|
79
|
-
- Fix description
|
|
80
|
-
4. `root-cause-tag` is **inferred from the allowed set, then confirmed with the user**. If unclear → `other`.
|
|
81
|
-
5. Generate slug: kebab-case keywords from the symptom; on collision append `-2`
|
|
82
|
-
6. Write `.vibe/regressions/<slug>.md` (status: `open`)
|
|
83
|
-
|
|
84
|
-
### 2. `generate <slug>` — generate preventive test
|
|
85
|
-
|
|
86
|
-
**Steps**:
|
|
87
|
-
1. Read bug file
|
|
88
|
-
2. Detect test stack:
|
|
89
|
-
- From `package.json` `devDependencies`: prefer `vitest` over `jest`
|
|
90
|
-
- If neither → **ask user, then stop**
|
|
91
|
-
3. Decide test location:
|
|
92
|
-
- Sibling `__tests__/` next to the implementation file, OR
|
|
93
|
-
- The project's existing test dir (vitest config `test.include`)
|
|
94
|
-
4. File name: `<original-file>.regression.test.ts`
|
|
95
|
-
5. Body: render `templates/test-vitest.md` or `templates/test-jest.md`
|
|
96
|
-
6. Update bug frontmatter: `test-path`, `status: test-generated`
|
|
97
|
-
7. **Run the test immediately** — should fail (if not yet fixed) or pass (if fixed). Record outcome in frontmatter.
|
|
98
|
-
|
|
99
|
-
### 3. `list` — open items
|
|
100
|
-
|
|
101
|
-
```
|
|
102
|
-
/vibe.regress list # status != resolved
|
|
103
|
-
/vibe.regress list --feature login # filter by feature
|
|
104
|
-
/vibe.regress list --tag timezone # filter by tag
|
|
105
|
-
```
|
|
106
|
-
|
|
107
|
-
Terminal table:
|
|
108
|
-
|
|
109
|
-
```
|
|
110
|
-
SLUG FEATURE TAG STATUS AGE
|
|
111
|
-
login-jwt-expiry-off-by-one login timezone test-generated 3d
|
|
112
|
-
cart-stock-race-double-deduct cart concurrency open 1d
|
|
113
|
-
```
|
|
114
|
-
|
|
115
|
-
### 4. `import` — backfill from git log
|
|
116
|
-
|
|
117
|
-
**Steps**:
|
|
118
|
-
1. `git log --grep='^fix:' --format='%H|%s|%ci' --since=<last-import-date>`
|
|
119
|
-
- `last-import-date` lives in `.vibe/regressions/.import-cursor` (defaults to 90 days ago)
|
|
120
|
-
2. For each commit:
|
|
121
|
-
- If a bug file with the same `fix-commit` already exists → **skip**
|
|
122
|
-
- Otherwise infer symptom + root-cause-tag from message/diff (LLM call)
|
|
123
|
-
- Write a new bug file (status: `resolved` — already fixed)
|
|
124
|
-
3. Update `.import-cursor`
|
|
125
|
-
4. Suggest `generate` for newly imported entries
|
|
126
|
-
|
|
127
|
-
**Note**: only `fix:` commits are considered. Projects not using Conventional Commits can override with `--grep-pattern`.
|
|
128
|
-
|
|
129
|
-
### 5. `cluster` — promote recurring patterns
|
|
130
|
-
|
|
131
|
-
**Steps**:
|
|
132
|
-
1. Aggregate `root-cause-tag` across all bug files
|
|
133
|
-
2. **A tag with ≥3 entries** becomes a cluster candidate
|
|
134
|
-
3. For each candidate:
|
|
135
|
-
- Feed the 3 reproductions to an LLM to extract the common cause and shared test cases
|
|
136
|
-
- Write `_cluster-<tag>.md` (links to the original bug slugs)
|
|
137
|
-
- Propose a shared test skeleton at `<project-test-dir>/_cluster-<tag>.regression.test.ts` (create only with user approval)
|
|
138
|
-
4. Original bug files are **not deleted** — history preserved
|
|
139
|
-
|
|
140
|
-
**Important**: `cluster` is never automatic. Users invoke it explicitly to avoid premature abstraction.
|
|
141
|
-
|
|
142
|
-
## Integration with /vibe.verify
|
|
143
|
-
|
|
144
|
-
When `/vibe.verify` fails it calls:
|
|
145
|
-
|
|
146
|
-
```
|
|
147
|
-
Load skill `regress` with: register --from-verify
|
|
148
|
-
<feature>: {feature-name}
|
|
149
|
-
<scenario>: {failed-scenario}
|
|
150
|
-
<error>: {error-message}
|
|
151
|
-
<location>: {file:line}
|
|
152
|
-
```
|
|
153
|
-
|
|
154
|
-
`--from-verify` behavior:
|
|
155
|
-
- symptom = scenario name + error summary
|
|
156
|
-
- feature = forwarded feature name
|
|
157
|
-
- root-cause-tag = inferred from error pattern (default `other` if unclear)
|
|
158
|
-
- status = `open`
|
|
159
|
-
- **Skip user confirmation** — the user is already attentive in a verify-failure context, and friction must be minimized
|
|
160
|
-
|
|
161
|
-
## Integration with /vibe.run
|
|
162
|
-
|
|
163
|
-
At the start of `/vibe.run "<feature>"`:
|
|
164
|
-
|
|
165
|
-
1. Filter `.vibe/regressions/*.md` for `feature: <feature-name>` + `status != resolved`
|
|
166
|
-
2. If any open items:
|
|
167
|
-
```
|
|
168
|
-
⚠️ Open regressions for this feature:
|
|
169
|
-
- login-jwt-expiry-off-by-one (timezone, 3d old)
|
|
170
|
-
- login-session-leak (auth, 1w old)
|
|
171
|
-
|
|
172
|
-
Fix these before adding new behavior? [y/N]
|
|
173
|
-
```
|
|
174
|
-
3. `y` → chain to `/vibe.regress generate` for items not yet test-generated
|
|
175
|
-
4. `N` → continue (ultrawork mode auto-`N`, records TODO)
|
|
176
|
-
|
|
177
|
-
## Done Criteria
|
|
178
|
-
|
|
179
|
-
- [ ] Subcommand-less invocation prints usage
|
|
180
|
-
- [ ] Frontmatter schema strictly enforced (missing fields rejected)
|
|
181
|
-
- [ ] `root-cause-tag` outside the allowed set → warn + force `other`
|
|
182
|
-
- [ ] After `generate`, the test is **actually run** to verify
|
|
183
|
-
- [ ] `import` deduplicates by `fix-commit` hash
|
|
184
|
-
- [ ] `cluster` does nothing under 3 entries (false-positive guard)
|