@su-record/vibe 3.2.15 → 3.2.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (61) hide show
  1. package/CLAUDE.md +2 -1
  2. package/dist/cli/commands/index.d.ts +1 -1
  3. package/dist/cli/commands/index.d.ts.map +1 -1
  4. package/dist/cli/commands/index.js +1 -1
  5. package/dist/cli/commands/index.js.map +1 -1
  6. package/dist/cli/commands/info.d.ts +3 -1
  7. package/dist/cli/commands/info.d.ts.map +1 -1
  8. package/dist/cli/commands/info.js +12 -3
  9. package/dist/cli/commands/info.js.map +1 -1
  10. package/dist/cli/commands/init.d.ts +0 -7
  11. package/dist/cli/commands/init.d.ts.map +1 -1
  12. package/dist/cli/commands/init.js +5 -37
  13. package/dist/cli/commands/init.js.map +1 -1
  14. package/dist/cli/commands/update.d.ts.map +1 -1
  15. package/dist/cli/commands/update.js +4 -6
  16. package/dist/cli/commands/update.js.map +1 -1
  17. package/dist/cli/commands/upgrade.d.ts +1 -1
  18. package/dist/cli/commands/upgrade.d.ts.map +1 -1
  19. package/dist/cli/commands/upgrade.js +7 -2
  20. package/dist/cli/commands/upgrade.js.map +1 -1
  21. package/dist/cli/postinstall/claude-agents.js +1 -1
  22. package/dist/cli/postinstall/claude-agents.js.map +1 -1
  23. package/dist/cli/postinstall/constants.d.ts +0 -1
  24. package/dist/cli/postinstall/constants.d.ts.map +1 -1
  25. package/dist/cli/postinstall/constants.js +0 -8
  26. package/dist/cli/postinstall/constants.js.map +1 -1
  27. package/dist/cli/postinstall/main.d.ts.map +1 -1
  28. package/dist/cli/postinstall/main.js +20 -13
  29. package/dist/cli/postinstall/main.js.map +1 -1
  30. package/dist/cli/postinstall.d.ts +0 -3
  31. package/dist/cli/postinstall.d.ts.map +1 -1
  32. package/dist/cli/postinstall.js +0 -3
  33. package/dist/cli/postinstall.js.map +1 -1
  34. package/dist/cli/setup/InstallHome.d.ts +27 -0
  35. package/dist/cli/setup/InstallHome.d.ts.map +1 -0
  36. package/dist/cli/setup/InstallHome.js +105 -0
  37. package/dist/cli/setup/InstallHome.js.map +1 -0
  38. package/dist/cli/setup/ProjectSetup.d.ts +0 -8
  39. package/dist/cli/setup/ProjectSetup.d.ts.map +1 -1
  40. package/dist/cli/setup/ProjectSetup.js +0 -96
  41. package/dist/cli/setup/ProjectSetup.js.map +1 -1
  42. package/dist/cli/setup.d.ts +1 -1
  43. package/dist/cli/setup.d.ts.map +1 -1
  44. package/dist/cli/setup.js +1 -1
  45. package/dist/cli/setup.js.map +1 -1
  46. package/hooks/scripts/utils.js +32 -2
  47. package/package.json +1 -1
  48. package/skills/vibe/SKILL.md +15 -0
  49. package/skills/vibe.spec/SKILL.md +42 -9
  50. package/dist/cli/postinstall/cursor-agents.d.ts +0 -13
  51. package/dist/cli/postinstall/cursor-agents.d.ts.map +0 -1
  52. package/dist/cli/postinstall/cursor-agents.js +0 -89
  53. package/dist/cli/postinstall/cursor-agents.js.map +0 -1
  54. package/dist/cli/postinstall/cursor-rules.d.ts +0 -11
  55. package/dist/cli/postinstall/cursor-rules.d.ts.map +0 -1
  56. package/dist/cli/postinstall/cursor-rules.js +0 -205
  57. package/dist/cli/postinstall/cursor-rules.js.map +0 -1
  58. package/dist/cli/postinstall/cursor-skills.d.ts +0 -9
  59. package/dist/cli/postinstall/cursor-skills.d.ts.map +0 -1
  60. package/dist/cli/postinstall/cursor-skills.js +0 -796
  61. package/dist/cli/postinstall/cursor-skills.js.map +0 -1
@@ -1,796 +0,0 @@
1
- /**
2
- * Cursor Skills 생성 (VIBE 커맨드 → Cursor 스킬 변환)
3
- */
4
- import path from 'path';
5
- import fs from 'fs';
6
- import { ensureDir } from './fs-utils.js';
7
- /**
8
- * Cursor Skills 생성 (VIBE 커맨드 → Cursor 스킬 변환)
9
- * 설치 경로: ~/.cursor/skills/[skill-name]/SKILL.md
10
- */
11
- export function generateCursorSkills(cursorSkillsDir) {
12
- const skills = [
13
- {
14
- id: 'su-spec',
15
- content: `---
16
- name: su-spec
17
- model: claude-4.5-sonnet-thinking
18
- description: "SPEC document creation with parallel research. Use when starting new feature implementation."
19
- ---
20
-
21
- # vibe spec - SPEC Creation Skill
22
-
23
- SPEC-driven feature development workflow. Creates AI-executable specification documents.
24
-
25
- ## When to Use
26
-
27
- - Starting new feature implementation
28
- - Complex tasks requiring research and planning
29
- - Features needing clear requirements documentation
30
-
31
- ## Invocation
32
-
33
- User says: "vibe spec [feature-name]" or "Create SPEC for [feature-name]"
34
-
35
- ## Workflow
36
-
37
- ### Phase 1: Requirements Gathering
38
- 1. Ask user for feature requirements
39
- 2. Clarify scope and constraints
40
- 3. Identify tech stack and dependencies
41
-
42
- ### Phase 2: Parallel Research (Manual)
43
- Run these in parallel:
44
- - Web search for best practices and security advisories for [feature]
45
- - Codebase search for existing patterns related to [feature]
46
- - Search framework docs with context7
47
-
48
- ### Phase 3: SPEC Document Generation
49
- Create SPEC in PTCF format:
50
- \`\`\`
51
- <role> AI role definition
52
- <context> Background, tech stack, related code
53
- <task> Phase-by-phase task list
54
- <constraints> Constraints
55
- <output_format> Files to create/modify
56
- <acceptance> Verification criteria
57
- \`\`\`
58
-
59
- ### Phase 4: Save SPEC
60
- Save to \`.claude/vibe/specs/[feature-name]-spec.md\`
61
-
62
- ## Output Format
63
-
64
- \`\`\`markdown
65
- # [Feature Name] SPEC
66
-
67
- ## Overview
68
- [1-2 sentence summary]
69
-
70
- ## Requirements
71
- - REQ-001: [Requirement]
72
- - REQ-002: [Requirement]
73
-
74
- ## Technical Approach
75
- [Implementation strategy]
76
-
77
- ## Phases
78
- ### Phase 1: [Setup]
79
- - [ ] Task 1
80
- - [ ] Task 2
81
-
82
- ### Phase 2: [Core Implementation]
83
- ...
84
-
85
- ## Acceptance Criteria
86
- - [ ] Criterion 1
87
- - [ ] Criterion 2
88
- \`\`\`
89
-
90
- ## Next Steps
91
-
92
- After SPEC creation:
93
- - "vibe spec review" - Review SPEC with external LLMs
94
- - "vibe run [feature-name]" - Start implementation
95
- `,
96
- },
97
- {
98
- id: 'su-run',
99
- content: `---
100
- name: su-run
101
- model: claude-4.5-opus-high
102
- description: "Execute SPEC implementation with Scenario-Driven Development. Use after SPEC is approved."
103
- ---
104
-
105
- # vibe run - Implementation Execution Skill
106
-
107
- Executes SPEC-based implementation using Scenario-Driven Development methodology.
108
-
109
- ## When to Use
110
-
111
- - After SPEC is created and approved
112
- - When implementing features phase by phase
113
- - For complex multi-file implementations
114
-
115
- ## Invocation
116
-
117
- User says: "vibe run [feature-name]" or "Implement [feature-name]"
118
-
119
- ## Pre-requisites
120
-
121
- 1. SPEC document exists at \`.claude/vibe/specs/[feature-name]-spec.md\`
122
- 2. SPEC has been reviewed (optional but recommended)
123
-
124
- ## Workflow
125
-
126
- ### Step 1: Load SPEC
127
- Read SPEC from \`.claude/vibe/specs/[feature-name]-spec.md\`
128
-
129
- ### Step 2: For Each Phase in SPEC
130
-
131
- #### 2a. Phase Planning
132
- - List all tasks for current phase
133
- - Identify file dependencies
134
- - Check existing code patterns
135
-
136
- #### 2b. Implementation
137
- - Implement each task
138
- - Follow existing code style
139
- - Keep functions under complexity limits
140
-
141
- #### 2c. Phase Verification
142
- - Run relevant tests
143
- - Check TypeScript compilation
144
- - Verify no regressions
145
-
146
- ### Step 3: Phase Completion
147
- Mark phase complete, proceed to next phase
148
-
149
- ## ULTRAWORK Mode
150
-
151
- Add "ultrawork" or "ulw" for maximum performance:
152
- - Parallel sub-agent exploration
153
- - Auto-continue between phases
154
- - Auto-retry on errors (max 3)
155
-
156
- ## Output Format
157
-
158
- Per phase:
159
- \`\`\`
160
- ## Phase [N]: [Name]
161
-
162
- ### Completed Tasks
163
- - [x] Task 1 - [file.ts]
164
- - [x] Task 2 - [file.ts]
165
-
166
- ### Files Modified
167
- - src/feature/index.ts (new)
168
- - src/feature/utils.ts (modified)
169
-
170
- ### Verification
171
- - ✅ TypeScript compilation
172
- - ✅ Tests passing
173
- \`\`\`
174
-
175
- ## Next Steps
176
-
177
- After implementation:
178
- - "vibe review" - Run parallel multi-focus code review
179
- - "vibe verify [feature-name]" - Verify against SPEC
180
- - "vibe trace [feature-name]" - Generate traceability matrix
181
- `,
182
- },
183
- {
184
- id: 'su-review',
185
- content: `---
186
- name: su-review
187
- model: auto
188
- description: "Parallel code review with code-reviewer (multiple focuses) + security-reviewer. Use after code changes."
189
- ---
190
-
191
- # vibe review - Parallel Code Review Skill
192
-
193
- Orchestrates the consolidated review agents — **code-reviewer** (invoked multiple times in parallel with different focus values) and **security-reviewer** — for comprehensive code review.
194
-
195
- ## When to Use
196
-
197
- - After implementing new features
198
- - Before creating pull requests
199
- - After significant code changes
200
-
201
- ## Invocation
202
-
203
- User says: "vibe review" or "Review my code"
204
-
205
- ## Available Review Agents
206
-
207
- ### security-reviewer
208
- - OWASP Top 10, authentication, data handling
209
-
210
- ### code-reviewer (focus parameter)
211
- - **correctness** - Logic errors, edge cases, error handling
212
- - **architecture** - Design patterns, dependencies, structure
213
- - **data-integrity** - Data flow, state management, persistence
214
- - **idioms** - Language/framework idioms (TypeScript, Python, React, Rails, ...)
215
- - **performance** - N+1 queries, loops, memory
216
- - **complexity** - Function length, nesting, cyclomatic; over-engineering
217
- - **test-coverage** - Missing tests, edge cases
218
- - **git-history** - Risk patterns, commit analysis
219
-
220
- ## Workflow
221
-
222
- ### Step 1: Analyze Changes
223
- \`\`\`bash
224
- git diff HEAD~1
225
- \`\`\`
226
-
227
- ### Step 2: Select Relevant Focuses
228
- Based on changed files:
229
- - .ts/.tsx/.py/.rb → code-reviewer (focus: idioms)
230
- - Security-related → security-reviewer
231
- - Architecture changes → code-reviewer (focus: architecture)
232
- - Always → code-reviewer (focus: correctness)
233
-
234
- ### Step 3: Run Reviews (Parallel)
235
- Invoke the selected reviewers in parallel:
236
- - "Use security-reviewer"
237
- - "Use code-reviewer with focus: correctness"
238
- - "Use code-reviewer with focus: architecture"
239
- - (etc. — one code-reviewer instance per focus)
240
-
241
- ### Step 4: Consolidate Findings
242
-
243
- ## Priority System
244
-
245
- | Priority | Meaning | Action |
246
- |----------|---------|--------|
247
- | 🔴 P1 | Critical | Blocks merge, fix immediately |
248
- | 🟡 P2 | Important | Fix recommended before merge |
249
- | 🔵 P3 | Nice-to-have | Add to backlog |
250
-
251
- ## Output Format
252
-
253
- \`\`\`markdown
254
- # Code Review Summary
255
-
256
- ## 🔴 P1 - Critical (X issues)
257
- - [Issue description] - [file:line]
258
-
259
- ## 🟡 P2 - Important (X issues)
260
- - [Issue description] - [file:line]
261
-
262
- ## 🔵 P3 - Suggestions (X issues)
263
- - [Issue description] - [file:line]
264
-
265
- ## Reviewed By
266
- - security-reviewer ✅
267
- - code-reviewer (focus: idioms) ✅
268
- - code-reviewer (focus: performance) ✅
269
- \`\`\`
270
-
271
- ## Next Steps
272
-
273
- After review:
274
- - Fix P1 issues immediately
275
- - Address P2 issues before merge
276
- - Track P3 in backlog
277
- - Ready to commit when P1/P2 resolved
278
- `,
279
- },
280
- {
281
- id: 'su-analyze',
282
- content: `---
283
- name: su-analyze
284
- model: claude-4.5-sonnet-thinking
285
- description: "Project and feature analysis. Use when exploring codebase or planning changes."
286
- ---
287
-
288
- # vibe analyze - Analysis Skill
289
-
290
- Comprehensive project and feature analysis for understanding codebases.
291
-
292
- ## When to Use
293
-
294
- - Exploring unfamiliar codebase
295
- - Planning feature changes
296
- - Understanding dependencies
297
- - Identifying potential issues
298
-
299
- ## Invocation
300
-
301
- User says: "vibe analyze" or "Analyze [feature/path]"
302
-
303
- ## Analysis Modes
304
-
305
- ### 1. Project Analysis (Default)
306
- Analyzes entire project structure and architecture.
307
-
308
- ### 2. Feature Analysis
309
- Analyzes specific feature or module.
310
- \`\`\`
311
- vibe analyze src/auth
312
- vibe analyze "login feature"
313
- \`\`\`
314
-
315
- ### 3. Dependency Analysis
316
- Maps dependencies and coupling.
317
-
318
- ## Workflow
319
-
320
- ### Step 1: Structure Scan
321
- \`\`\`bash
322
- # Find key files
323
- ls -la
324
- find . -name "*.ts" -o -name "*.tsx" | head -20
325
- \`\`\`
326
-
327
- ### Step 2: Entry Points
328
- Identify main entry points:
329
- - package.json scripts
330
- - src/index.ts
331
- - app/main.ts
332
-
333
- ### Step 3: Architecture Mapping
334
- - Module boundaries
335
- - Data flow paths
336
- - External dependencies
337
-
338
- ### Step 4: Quality Assessment
339
- - Complexity hotspots
340
- - Test coverage gaps
341
- - Security concerns
342
-
343
- ## Output Format
344
-
345
- \`\`\`markdown
346
- # Project Analysis: [Name]
347
-
348
- ## Overview
349
- - Framework: [e.g., Next.js 14]
350
- - Language: [e.g., TypeScript 5.x]
351
- - Package Manager: [e.g., pnpm]
352
-
353
- ## Architecture
354
- ### Layers
355
- 1. Presentation (src/components/)
356
- 2. Business Logic (src/services/)
357
- 3. Data Access (src/repositories/)
358
-
359
- ### Key Modules
360
- | Module | Purpose | Files |
361
- |--------|---------|-------|
362
- | auth | Authentication | 12 |
363
- | api | API routes | 8 |
364
-
365
- ## Dependencies
366
- ### Internal
367
- - auth → db, utils
368
- - api → auth, services
369
-
370
- ### External (Notable)
371
- - next: ^14.0.0
372
- - prisma: ^5.0.0
373
-
374
- ## Quality Metrics
375
- | Metric | Value | Status |
376
- |--------|-------|--------|
377
- | Avg Complexity | 8.2 | ✅ Good |
378
- | Test Coverage | 65% | ⚠️ Moderate |
379
- | Type Coverage | 95% | ✅ Good |
380
-
381
- ## Recommendations
382
- 1. [Recommendation 1]
383
- 2. [Recommendation 2]
384
- \`\`\`
385
-
386
- ## Next Steps
387
-
388
- After analysis:
389
- - "vibe spec [feature]" - Create SPEC for changes
390
- - "vibe review" - Review existing code quality
391
- - Plan Mode - For simple modifications
392
- `,
393
- },
394
- {
395
- id: 'su-verify',
396
- content: `---
397
- name: su-verify
398
- model: claude-4.5-sonnet-thinking
399
- description: "Verify implementation against SPEC requirements. Use after implementation."
400
- ---
401
-
402
- # vibe verify - Verification Skill
403
-
404
- Verifies implementation completeness against SPEC requirements.
405
-
406
- ## When to Use
407
-
408
- - After completing implementation
409
- - Before marking feature as done
410
- - For requirement traceability
411
-
412
- ## Invocation
413
-
414
- User says: "vibe verify [feature-name]"
415
-
416
- ## Pre-requisites
417
-
418
- 1. SPEC exists at \`.claude/vibe/specs/[feature-name]-spec.md\`
419
- 2. Implementation is complete
420
-
421
- ## Workflow
422
-
423
- ### Step 1: Load SPEC
424
- Read SPEC and extract:
425
- - Requirements (REQ-XXX)
426
- - Acceptance criteria
427
- - Expected outputs
428
-
429
- ### Step 2: Map Implementation
430
- For each requirement:
431
- - Find implementing code
432
- - Identify test coverage
433
- - Check acceptance criteria
434
-
435
- ### Step 3: Gap Analysis
436
- Identify:
437
- - Unimplemented requirements
438
- - Untested features
439
- - Missing acceptance criteria
440
-
441
- ### Step 4: Generate Report
442
-
443
- ## Verification Levels
444
-
445
- | Level | Meaning |
446
- |-------|---------|
447
- | ✅ Full | Code + Test + Verified |
448
- | ⚠️ Partial | Code exists, missing test or verification |
449
- | ❌ None | Not implemented |
450
-
451
- ## Output Format
452
-
453
- \`\`\`markdown
454
- # Verification Report: [Feature]
455
-
456
- ## Summary
457
- - Total Requirements: 10
458
- - Fully Verified: 8 (80%)
459
- - Partial: 1 (10%)
460
- - Missing: 1 (10%)
461
-
462
- ## Requirement Matrix
463
-
464
- | ID | Requirement | Code | Test | Status |
465
- |----|-------------|------|------|--------|
466
- | REQ-001 | User login | ✅ | ✅ | ✅ Full |
467
- | REQ-002 | Password reset | ✅ | ❌ | ⚠️ Partial |
468
- | REQ-003 | MFA support | ❌ | ❌ | ❌ None |
469
-
470
- ## Acceptance Criteria
471
-
472
- | Criterion | Status | Evidence |
473
- |-----------|--------|----------|
474
- | Login < 2s | ✅ | Performance test |
475
- | No plain passwords | ✅ | Code review |
476
-
477
- ## Gaps to Address
478
-
479
- 1. **REQ-003**: MFA support not implemented
480
- 2. **REQ-002**: Missing test for password reset
481
-
482
- ## Recommendation
483
- ⚠️ Address gaps before release
484
- \`\`\`
485
-
486
- ## Next Steps
487
-
488
- After verification:
489
- - Fix gaps if any
490
- - "vibe trace [feature]" - Full traceability matrix
491
- - "vibe review" - Final code review
492
- - Ready for release if all verified
493
- `,
494
- },
495
- {
496
- id: 'su-reason',
497
- content: `---
498
- name: su-reason
499
- model: claude-4.5-opus-high-thinking
500
- description: "Systematic 9-step reasoning framework. Use for complex problem solving."
501
- ---
502
-
503
- # vibe reason - Reasoning Framework Skill
504
-
505
- Applies systematic reasoning to complex problems and decisions.
506
-
507
- ## When to Use
508
-
509
- - Complex debugging scenarios
510
- - Architecture decisions
511
- - Trade-off analysis
512
- - Root cause analysis
513
-
514
- ## Invocation
515
-
516
- User says: "vibe reason [problem]" or "Reason about [problem]"
517
-
518
- ## 9-Step Reasoning Framework
519
-
520
- ### Step 1: Problem Definition
521
- - What exactly is the problem?
522
- - What are the symptoms?
523
- - What is the expected vs actual behavior?
524
-
525
- ### Step 2: Context Gathering
526
- - What is the relevant code/system?
527
- - What changed recently?
528
- - What are the constraints?
529
-
530
- ### Step 3: Hypothesis Generation
531
- Generate multiple hypotheses:
532
- - Hypothesis A: [Description]
533
- - Hypothesis B: [Description]
534
- - Hypothesis C: [Description]
535
-
536
- ### Step 4: Evidence Collection
537
- For each hypothesis:
538
- - What evidence supports it?
539
- - What evidence contradicts it?
540
- - What additional info needed?
541
-
542
- ### Step 5: Hypothesis Evaluation
543
- Score each hypothesis:
544
- | Hypothesis | Support | Contradict | Confidence |
545
- |------------|---------|------------|------------|
546
- | A | 3 | 1 | 75% |
547
- | B | 2 | 2 | 50% |
548
- | C | 1 | 3 | 25% |
549
-
550
- ### Step 6: Deep Dive
551
- Focus on highest-confidence hypothesis:
552
- - Trace code paths
553
- - Check logs/metrics
554
- - Reproduce issue
555
-
556
- ### Step 7: Solution Design
557
- Design solution addressing root cause:
558
- - Option 1: [Description] - Pros/Cons
559
- - Option 2: [Description] - Pros/Cons
560
-
561
- ### Step 8: Risk Assessment
562
- | Risk | Impact | Probability | Mitigation |
563
- |------|--------|-------------|------------|
564
- | [Risk 1] | High | Medium | [Strategy] |
565
-
566
- ### Step 9: Recommendation
567
- Final recommendation with:
568
- - Chosen solution
569
- - Implementation steps
570
- - Verification plan
571
-
572
- ## Output Format
573
-
574
- \`\`\`markdown
575
- # Reasoning Analysis: [Problem]
576
-
577
- ## 1. Problem Definition
578
- [Clear statement of the problem]
579
-
580
- ## 2. Context
581
- [Relevant background and constraints]
582
-
583
- ## 3. Hypotheses
584
- 1. **H1**: [Description]
585
- 2. **H2**: [Description]
586
- 3. **H3**: [Description]
587
-
588
- ## 4-5. Evidence & Evaluation
589
- | Hypothesis | Evidence For | Evidence Against | Confidence |
590
- |------------|--------------|------------------|------------|
591
- | H1 | [List] | [List] | 80% |
592
- | H2 | [List] | [List] | 40% |
593
-
594
- ## 6. Deep Dive (H1)
595
- [Detailed analysis of most likely cause]
596
-
597
- ## 7. Solutions
598
- ### Option A (Recommended)
599
- - Description: [...]
600
- - Pros: [...]
601
- - Cons: [...]
602
-
603
- ### Option B
604
- - Description: [...]
605
- - Pros: [...]
606
- - Cons: [...]
607
-
608
- ## 8. Risks
609
- | Risk | Mitigation |
610
- |------|------------|
611
- | [Risk] | [Strategy] |
612
-
613
- ## 9. Recommendation
614
- **Proceed with Option A because:**
615
- 1. [Reason 1]
616
- 2. [Reason 2]
617
-
618
- **Next Steps:**
619
- 1. [Step 1]
620
- 2. [Step 2]
621
- \`\`\`
622
-
623
- ## Next Steps
624
-
625
- After reasoning:
626
- - Implement chosen solution
627
- - "vibe spec [solution]" - If solution needs SPEC
628
- - "vibe verify" - Verify solution addresses problem
629
- `,
630
- },
631
- {
632
- id: 'su-ui',
633
- content: `---
634
- name: su-ui
635
- model: gpt-5.3-codex
636
- description: "UI preview and generation utilities. Use for UI component work."
637
- ---
638
-
639
- # vibe ui - UI Utilities Skill
640
-
641
- UI preview, generation, and refactoring utilities.
642
-
643
- ## When to Use
644
-
645
- - Creating new UI components
646
- - Previewing UI designs
647
- - Refactoring existing components
648
- - Generating component code from descriptions
649
-
650
- ## Invocation
651
-
652
- User says: "vibe ui [description]" or "Preview UI for [description]"
653
-
654
- ## Modes
655
-
656
- ### 1. UI Preview
657
- Generate visual preview of UI description.
658
- \`\`\`
659
- vibe ui "Login form with email, password, and remember me checkbox"
660
- \`\`\`
661
-
662
- ### 2. Component Generation
663
- Generate component code from description.
664
- \`\`\`
665
- vibe ui generate "User profile card with avatar, name, and bio"
666
- \`\`\`
667
-
668
- ### 3. UI Refactoring
669
- Refactor existing component for better patterns.
670
- \`\`\`
671
- vibe ui refactor src/components/UserCard.tsx
672
- \`\`\`
673
-
674
- ## Workflow
675
-
676
- ### UI Preview Mode
677
-
678
- 1. **Parse Description**
679
- - Extract UI elements
680
- - Identify layout requirements
681
- - Note interactions
682
-
683
- 2. **Generate Preview**
684
- - Create HTML/CSS mockup
685
- - Show component structure
686
- - Illustrate states (default, hover, active)
687
-
688
- 3. **Output**
689
- - Visual description
690
- - Component hierarchy
691
- - Suggested implementation
692
-
693
- ### Component Generation Mode
694
-
695
- 1. **Analyze Requirements**
696
- - Component purpose
697
- - Props interface
698
- - State requirements
699
-
700
- 2. **Generate Code**
701
- - TypeScript/React component
702
- - Styled with project's CSS approach
703
- - Include prop types
704
-
705
- 3. **Output**
706
- - Complete component file
707
- - Usage example
708
- - Test suggestions
709
-
710
- ### Refactoring Mode
711
-
712
- 1. **Analyze Existing**
713
- - Current structure
714
- - Identified issues
715
- - Improvement opportunities
716
-
717
- 2. **Plan Refactor**
718
- - Extract components
719
- - Improve patterns
720
- - Optimize performance
721
-
722
- 3. **Apply Changes**
723
- - Preserve functionality
724
- - Improve readability
725
- - Add documentation
726
-
727
- ## Output Format
728
-
729
- ### Preview Output
730
- \`\`\`markdown
731
- # UI Preview: [Description]
732
-
733
- ## Visual Structure
734
- \`\`\`
735
- ┌─────────────────────────────────┐
736
- │ [Header] │
737
- ├─────────────────────────────────┤
738
- │ 📧 Email: [_______________] │
739
- │ 🔒 Password: [_______________] │
740
- │ ☐ Remember me │
741
- │ │
742
- │ [ Login ] │
743
- └─────────────────────────────────┘
744
- \`\`\`
745
-
746
- ## Component Hierarchy
747
- - LoginForm
748
- - FormField (email)
749
- - FormField (password)
750
- - Checkbox (remember)
751
- - Button (submit)
752
-
753
- ## Suggested Props
754
- \`\`\`typescript
755
- interface LoginFormProps {
756
- onSubmit: (data: LoginData) => void;
757
- isLoading?: boolean;
758
- error?: string;
759
- }
760
- \`\`\`
761
- \`\`\`
762
-
763
- ### Generation Output
764
- \`\`\`typescript
765
- // Complete component code with:
766
- // - TypeScript types
767
- // - React hooks
768
- // - Styled components or CSS classes
769
- // - Event handlers
770
- \`\`\`
771
-
772
- ## Next Steps
773
-
774
- After UI work:
775
- - "vibe review" - Review generated components
776
- - "vibe run [feature]" - Continue implementation
777
- - Add tests for new components
778
- `,
779
- },
780
- ];
781
- let updated = 0;
782
- for (const skill of skills) {
783
- const skillDir = path.join(cursorSkillsDir, skill.id);
784
- ensureDir(skillDir);
785
- const destPath = path.join(skillDir, 'SKILL.md');
786
- try {
787
- fs.writeFileSync(destPath, skill.content, 'utf-8');
788
- updated++;
789
- }
790
- catch {
791
- // 무시 - 권한 문제 등
792
- }
793
- }
794
- console.log(` 🎯 Cursor skills: ${updated}/${skills.length} updated`);
795
- }
796
- //# sourceMappingURL=cursor-skills.js.map