@su-record/vibe 2.8.26 → 2.8.28
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/commands/vibe.docs.md +32 -0
- package/commands/vibe.figma.md +5 -5
- package/dist/cli/postinstall/constants.js +4 -4
- package/package.json +1 -1
- package/skills/{vibe-docs → vibe.docs}/SKILL.md +1 -1
- package/skills/{vibe-figma → vibe.figma}/SKILL.md +36 -7
- package/skills/vibe.figma.analyze/SKILL.md +10 -0
- package/skills/{vibe-figma-analyze → vibe.figma.analyze}/rubrics/analysis-dimensions.md +1 -1
- package/skills/vibe.figma.codegen/SKILL.md +10 -0
- package/skills/{vibe-figma-codegen → vibe.figma.codegen}/rubrics/code-quality.md +1 -1
- package/skills/vibe.figma.consolidate/SKILL.md +10 -0
- package/skills/{vibe-figma-convert → vibe.figma.convert}/SKILL.md +2 -2
- package/skills/{vibe-figma-extract → vibe.figma.extract}/SKILL.md +3 -3
- package/skills/vibe.figma.frame/SKILL.md +10 -0
- package/skills/{vibe-figma-frame → vibe.figma.frame}/rubrics/frame-selection.md +1 -1
- package/skills/vibe.figma.pipeline/SKILL.md +11 -0
- package/skills/{vibe-figma-pipeline → vibe.figma.pipeline}/rubrics/pipeline-stages.md +1 -1
- package/skills/vibe.figma.rules/SKILL.md +10 -0
- package/skills/{vibe-figma-rules → vibe.figma.rules}/rubrics/naming-conventions.md +1 -1
- package/skills/vibe.figma.style/SKILL.md +10 -0
- package/skills/{vibe-figma-style → vibe.figma.style}/rubrics/style-mapping.md +1 -1
- package/skills/vibe-figma-analyze/SKILL.md +0 -10
- package/skills/vibe-figma-codegen/SKILL.md +0 -10
- package/skills/vibe-figma-consolidate/SKILL.md +0 -10
- package/skills/vibe-figma-frame/SKILL.md +0 -10
- package/skills/vibe-figma-pipeline/SKILL.md +0 -11
- package/skills/vibe-figma-rules/SKILL.md +0 -10
- package/skills/vibe-figma-style/SKILL.md +0 -10
- /package/skills/{vibe-docs → vibe.docs}/templates/architecture.md +0 -0
- /package/skills/{vibe-docs → vibe.docs}/templates/readme.md +0 -0
- /package/skills/{vibe-docs → vibe.docs}/templates/release-notes.md +0 -0
- /package/skills/{vibe-figma → vibe.figma}/rubrics/extraction-checklist.md +0 -0
- /package/skills/{vibe-figma → vibe.figma}/templates/figma-handoff.md +0 -0
- /package/skills/{vibe-figma-consolidate → vibe.figma.consolidate}/templates/consolidation-report.md +0 -0
- /package/skills/{vibe-figma-convert → vibe.figma.convert}/rubrics/conversion-rules.md +0 -0
- /package/skills/{vibe-figma-convert → vibe.figma.convert}/templates/component.md +0 -0
- /package/skills/{vibe-figma-extract → vibe.figma.extract}/rubrics/image-rules.md +0 -0
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
---
|
|
2
|
+
description: Generate project documentation — README, architecture docs, user guide, release notes
|
|
3
|
+
argument-hint: "readme, guide, arch, or release"
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# /vibe.docs
|
|
7
|
+
|
|
8
|
+
Generate or update project documentation by analyzing the actual codebase.
|
|
9
|
+
|
|
10
|
+
## Usage
|
|
11
|
+
|
|
12
|
+
```
|
|
13
|
+
/vibe.docs readme # README.md 생성/갱신
|
|
14
|
+
/vibe.docs guide # 사용자 가이드 (docs/GUIDE.md)
|
|
15
|
+
/vibe.docs arch # 아키텍처 문서 + Mermaid 다이어그램 (docs/ARCHITECTURE.md)
|
|
16
|
+
/vibe.docs release # 릴리즈 노트 (git history 기반)
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Pipeline Position
|
|
20
|
+
|
|
21
|
+
```
|
|
22
|
+
/vibe.spec → Design (what to build)
|
|
23
|
+
/vibe.run → Implement (build it)
|
|
24
|
+
/vibe.trace → Verify (prove it works)
|
|
25
|
+
/vibe.docs → Document (explain it)
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
---
|
|
29
|
+
|
|
30
|
+
Load skill `vibe.docs` — subcommand에 따라 해당 섹션 실행
|
|
31
|
+
|
|
32
|
+
ARGUMENTS: $ARGUMENTS
|
package/commands/vibe.figma.md
CHANGED
|
@@ -54,16 +54,16 @@ AskUserQuestion 사용 시 절대 선택지(options) 제공 금지. 자유 텍
|
|
|
54
54
|
|
|
55
55
|
## Phase 0~1: Setup + Storyboard
|
|
56
56
|
|
|
57
|
-
Load skill `vibe
|
|
57
|
+
Load skill `vibe.figma` — Phase 0 Setup + Phase 1 Storyboard
|
|
58
58
|
|
|
59
59
|
## Phase 2: Design
|
|
60
60
|
|
|
61
|
-
Load skill `vibe
|
|
61
|
+
Load skill `vibe.figma` — Phase 2 Design (비정형 레이어 감지 + 큰 섹션 분할 포함)
|
|
62
62
|
|
|
63
63
|
섹션별 처리 시 참조:
|
|
64
|
-
- Load skill `vibe
|
|
65
|
-
- Load skill `vibe
|
|
64
|
+
- Load skill `vibe.figma.extract` — 이미지 다운로드 + CSS 값 추출 방법
|
|
65
|
+
- Load skill `vibe.figma.convert` — 참조 코드 → 프로젝트 코드 변환 (직역 모드 / 일반 모드)
|
|
66
66
|
|
|
67
67
|
## Phase 3: Verification
|
|
68
68
|
|
|
69
|
-
Load skill `vibe
|
|
69
|
+
Load skill `vibe.figma` — Phase 3 Verification
|
|
@@ -23,10 +23,10 @@ export const GLOBAL_SKILLS_STANDARD = [
|
|
|
23
23
|
'claude-md-guide',
|
|
24
24
|
'capability-loop',
|
|
25
25
|
'design-teach',
|
|
26
|
-
'vibe
|
|
27
|
-
'vibe
|
|
28
|
-
'vibe
|
|
29
|
-
'vibe
|
|
26
|
+
'vibe.figma',
|
|
27
|
+
'vibe.figma.extract',
|
|
28
|
+
'vibe.figma.convert',
|
|
29
|
+
'vibe.docs',
|
|
30
30
|
];
|
|
31
31
|
/** 전역 설치에서 제외된 스킬 (명시적 /skill-name 호출 시에만 활성)
|
|
32
32
|
* 사유: 표준 도구 래퍼이거나 구체성 부족 — 직접 프롬프트가 더 효과적 */
|
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
---
|
|
2
|
-
name: vibe
|
|
2
|
+
name: vibe.docs
|
|
3
3
|
tier: standard
|
|
4
4
|
description: "Generate project documentation — README, architecture docs, user guide, release notes. Activates on docs, readme, documentation keywords."
|
|
5
5
|
triggers: [vibe.docs, docs, documentation, readme, release notes, architecture doc]
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
---
|
|
2
|
-
name: vibe
|
|
2
|
+
name: vibe.figma
|
|
3
3
|
description: Figma design to code — 스토리보드(기능) + 디자인(비주얼) → 프로덕션 코드
|
|
4
4
|
triggers: []
|
|
5
5
|
tier: standard
|
|
6
6
|
---
|
|
7
7
|
|
|
8
|
-
# vibe
|
|
8
|
+
# vibe.figma — Figma Design to Code
|
|
9
9
|
|
|
10
10
|
## 금지 사항
|
|
11
11
|
|
|
@@ -255,11 +255,40 @@ get_design_context(fileKey, 섹션.nodeId)
|
|
|
255
255
|
전부 완료해야 c 단계로 진행. 하나라도 실패 → 코드 생성 금지.
|
|
256
256
|
```
|
|
257
257
|
|
|
258
|
-
#### c.
|
|
258
|
+
#### c. 클래스 매핑 테이블 생성
|
|
259
259
|
|
|
260
260
|
```
|
|
261
|
-
|
|
262
|
-
|
|
261
|
+
SCSS 작성 전에 반드시 매핑 테이블을 먼저 출력한다.
|
|
262
|
+
이 테이블 없이 SCSS를 작성하지 않는다.
|
|
263
|
+
|
|
264
|
+
1. Phase 1 컴포넌트의 클래스 목록을 Read로 수집
|
|
265
|
+
2. 참조 코드의 data-name + HTML 구조를 분석
|
|
266
|
+
3. 매핑 테이블 출력:
|
|
267
|
+
|
|
268
|
+
┌─────────────────────┬──────────────────┬────────────────────────────┐
|
|
269
|
+
│ Phase 1 클래스 │ 참조 data-name │ 핵심 Tailwind 값 │
|
|
270
|
+
├─────────────────────┼──────────────────┼────────────────────────────┤
|
|
271
|
+
│ .kidSection │ (root) │ flex flex-col gap-[32px] │
|
|
272
|
+
│ .kidBg │ BG │ absolute mix-blend-multiply│
|
|
273
|
+
│ .kidLoginBtn │ Btn_Login │ border shadow h-[120px] │
|
|
274
|
+
│ .kidLoginBtnText │ (텍스트 노드) │ text-[36px] text-white │
|
|
275
|
+
│ .kidDivider │ Divider │ h-px w-full │
|
|
276
|
+
│ .kidSteamLink │ steam_account │ text-[24px] font-semibold │
|
|
277
|
+
│ .kidSteamNote │ (하위 텍스트) │ text-[20px] #dadce3 │
|
|
278
|
+
└─────────────────────┴──────────────────┴────────────────────────────┘
|
|
279
|
+
|
|
280
|
+
매핑 기준:
|
|
281
|
+
data-name 일치 → 직접 매핑
|
|
282
|
+
data-name 없음 → HTML 위치/텍스트 내용으로 판단
|
|
283
|
+
Phase 1에 없는 요소 → 클래스 신규 추가 (template에도 반영)
|
|
284
|
+
참조 코드에 없는 클래스 → 스타일 없이 유지
|
|
285
|
+
```
|
|
286
|
+
|
|
287
|
+
#### d. SCSS 작성
|
|
288
|
+
|
|
289
|
+
```
|
|
290
|
+
매핑 테이블의 각 행을 순서대로 CSS로 변환하여 SCSS에 작성.
|
|
291
|
+
vibe.figma.extract의 Tailwind→CSS 변환표 참조.
|
|
263
292
|
|
|
264
293
|
CSS 변수 패턴 처리:
|
|
265
294
|
font-[family-name:var(--font/family/pretendard,...)] → fallback 값 사용
|
|
@@ -286,7 +315,7 @@ BG 레이어 패턴 (참조 코드에서 absolute + inset-0 + object-cover):
|
|
|
286
315
|
index.scss에 새 섹션 @import 추가.
|
|
287
316
|
```
|
|
288
317
|
|
|
289
|
-
####
|
|
318
|
+
#### e. template 업데이트
|
|
290
319
|
|
|
291
320
|
```
|
|
292
321
|
Phase 1 컴포넌트의 template을 참조 코드 기반으로 리팩토링.
|
|
@@ -311,7 +340,7 @@ script(JSDoc, 인터페이스, 목 데이터, 핸들러)는 보존.
|
|
|
311
340
|
컴포넌트에 <style> 블록 없음. 스타일은 전부 외부 SCSS.
|
|
312
341
|
```
|
|
313
342
|
|
|
314
|
-
####
|
|
343
|
+
#### f. 섹션 검증
|
|
315
344
|
|
|
316
345
|
```
|
|
317
346
|
Grep 체크:
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Analysis Dimensions — Figma Design Analysis
|
|
2
2
|
|
|
3
|
-
> This skill is merged into vibe
|
|
3
|
+
> This skill is merged into vibe.figma (Phase 1: Storyboard). These dimensions guide what to extract and evaluate when reading Figma frames.
|
|
4
4
|
|
|
5
5
|
## Layout
|
|
6
6
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Code Generation Quality Checklist
|
|
2
2
|
|
|
3
|
-
> This skill is merged into vibe
|
|
3
|
+
> This skill is merged into vibe.figma.convert. Use this checklist to validate generated component and style files before moving to the next section.
|
|
4
4
|
|
|
5
5
|
## Structure
|
|
6
6
|
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
---
|
|
2
|
-
name: vibe
|
|
2
|
+
name: vibe.figma.convert
|
|
3
3
|
description: 참조 코드(React+Tailwind) → 프로젝트 코드 + 외부 스타일 파일
|
|
4
4
|
triggers: []
|
|
5
5
|
tier: standard
|
|
6
6
|
---
|
|
7
7
|
|
|
8
|
-
# vibe
|
|
8
|
+
# vibe.figma.convert — 코드 변환
|
|
9
9
|
|
|
10
10
|
`get_design_context` 참조 코드를 프로젝트 스택 코드로 변환.
|
|
11
11
|
항상 외부 SCSS 파일에 스타일 작성.
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
---
|
|
2
|
-
name: vibe
|
|
2
|
+
name: vibe.figma.extract
|
|
3
3
|
description: Figma MCP에서 이미지 다운로드 + CSS 값 추출
|
|
4
4
|
triggers: []
|
|
5
5
|
tier: standard
|
|
6
6
|
---
|
|
7
7
|
|
|
8
|
-
# vibe
|
|
8
|
+
# vibe.figma.extract — 데이터 추출
|
|
9
9
|
|
|
10
10
|
`get_design_context` 응답에서 이미지와 CSS 값을 추출하는 절차.
|
|
11
11
|
|
|
@@ -146,5 +146,5 @@ data-name 속성으로 레이어 용도 파악:
|
|
|
146
146
|
data-name="Light" → 장식 조명
|
|
147
147
|
data-name="BTN_Share" → 공유 버튼
|
|
148
148
|
|
|
149
|
-
구조 변환은 vibe
|
|
149
|
+
구조 변환은 vibe.figma.convert에서 처리.
|
|
150
150
|
```
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Frame Selection Rubric
|
|
2
2
|
|
|
3
|
-
> This skill is merged into vibe
|
|
3
|
+
> This skill is merged into vibe.figma.extract. Use this rubric to select the right frames before calling `get_design_context`.
|
|
4
4
|
|
|
5
5
|
## Frame Classification by Name Pattern
|
|
6
6
|
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: vibe.figma.pipeline
|
|
3
|
+
description: "[Merged] → vibe.figma.consolidate D-4 참조"
|
|
4
|
+
triggers: []
|
|
5
|
+
tier: standard
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
# vibe.figma.pipeline
|
|
9
|
+
|
|
10
|
+
이 스킬은 **vibe.figma.consolidate** D-4 섹션으로 병합되었습니다.
|
|
11
|
+
Design Quality Pipeline 안내는 `vibe.figma.consolidate` Step D-4를 참조하세요.
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Pipeline Stage Descriptions and Failure Handling
|
|
2
2
|
|
|
3
|
-
> This skill is merged into vibe
|
|
3
|
+
> This skill is merged into vibe.figma.consolidate (D-4). This rubric describes each stage of the Figma-to-code pipeline and what to do when a stage fails.
|
|
4
4
|
|
|
5
5
|
## Stage Map
|
|
6
6
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Figma Layer Naming Conventions for Clean Extraction
|
|
2
2
|
|
|
3
|
-
> This skill is inlined into vibe
|
|
3
|
+
> This skill is inlined into vibe.figma, vibe.figma.extract, and vibe.figma.convert. This rubric documents how Figma layer names map to generated code identifiers.
|
|
4
4
|
|
|
5
5
|
## Layer Name → CSS Class
|
|
6
6
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Figma Style → CSS/Tailwind Mapping Rules
|
|
2
2
|
|
|
3
|
-
> This skill is merged into vibe
|
|
3
|
+
> This skill is merged into vibe.figma.convert. This rubric is the definitive reference for converting Figma design values to output CSS.
|
|
4
4
|
|
|
5
5
|
## Scale Factor Application
|
|
6
6
|
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
name: vibe-figma-pipeline
|
|
3
|
-
description: "[Merged] → vibe-figma-consolidate D-4 참조"
|
|
4
|
-
triggers: []
|
|
5
|
-
tier: standard
|
|
6
|
-
---
|
|
7
|
-
|
|
8
|
-
# vibe-figma-pipeline
|
|
9
|
-
|
|
10
|
-
이 스킬은 **vibe-figma-consolidate** D-4 섹션으로 병합되었습니다.
|
|
11
|
-
Design Quality Pipeline 안내는 `vibe-figma-consolidate` Step D-4를 참조하세요.
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
/package/skills/{vibe-figma-consolidate → vibe.figma.consolidate}/templates/consolidation-report.md
RENAMED
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|