@su-record/vibe 2.7.22 → 2.8.0

package/skills/design-polish/SKILL.md

@@ -0,0 +1,130 @@
+---
+name: design-polish
+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."
+triggers: [design-polish, ui-polish, final-pass, ship-ready]
+priority: 50
+---
+
+# Design Polish — Pre-Ship Final Pass
+
+Last-mile quality pass before shipping. Checks pixel-level details and **directly fixes** issues found.
+
+## Usage
+
+```
+/design-polish <target>       # Polish specific component/page
+/design-polish .              # Polish all changed UI files
+```
+
+## Checklist
+
+### 1. Alignment & Spacing
+
+- [ ] Elements align to consistent grid (4px or 8px base)
+- [ ] Spacing between sections follows rhythm (not arbitrary gaps)
+- [ ] Text baselines align across columns
+- [ ] Icons vertically centered with adjacent text
+- [ ] Padding inside containers is symmetric unless intentional
+
+### 2. Interaction States (Complete Set)
+
+Every interactive element must have ALL applicable states:
+
+| State | Check |
+|-------|-------|
+| Default | Base appearance defined |
+| Hover | Visual feedback on mouse enter |
+| Focus | Visible focus ring (a11y requirement) |
+| Active / Pressed | Visual response on click/tap |
+| Disabled | Reduced opacity + `pointer-events: none` + `aria-disabled` |
+| Loading | Spinner or skeleton replacing content |
+| Error | Red/danger styling + error message |
+| Success | Confirmation feedback (toast, checkmark, color change) |
+
+### 3. Typography & Copy
+
+- [ ] No orphaned words (single word on last line of heading)
+- [ ] Consistent capitalization (Title Case vs sentence case)
+- [ ] No placeholder text ("Lorem ipsum", "TODO", "test")
+- [ ] Truncation with ellipsis where text can overflow
+- [ ] Line length ≤ 75 characters for readability
+
+### 4. Visual Consistency
+
+- [ ] Border radius consistent across same-level elements
+- [ ] Shadow depth matches elevation hierarchy
+- [ ] Icon sizes consistent (16/20/24px common set)
+- [ ] Color usage matches semantic meaning (red=error, green=success)
+
+### 5. Cleanup
+
+- [ ] No `console.log` statements
+- [ ] No commented-out JSX/HTML
+- [ ] No `z-index` values > 100 without documented reason
+- [ ] No inline styles that should be classes/tokens
+- [ ] No dead CSS classes
+
+## Auto-Fix Rules
+
+| Issue | Fix Action |
+|-------|-----------|
+| Missing hover state on button | Add hover style using existing token |
+| Missing focus ring | Add `focus-visible` outline |
+| Missing disabled state | Add disabled variant with reduced opacity |
+| Inconsistent border radius | Normalize to nearest design token |
+| Inline color values | Replace with CSS variable |
+| `console.log` in UI files | Remove |
+| Commented-out code | Remove |
+
+## Process
+
+1. Read target files fully
+2. Run checklist against each file
+3. Collect findings with file:line references
+4. Apply auto-fixes for safe items
+5. Report items requiring manual review
+6. Re-verify fixed files pass checklist
+
+## Output Format
+
+```markdown
+## Design Polish: {target}
+
+### Auto-Fixed
+- ✅ {file}:{line} — Added hover state to submit button
+- ✅ {file}:{line} — Replaced #3B82F6 with var(--color-primary)
+- ✅ {file}:{line} — Removed console.log
+
+### Manual Review Needed
+- ⚠️ {file}:{line} — Orphaned word in heading (layout choice)
+- ⚠️ {file}:{line} — Missing loading state on async action
+
+### Summary
+- Items checked: {N}
+- Auto-fixed: {N}
+- Manual review: {N}
+- Ship-ready: {yes/no}
+```
+
+## Preparation
+
+Before running polish:
+
+1. **Read** `.claude/vibe/design-context.json`
+   - If missing → display: "Run `/design-teach` first for better results" → proceed with defaults
+   - If parse error → display warning → proceed with defaults → recommend `/design-teach`
+   - If present → apply brand-appropriate micro-interaction styles from `aesthetic.style`
+2. **Read** `.claude/vibe/design-system/*/MASTER.md` (if exists) for token references
+
+## Next Steps
+
+| If Result Shows | Recommended Next |
+|----------------|-----------------|
+| All items pass | Ship ready — no further action needed |
+| Design system gaps found | `/design-normalize` first, then re-run `/design-polish` |
+
+## Important
+
+- **Modifying**: This skill directly applies safe fixes.
+- **Conservative**: Only auto-fixes items with clear, safe remediation. Ambiguous items flagged for manual review.
+- **Pairs with**: Run `/design-audit` first for broad issues, then `/design-polish` for final touches.

package/skills/design-teach/SKILL.md

@@ -0,0 +1,181 @@
+---
+name: design-teach
+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."
+triggers: [design-teach, design-setup, design-context]
+priority: 50
+---
+
+# Design Teach — Project Design Context Gathering
+
+Collect project-specific design context so all design-* skills produce tailored, brand-aware results. Saves to `.claude/vibe/design-context.json`.
+
+## Usage
+
+```
+/design-teach                  # Interactive context gathering
+/design-teach --update         # Update existing context
+```
+
+## Process
+
+### Step 1: Auto-Explore Codebase
+
+Before asking questions, automatically gather existing signals:
+
+| Signal | Where to Look |
+|--------|---------------|
+| CSS variables / tokens | `*.css`, `tailwind.config.*`, `theme.*` |
+| Color palette | Existing color definitions, brand assets |
+| Typography | Font imports, font-family declarations |
+| Component library | `package.json` dependencies (MUI, Chakra, shadcn, etc.) |
+| Design system | `.claude/vibe/design-system/*/MASTER.md` |
+| Existing context | `.claude/vibe/design-context.json` (if updating) |
+
+### Step 2: Ask Clarifying Questions
+
+Present findings from Step 1, then ask what's missing:
+
+**1. Target Audience**
+- Who are the primary users? (developers, consumers, enterprise, internal)
+- Technical sophistication? (tech-savvy, general public, mixed)
+- Usage context? (desktop office, mobile on-the-go, both)
+
+**2. Brand Personality**
+- How should the product feel? (professional, playful, minimal, bold, warm)
+- Reference products with similar feel? (e.g., "Linear-like", "Notion-like")
+- Any brand guidelines or style guide URL?
+
+**3. Aesthetic Direction**
+- Visual density preference? (spacious, balanced, dense)
+- Color mood? (warm, cool, neutral, vibrant)
+- Typography mood? (modern sans, classic serif, monospace-technical)
+
+**4. Constraints**
+- Accessibility requirements? (WCAG AA, AAA, specific needs)
+- Supported devices? (desktop-only, mobile-first, responsive)
+- Dark mode required?
+- Performance budget? (target LCP, bundle size limits)
+
+### Step 3: Save Context
+
+Write gathered context to `.claude/vibe/design-context.json` using the Write tool.
+
+**Schema (v1):**
+
+```json
+{
+  "$schema": "design-context-v1",
+  "createdAt": "ISO-8601",
+  "updatedAt": "ISO-8601",
+  "audience": {
+    "primary": "대상 사용자 설명",
+    "context": "사용 환경 (desktop/mobile/mixed)",
+    "expertise": "기술 수준 (beginner/intermediate/expert)"
+  },
+  "brand": {
+    "personality": ["형용사 3-5개"],
+    "tone": "formal | casual | playful | professional (가이드라인, 자유 입력 가능)",
+    "existingAssets": "기존 브랜드 가이드라인 경로 (선택)"
+  },
+  "aesthetic": {
+    "style": "minimal | bold | elegant | playful | corporate (가이드라인, 자유 입력 가능)",
+    "colorMood": "warm | cool | neutral | vibrant | muted (가이드라인, 자유 입력 가능)",
+    "typographyMood": "modern | classic | geometric | humanist (가이드라인, 자유 입력 가능)",
+    "references": ["참조 사이트/앱 URL"]
+  },
+  "constraints": {
+    "accessibility": "AA | AAA",
+    "performance": "core-web-vitals | balanced | unlimited",
+    "browsers": ["chrome", "safari", "firefox", "edge"],
+    "devices": ["mobile", "tablet", "desktop"]
+  },
+  "detectedStack": {
+    "framework": "감지된 프레임워크",
+    "componentLibrary": "감지된 컴포넌트 라이브러리",
+    "styling": "감지된 스타일링 방식",
+    "fonts": ["감지된 폰트"]
+  }
+}
+```
+
+> **Note**: `tone`, `style`, `colorMood`, `typographyMood` 값은 제안 값이며 closed enum이 아닙니다. 사용자가 자유 텍스트로 입력할 수 있습니다.
+
+> **Size limit**: design-context.json은 10KB를 초과하지 않도록 합니다. `references` 배열은 최대 5개로 제한합니다.
+
+### Step 4: Rerun Semantics
+
+`design-context.json`이 이미 존재할 때 `/design-teach`를 다시 실행하면:
+
+1. 기존 파일을 Read 도구로 읽음
+2. 각 질문에 **기존 값을 기본값으로 표시** ("현재: professional, clean — 변경하시겠습니까?")
+3. 사용자가 "keep" 또는 빈 답변 → 해당 필드 유지
+4. 새 값 입력 → 해당 필드만 교체 (병합이 아닌 **필드 단위 교체**)
+5. `createdAt`은 항상 보존, `updatedAt`만 현재 시각으로 갱신
+
+### Step 5: Other Skills Reference This Context
+
+각 design-* skill은 실행 시 다음을 수행:
+
+```
+1. Read `.claude/vibe/design-context.json`
+2. 파일 없음 → "Run /design-teach first for better results" 안내 출력 → 기본값으로 계속 실행
+3. 파싱 실패 (잘못된 JSON) → "design-context.json 파싱 실패" 경고 + 기본값으로 계속 → /design-teach 재실행 권장
+4. 정상 → context를 분석 기준에 반영
+```
+
+## Design Workflow Integration
+
+디자인 스킬은 vibe 워크플로우의 3개 Phase에 통합됩니다:
+
+```
+SPEC Phase:
+  ① design-context.json 확인 (없으면 /design-teach 권장)
+  ② ui-industry-analyzer → ui-design-system-gen → ui-layout-architect
+
+REVIEW Phase:
+  ③ /design-audit (기술 품질 점검)
+  ④ /design-critique (UX 리뷰)
+  ⑤ ui-antipattern-detector (AI slop + 패턴 탐지)
+
+PRE-SHIP Phase:
+  ⑥ /design-normalize (디자인 시스템 정렬)
+  ⑦ /design-polish (최종 패스)
+```
+
+## How Other Skills Use This
+
+| Skill | Context Usage |
+|-------|---------------|
+| `/design-audit` | Weight findings by audience constraints (a11y level, devices) |
+| `/design-critique` | Adjust persona priorities by target audience |
+| `/design-polish` | Apply brand-appropriate micro-interactions |
+| `/design-normalize` | Use detected token system for replacement mapping |
+| `/design-distill` | Preserve brand-expressive elements based on personality |
+
+## Output Format
+
+```markdown
+## Design Context: {project}
+
+### Auto-Detected
+- Framework: Next.js 15
+- Styling: Tailwind CSS + shadcn/ui
+- Fonts: Inter (heading), Inter (body)
+- Tokens: 24 CSS variables found
+
+### User Provided
+- Audience: B2B SaaS, mixed technical level
+- Brand: Professional, clean (like Linear)
+- Density: Balanced
+- A11y: WCAG AA
+- Dark mode: Required
+
+### Saved
+✅ .claude/vibe/design-context.json updated
+```
+
+## Important
+
+- **Non-destructive**: Only creates/updates the context file. No code changes.
+- **Incremental**: Running `--update` preserves existing answers, only asks about gaps.
+- **Foundation**: Run this first before other design-* skills for best results.

package/skills/exec-plan/SKILL.md

@@ -3,6 +3,7 @@ name: exec-plan
 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'."
 triggers: [exec plan, execution plan, autonomous plan, self-contained plan, long-running]
 priority: 70
+chain-next: [commit-push-pr]
 ---
 
 # ExecPlan — Self-Contained Execution Plan Generator

package/skills/parallel-research/SKILL.md

@@ -3,6 +3,7 @@ name: parallel-research
 description: "Parallel research with 4 specialized agents (best-practices, framework-docs, codebase-patterns, security-advisory) running simultaneously. Use when facing unfamiliar technology, choosing between libraries/frameworks, designing architecture for a new feature, or investigating security implications. Must use this skill when user asks 'how should we build X', 'which library for Y', or when starting work on a complex feature with unknown requirements. Not for simple lookups — use web search directly for those."
 triggers: [parallel research, complex feature, technology selection, architecture design, security critical]
 priority: 60
+chain-next: [exec-plan]
 ---
 # Parallel Research
 

package/skills/prioritization-frameworks/SKILL.md

@@ -0,0 +1,86 @@
+---
+name: prioritization-frameworks
+description: "Reference guide to 9 prioritization frameworks with formulas, when-to-use guidance, and templates — RICE, ICE, Kano, MoSCoW, Opportunity Score, and more."
+triggers: [prioritize, prioritization, rice, ice, kano, moscow, opportunity score]
+priority: 50
+chain-next: [create-prd]
+---
+
+# Prioritization Frameworks Reference
+
+> Based on the Product Frameworks Compendium from [Product Compass](https://www.productcompass.pm/p/the-product-frameworks-compendium) by Pawel Huryn (MIT License).
+
+A reference guide to help you select and apply the right prioritization framework for your context.
+
+## Core Principle
+
+Never allow customers to design solutions. Prioritize **problems (opportunities)**, not features.
+
+## Opportunity Score (Dan Olsen, *The Lean Product Playbook*)
+
+The recommended framework for prioritizing customer problems.
+
+Survey customers on **Importance** and **Satisfaction** for each need (normalize to 0-1 scale).
+
+Three related formulas:
+- **Current value** = Importance x Satisfaction
+- **Opportunity Score** = Importance x (1 - Satisfaction)
+- **Customer value created** = Importance x (S2 - S1), where S1 = satisfaction before, S2 = satisfaction after
+
+High Importance + low Satisfaction = highest Opportunity Score = best opportunities. Plot on an Importance vs Satisfaction chart — upper-left quadrant is the sweet spot.
+
+## ICE Framework
+
+Useful for prioritizing initiatives and ideas. Considers not only value but also risk and economic factors.
+
+- **I** (Impact) = Opportunity Score x Number of Customers affected
+- **C** (Confidence) = How confident are we? (1-10). Accounts for risk.
+- **E** (Ease) = How easy is it to implement? (1-10). Accounts for economic factors.
+
+**Score** = I x C x E. Higher = prioritize first.
+
+## RICE Framework
+
+Splits ICE's Impact into two separate factors. Useful for larger teams that need more granularity.
+
+- **R** (Reach) = Number of customers affected
+- **I** (Impact) = Opportunity Score (value per customer)
+- **C** (Confidence) = How confident are we? (0-100%)
+- **E** (Effort) = How much effort to implement? (person-months)
+
+**Score** = (R x I x C) / E
+
+## 9 Frameworks Overview
+
+| Framework | Best For | Key Insight |
+|-----------|----------|-------------|
+| Eisenhower Matrix | Personal tasks | Urgent vs Important — for individual PM task management |
+| Impact vs Effort | Tasks/initiatives | Simple 2x2 — quick triage, not rigorous for strategic decisions |
+| Risk vs Reward | Initiatives | Like Impact vs Effort but accounts for uncertainty |
+| **Opportunity Score** | Customer problems | **Recommended.** Importance x (1 - Satisfaction). Normalize to 0-1. |
+| Kano Model | Understanding expectations | Must-be, Performance, Attractive, Indifferent, Reverse. For understanding, not prioritizing. |
+| Weighted Decision Matrix | Multi-factor decisions | Assign weights to criteria, score each option. Useful for stakeholder buy-in. |
+| **ICE** | Ideas/initiatives | Impact x Confidence x Ease. Recommended for quick prioritization. |
+| **RICE** | Ideas at scale | (Reach x Impact x Confidence) / Effort. Adds Reach to ICE. |
+| MoSCoW | Requirements | Must/Should/Could/Won't. Caution: project management origin. |
+
+## How to Choose
+
+1. **Prioritizing customer problems?** → Opportunity Score
+2. **Quick initiative ranking?** → ICE
+3. **Large team with data?** → RICE
+4. **Understanding user expectations?** → Kano Model
+5. **Stakeholder alignment needed?** → Weighted Decision Matrix
+6. **Requirements scoping?** → MoSCoW (with caution)
+
+## Templates
+
+- [Opportunity Score intro (PDF)](https://drive.google.com/file/d/1ENbYPmk1i1AKO7UnfyTuULL5GucTVufW/view)
+- [Importance vs Satisfaction Template (Google Slides)](https://docs.google.com/presentation/d/1jg-LuF_3QHsf6f1nE1f98i4C0aulnRNMOO1jftgti8M/edit#slide=id.g796641d975_0_3)
+- [ICE Template (Google Sheets)](https://docs.google.com/spreadsheets/d/1LUfnsPolhZgm7X2oij-7EUe0CJT-Dwr-/edit?usp=share_link)
+- [RICE Template (Google Sheets)](https://docs.google.com/spreadsheets/d/1S-6QpyOz5MCrV7B67LUWdZkAzn38Eahv/edit?usp=sharing)
+
+## Further Reading
+
+- [The Product Management Frameworks Compendium + Templates](https://www.productcompass.pm/p/the-product-frameworks-compendium)
+- [Kano Model: How to Delight Your Customers Without Becoming a Feature Factory](https://www.productcompass.pm/p/kano-model-how-to-delight-your-customers)

package/skills/techdebt/SKILL.md

@@ -3,6 +3,7 @@ name: techdebt
 description: "Technical debt cleanup — detect and fix duplicate code, console.log, unused imports, any types, etc. Recommended before session end. Activates on techdebt, cleanup, debt keywords."
 triggers: [techdebt, cleanup, debt, unused imports, console.log, dead code]
 priority: 60
+chain-next: [commit-push-pr]
 ---
 
 # Techdebt — Technical Debt Cleanup

package/skills/ui-ux-pro-max/SKILL.md

@@ -211,6 +211,20 @@ Avoid these signs of generic, AI-generated UI:
 | Safe, corporate color palettes | Develop unique color palettes beyond defaults |
 | No micro-interactions | Add meaningful motion to guide user attention (150-300ms) |
 
+## Deep Reference Guides
+
+For detailed guidance on specific domains, see the reference files:
+
+| Reference | Domain | Use When |
+|-----------|--------|----------|
+| [typography](reference/typography.md) | Type systems, font pairing, scales | Setting up type hierarchy |
+| [color-and-contrast](reference/color-and-contrast.md) | OKLCH, tinted neutrals, dark mode | Choosing colors, dark mode |
+| [spatial-design](reference/spatial-design.md) | Spacing systems, grids, hierarchy | Layout and spacing decisions |
+| [motion-design](reference/motion-design.md) | Easing, staggering, reduced motion | Adding animations |
+| [interaction-design](reference/interaction-design.md) | States, focus, forms, modals | Building interactive elements |
+| [responsive-design](reference/responsive-design.md) | Mobile-first, fluid, containers | Responsive implementation |
+| [ux-writing](reference/ux-writing.md) | Labels, errors, empty states | Writing UI copy |
+
 ## Done Criteria (K4)
 
 - [ ] Design system generated before implementation