@su-record/vibe 2.8.24 → 2.8.25

package/skills/vercel-react-best-practices/rubrics/server-components.md

@@ -0,0 +1,86 @@
+# Server vs Client Component Decision Guide
+
+## Decision Tree
+
+```
+Does this component need any of the following?
+    │
+    ├─ useState / useReducer         → Client
+    ├─ useEffect / lifecycle hooks   → Client
+    ├─ Browser APIs (window, document, localStorage) → Client
+    ├─ Event handlers (onClick, onChange, onSubmit)  → Client
+    ├─ Third-party hooks (useRouter, useForm, etc.)  → Client
+    │
+    └─ None of the above?            → Server (default)
+```
+
+## Default: Server Component
+
+Next.js App Router defaults all components to Server. Only add `"use client"` when required.
+
+**Server components can:**
+- Fetch data directly (no useEffect needed)
+- Access backend resources (DB, filesystem, env secrets)
+- Reduce client bundle size (zero JS shipped)
+- Use `async/await` at the component level
+
+```tsx
+// Server component — no directive needed
+async function UserProfile({ id }: { id: string }) {
+  const user = await db.user.findUnique({ where: { id } });
+  return <div>{user?.name}</div>;
+}
+```
+
+## Client Component
+
+Add `"use client"` at the top of the file.
+
+```tsx
+"use client";
+import { useState } from "react";
+
+export function Counter() {
+  const [count, setCount] = useState(0);
+  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
+}
+```
+
+## Composition Pattern: Push Client Down
+
+Keep client boundary as low as possible. Wrap only the interactive slice, not the whole page.
+
+```tsx
+// Bad: entire section becomes client
+"use client";
+async function ProductPage({ id }: { id: string }) { ... }
+
+// Good: server fetches, client handles interaction
+async function ProductPage({ id }: { id: string }) {
+  const product = await getProduct(id);
+  return (
+    <div>
+      <ProductDetails product={product} />   {/* server */}
+      <AddToCartButton productId={id} />     {/* client — small, isolated */}
+    </div>
+  );
+}
+```
+
+## Gotchas
+
+| Mistake | Effect | Fix |
+|---------|--------|-----|
+| Importing a Client component into a Server component that passes a non-serializable prop | Runtime error | Only pass serializable data (string, number, plain object) |
+| `"use client"` on a file that only uses server features | Unnecessary client bundle | Remove directive |
+| `async` component without Suspense wrapper | Blocks entire parent render | Wrap in `<Suspense fallback={...}>` |
+| Calling `React.cache()` in a Client component | No effect — cache is server-only | Move data fetching to Server component |
+| Secrets in Client component | Exposed to browser | Move fetch to Server component or API route |
+
+## Data Fetching Boundary
+
+| Where | Pattern |
+|-------|---------|
+| Server component | `await fetch()` / direct DB call |
+| Client component | `useEffect` + fetch, or SWR/React Query |
+| Shared across server components | Wrap with `React.cache()` for per-request dedup |

package/skills/vibe-docs/SKILL.md

@@ -0,0 +1,171 @@
+---
+name: vibe-docs
+tier: standard
+description: "Generate project documentation — README, architecture docs, user guide, release notes. Activates on docs, readme, documentation keywords."
+triggers: [vibe.docs, docs, documentation, readme, release notes, architecture doc]
+priority: 50
+---
+
+# vibe.docs — Project Documentation Generator
+
+Generate or update project documentation by analyzing the actual codebase.
+
+## Subcommands
+
+### `/vibe.docs readme` — README Generation
+
+Analyze the codebase and generate a complete README.md:
+
+1. **Detect project nature**: Read package.json, CLAUDE.md, existing README
+2. **Extract key info**: Tech stack, installation, usage, API surface
+3. **Generate sections**:
+
+```markdown
+# Project Name
+> One-line description from package.json
+
+## What is this?
+[2-3 sentences explaining the problem and solution]
+
+## Quick Start
+[Installation + minimal usage example]
+
+## Features
+[Auto-detected from codebase — exported functions, CLI commands, API endpoints]
+
+## Architecture
+[High-level module diagram if 5+ source directories]
+
+## Configuration
+[Detected config files and their purposes]
+
+## Development
+[Build, test, lint commands from package.json scripts]
+
+## License
+```
+
+**Analysis approach:**
+```
+Read: package.json → name, description, scripts, dependencies
+Glob: src/**/*.ts → module structure
+Grep: pattern="export (function|class|const)" → public API surface
+Grep: pattern="(app|router)\.(get|post|put|delete)" → API endpoints
+Read: CLAUDE.md → project conventions
+```
+
+### `/vibe.docs guide` — User Guide
+
+Generate a step-by-step user guide:
+
+1. **Installation**: Detect package manager, prerequisites
+2. **Configuration**: Find all config files, document each option
+3. **Usage**: Extract CLI commands or API usage patterns
+4. **FAQ**: Common issues from error handling patterns
+5. **Troubleshooting**: Known edge cases from test files
+
+Output: `docs/GUIDE.md`
+
+**Analysis approach:**
+```
+Read: package.json → bin, scripts, peerDependencies
+Glob: src/cli/commands/*.ts → CLI command list
+Grep: pattern="throw new|Error\(" → common error scenarios
+Grep: pattern="(process\.env|config)\.\w+" → configuration options
+```
+
+### `/vibe.docs arch` — Architecture Documentation
+
+Generate architecture overview with diagrams:
+
+1. **Module map**: Directory structure → responsibility mapping
+2. **Dependency graph**: Import analysis → Mermaid diagram
+3. **Data flow**: Entry points → processing → output
+4. **Key decisions**: Extract from CLAUDE.md and code comments
+
+Output: `docs/ARCHITECTURE.md`
+
+**Mermaid diagram generation:**
+```
+Glob: src/**/ → module list
+Grep: pattern="^import .+ from" → dependency edges
+Read: CLAUDE.md → architecture notes
+
+Generate:
+graph TD
+    CLI[CLI Commands] --> Core[Core Logic]
+    Core --> Infra[Infrastructure]
+    Infra --> DB[(Database)]
+    Infra --> API[External APIs]
+```
+
+### `/vibe.docs release` — Release Notes
+
+Generate release notes from git history:
+
+1. **Collect**: `git log` since last tag
+2. **Classify**: feat/fix/refactor/docs/chore from commit messages
+3. **Group**: By category with breaking changes highlighted
+4. **Format**: Semantic versioning suggestion
+
+Output: `RELEASE_NOTES.md` or append to `CHANGELOG.md`
+
+**Output format:**
+```markdown
+## [x.y.z] - YYYY-MM-DD
+
+### Breaking Changes
+- ...
+
+### Features
+- feat: description (#PR)
+
+### Bug Fixes
+- fix: description (#PR)
+
+### Other
+- refactor/docs/chore items
+```
+
+## Pipeline Integration
+
+`/vibe.docs` completes the development pipeline:
+
+```
+/vibe.spec    → Design (what to build)
+/vibe.run     → Implement (build it)
+/vibe.trace   → Verify (prove it works)
+/vibe.docs    → Document (explain it)
+```
+
+### Auto-trigger after `/vibe.trace`
+
+When `/vibe.trace` completes with all scenarios passing, suggest:
+> "All scenarios verified. Run `/vibe.docs readme` to update documentation?"
+
+## Guidelines
+
+### DO
+- Read the actual codebase before generating — never guess
+- Preserve existing documentation that's still accurate
+- Include concrete code examples from the actual project
+- Keep language consistent with project (Korean/English based on CLAUDE.md)
+- Use changelog-writer agent for `/vibe.docs release`
+- Use api-documenter agent for API-heavy projects
+- Use diagrammer agent for `/vibe.docs arch` Mermaid generation
+
+### DON'T
+- Don't generate placeholder text ("Lorem ipsum", "TODO: fill in")
+- Don't document internal implementation details in user-facing docs
+- Don't create files without reading existing ones first
+- Don't assume features — verify by reading code
+
+## Quality Checklist
+
+Before finalizing any document:
+
+- [ ] All code examples are runnable (copy-paste ready)
+- [ ] Installation steps tested against package.json
+- [ ] Links and paths are valid
+- [ ] No placeholder text remaining
+- [ ] Consistent with project language (Korean/English)

package/skills/vibe-docs/templates/architecture.md

@@ -0,0 +1,80 @@
+# Architecture: {{PROJECT_NAME}}
+
+> Version: {{VERSION}} | Updated: {{DATE}}
+
+## Overview
+
+{{2-3 SENTENCES: WHAT THIS SYSTEM DOES AND ITS PRIMARY ARCHITECTURAL APPROACH.}}
+
+## System Diagram
+
+```mermaid
+graph TD
+    {{ENTRY_POINT}}[{{ENTRY_LABEL}}] --> {{MODULE_A}}[{{MODULE_A_LABEL}}]
+    {{MODULE_A}} --> {{MODULE_B}}[{{MODULE_B_LABEL}}]
+    {{MODULE_A}} --> {{MODULE_C}}[{{MODULE_C_LABEL}}]
+    {{MODULE_B}} --> {{STORE}}[({{STORE_LABEL}})]
+    {{MODULE_C}} --> {{EXTERNAL}}[{{EXTERNAL_SERVICE_LABEL}}]
+```
+
+> Replace nodes above based on actual `import` analysis. Run:
+> `grep -r "^import .* from" src/ | sed 's/.*from //' | sort | uniq` to get dependency edges.
+
+## Module Responsibilities
+
+| Module / Directory | Responsibility | Key Files |
+|--------------------|---------------|-----------|
+| `{{MODULE_1}}/` | {{RESPONSIBILITY}} | `{{KEY_FILE}}` |
+| `{{MODULE_2}}/` | {{RESPONSIBILITY}} | `{{KEY_FILE}}` |
+| `{{MODULE_3}}/` | {{RESPONSIBILITY}} | `{{KEY_FILE}}` |
+
+## Data Flow
+
+```
+{{INPUT_SOURCE}}
+  ↓ {{STEP_1_DESCRIPTION}}
+{{PROCESSING_MODULE}}
+  ↓ {{STEP_2_DESCRIPTION}}
+{{OUTPUT_TARGET}}
+```
+
+### Key Data Entities
+
+| Entity | Where Defined | Storage |
+|--------|--------------|---------|
+| `{{ENTITY_1}}` | `{{FILE_PATH}}` | {{DB / FILE / MEMORY}} |
+| `{{ENTITY_2}}` | `{{FILE_PATH}}` | {{DB / FILE / MEMORY}} |
+
+## External Dependencies
+
+| Service | Purpose | Auth Method |
+|---------|---------|-------------|
+| `{{SERVICE_1}}` | {{PURPOSE}} | {{API_KEY / OAUTH / NONE}} |
+| `{{SERVICE_2}}` | {{PURPOSE}} | {{AUTH_METHOD}} |
+
+## Key Decisions
+
+| Decision | Chosen Approach | Alternatives Considered | Rationale |
+|----------|----------------|------------------------|-----------|
+| {{DECISION_1}} | {{CHOICE}} | {{ALTERNATIVES}} | {{WHY}} |
+| {{DECISION_2}} | {{CHOICE}} | {{ALTERNATIVES}} | {{WHY}} |
+
+## Constraints & Non-Goals
+
+**Constraints:**
+- {{CONSTRAINT_1}} (e.g., "Must work offline")
+- {{CONSTRAINT_2}}
+
+**Non-goals (out of scope):**
+- {{NON_GOAL_1}}
+- {{NON_GOAL_2}}
+
+## Local Development Setup
+
+```bash
+{{SETUP_COMMANDS}}
+```
+
+## Further Reading
+
+- {{INTERNAL_LINK_OR_DOC}}

package/skills/vibe-docs/templates/readme.md

@@ -0,0 +1,84 @@
+# {{PROJECT_NAME}}
+
+> {{ONE_LINE_DESCRIPTION_FROM_PACKAGE_JSON}}
+
+## What is this?
+
+{{2-3 SENTENCES: THE PROBLEM THIS PROJECT SOLVES AND HOW IT SOLVES IT.}}
+
+## Quick Start
+
+```bash
+# Install
+{{PACKAGE_MANAGER}} install {{PACKAGE_NAME}}
+
+# Minimal usage example
+{{USAGE_EXAMPLE}}
+```
+
+## Features
+
+- **{{FEATURE_1}}** — {{BRIEF_DESCRIPTION}}
+- **{{FEATURE_2}}** — {{BRIEF_DESCRIPTION}}
+- **{{FEATURE_3}}** — {{BRIEF_DESCRIPTION}}
+
+## Architecture
+
+> Include this section if the project has 5+ source directories.
+
+```
+{{PROJECT_NAME}}/
+├── {{DIR_1}}/      # {{RESPONSIBILITY_1}}
+├── {{DIR_2}}/      # {{RESPONSIBILITY_2}}
+└── {{DIR_3}}/      # {{RESPONSIBILITY_3}}
+```
+
+## Configuration
+
+| File | Purpose |
+|------|---------|
+| `{{CONFIG_FILE_1}}` | {{PURPOSE}} |
+| `{{CONFIG_FILE_2}}` | {{PURPOSE}} |
+
+**Key environment variables:**
+
+| Variable | Required | Default | Description |
+|----------|----------|---------|-------------|
+| `{{ENV_VAR_1}}` | Yes / No | `{{DEFAULT}}` | {{DESCRIPTION}} |
+
+## Development
+
+```bash
+# Install dependencies
+{{INSTALL_COMMAND}}
+
+# Build
+{{BUILD_COMMAND}}
+
+# Test
+{{TEST_COMMAND}}
+
+# Lint
+{{LINT_COMMAND}}
+```
+
+## API Reference
+
+> Include if the project exposes a public API.
+
+### `{{FUNCTION_OR_CLASS_NAME}}`
+
+```typescript
+{{FUNCTION_SIGNATURE}}
+```
+
+{{DESCRIPTION}}
+
+**Parameters:**
+- `{{PARAM_1}}` — {{TYPE}}: {{DESCRIPTION}}
+
+**Returns:** `{{RETURN_TYPE}}` — {{DESCRIPTION}}
+
+## License
+
+{{LICENSE}} — see [LICENSE](./LICENSE)

package/skills/vibe-docs/templates/release-notes.md

@@ -0,0 +1,74 @@
+# Release Notes: {{PROJECT_NAME}}
+
+---
+
+## [{{VERSION}}] — {{RELEASE_DATE}}
+
+> {{ONE_SENTENCE_SUMMARY_OF_THIS_RELEASE}}
+
+### Breaking Changes
+
+> If none, remove this section.
+
+- **{{CHANGE_DESCRIPTION}}** — {{MIGRATION_GUIDE}}
+  - Before: `{{OLD_USAGE}}`
+  - After: `{{NEW_USAGE}}`
+
+### Features
+
+- `feat`: {{FEATURE_DESCRIPTION}} ([#{{PR_NUMBER}}]({{PR_URL}}))
+- `feat`: {{FEATURE_DESCRIPTION}} ([#{{PR_NUMBER}}]({{PR_URL}}))
+
+### Bug Fixes
+
+- `fix`: {{BUG_DESCRIPTION}} — {{WHAT_WAS_WRONG_AND_HOW_FIXED}} ([#{{PR_NUMBER}}]({{PR_URL}}))
+
+### Performance
+
+- `perf`: {{IMPROVEMENT_DESCRIPTION}} — {{BEFORE}} → {{AFTER}}
+
+### Other
+
+- `refactor`: {{DESCRIPTION}}
+- `docs`: {{DESCRIPTION}}
+- `chore`: {{DESCRIPTION}}
+
+---
+
+## Upgrade Guide
+
+### From {{PREVIOUS_VERSION}} to {{VERSION}}
+
+```bash
+{{UPGRADE_COMMAND}}
+```
+
+**Required config changes:**
+1. {{CONFIG_CHANGE_1}}
+2. {{CONFIG_CHANGE_2}}
+
+---
+
+## [{{PREVIOUS_VERSION}}] — {{PREVIOUS_DATE}}
+
+> Past release notes continue below in reverse chronological order.
+
+---
+
+<!-- GENERATION NOTES (remove before publishing)
+
+Run to generate draft:
+  git log {{PREVIOUS_TAG}}..HEAD --oneline --no-merges
+
+Classify commits:
+  feat:     → Features
+  fix:      → Bug Fixes
+  perf:     → Performance
+  refactor/docs/chore/test: → Other
+  BREAKING CHANGE in footer: → Breaking Changes
+
+Version bump guidance:
+  Breaking changes → major (x.0.0)
+  New features      → minor (0.x.0)
+  Bug fixes only    → patch (0.0.x)
+-->

package/skills/vibe-figma/rubrics/extraction-checklist.md

@@ -0,0 +1,51 @@
+# Extraction Checklist — What to Extract from Figma
+
+## Colors
+
+- [ ] Background colors (`bg-[#...]`) — section, card, overlay backgrounds
+- [ ] Text colors (`text-[#...]`) — heading, body, label, disabled states
+- [ ] Border colors (`border-[#...]`) — dividers, input outlines
+- [ ] Overlay/alpha colors (`rgba(...)`) — modals, hover states
+- [ ] Gradient stops — linear/radial gradients with exact hex + stop positions
+- [ ] Blend mode colors — any element using `mix-blend-*`
+
+## Spacing
+
+- [ ] Section padding (`pt-[Npx]`, `pb-[Npx]`, `px-[Npx]`)
+- [ ] Component gaps (`gap-[Npx]`) — flex/grid item spacing
+- [ ] Inner padding (`p-[Npx]`, `px-[Npx]`) — cards, buttons
+- [ ] Margin overrides (`mt-`, `mb-`, `ml-`, `mr-`)
+- [ ] Absolute offsets (`top-[Npx]`, `left-[Npx]`) — positioned layers
+
+## Typography
+
+- [ ] Font family — extract from `font-[family-name:var(--...)]` fallback
+- [ ] Font sizes (`text-[Npx]`) — all unique sizes per role (heading, sub, body, caption)
+- [ ] Font weights (`font-black/bold/semibold/medium/normal`)
+- [ ] Line heights (`leading-[N]` or `leading-[Npx]`)
+- [ ] Letter spacing (`tracking-[Npx]` or `tracking-[-Npx]`)
+- [ ] Text alignment (`text-center`, `text-left`, `text-right`)
+- [ ] Text decoration / transform if present
+
+## Components
+
+- [ ] Button variants — primary, secondary, disabled; exact size + color + radius
+- [ ] Card structures — border, shadow (`shadow-[...]`), border-radius
+- [ ] Icon dimensions — width/height from `w-[Npx] h-[Npx]`
+- [ ] Badges/tags — background color, font, padding, radius
+- [ ] Input fields — border, focus ring, placeholder color
+- [ ] Navigation — GNB/footer height, link styles
+
+## Assets
+
+- [ ] All `const img...` URL variables in reference code — zero omissions
+- [ ] Background images vs content images vs decorative images classified
+- [ ] Image dimensions noted for `width`/`height` attributes
+- [ ] Sprite/overflow images identified (left negative %, width >100%)
+
+## Tokens to Create
+
+- [ ] Color tokens for every unique hex value used more than once
+- [ ] Spacing tokens for recurring gap/padding values
+- [ ] Typography tokens for each font-size role
+- [ ] Breakpoint token (`$bp-pc`) from CONFIG frame

package/skills/vibe-figma/templates/figma-handoff.md

@@ -0,0 +1,96 @@
+# Figma Handoff — {{FEATURE_NAME}}
+
+**Figma File:** {{FIGMA_FILE_URL}}
+**Feature Key:** {{FEATURE_KEY}} (kebab-case)
+**Date:** {{DATE}}
+**Stack:** {{STACK}} (e.g. Vue/Nuxt + SCSS, React/Next.js + SCSS)
+
+---
+
+## Design Specs
+
+### Viewport / Scale
+
+| Breakpoint | Design Width | Target Width | Scale Factor |
+|-----------|-------------|-------------|-------------|
+| Mobile (base) | {{DESIGN_MOBILE_PX}}px | {{TARGET_MOBILE_PX}}px | {{SCALE_MOBILE}} |
+| Desktop | {{DESIGN_PC_PX}}px | {{TARGET_PC_PX}}px | {{SCALE_PC}} |
+
+Breakpoint threshold: `@media (min-width: {{BP_PC}}px)`
+
+### Color Tokens
+
+| Token | Hex | Usage |
+|-------|-----|-------|
+| `$color-{{NAME}}` | `{{HEX}}` | {{USAGE}} |
+
+### Typography Tokens
+
+| Token | Figma px | Scaled px | Weight | Role |
+|-------|---------|----------|--------|------|
+| `$text-{{ROLE}}` | {{FIGMA_PX}}px | {{SCALED_PX}}px | {{WEIGHT}} | {{ROLE}} |
+
+### Spacing Tokens
+
+| Token | Figma px | Scaled px | Usage |
+|-------|---------|----------|-------|
+| `$space-{{NAME}}` | {{FIGMA_PX}}px | {{SCALED_PX}}px | {{USAGE}} |
+
+---
+
+## Sections
+
+| # | Section Name | Component File | Mode | Height (design) |
+|---|-------------|---------------|------|----------------|
+| 1 | {{SECTION_NAME}} | `components/{{FEATURE_KEY}}/{{ComponentName}}.vue` | {{MODE}} | {{HEIGHT}}px |
+
+**Mode key:** `normal` = external SCSS | `literal` = scoped CSS (non-standard layout)
+
+---
+
+## Asset Manifest
+
+| Variable | Local Path | Type | Alt Text |
+|----------|-----------|------|----------|
+| `{{IMG_VAR}}` | `/images/{{FEATURE_KEY}}/{{FILE_NAME}}.webp` | {{bg\|content\|decorative}} | {{ALT}} |
+
+Total assets: {{ASSET_COUNT}}
+
+---
+
+## File Structure
+
+```
+components/{{FEATURE_KEY}}/
+  {{ComponentName}}.vue
+
+public/images/{{FEATURE_KEY}}/
+  {{FILE_NAME}}.webp
+
+styles/{{FEATURE_KEY}}/
+  index.scss
+  _tokens.scss
+  _mixins.scss
+  _base.scss
+  layout/
+    _{{section}}.scss
+  components/
+    _{{section}}.scss
+```
+
+---
+
+## Verification Checklist
+
+- [ ] No `figma.com/api` URLs in any generated file
+- [ ] No `placeholder` or empty `src=""` in components
+- [ ] No `<style>` blocks in components (normal mode)
+- [ ] All assets downloaded and non-zero bytes
+- [ ] Build passes without errors
+- [ ] Screenshot comparison: P1 issues = 0
+
+---
+
+## Notes
+
+{{NOTES}}

package/skills/vibe-figma-analyze/rubrics/analysis-dimensions.md

@@ -0,0 +1,53 @@
+# Analysis Dimensions — Figma Design Analysis
+
+> This skill is merged into vibe-figma (Phase 1: Storyboard). These dimensions guide what to extract and evaluate when reading Figma frames.
+
+## Layout
+
+- [ ] Overall page structure — single column, multi-column, grid, or free-form absolute
+- [ ] Section boundaries — identify where each distinct section starts/ends by visual grouping
+- [ ] Container width — fixed px vs fluid (100%)
+- [ ] Alignment system — centered, left-aligned, or asymmetric
+- [ ] Z-layering — how many stacked layers exist (BG/content/overlay count)
+- [ ] Overflow behavior — clip, hidden, visible, scroll
+
+## Spacing Consistency
+
+- [ ] Gap between sections — does a single spacing value repeat, or is each unique?
+- [ ] Internal component padding — consistent across card variants?
+- [ ] Icon-to-text gap — uniform within a component family?
+- [ ] Recurring values — list values that appear 3+ times (these become spacing tokens)
+- [ ] Irregular values — flag one-off spacings that may indicate design inconsistency
+
+## Color Usage
+
+- [ ] Background palette — how many distinct background colors exist?
+- [ ] Text color roles — identify heading / body / label / disabled colors separately
+- [ ] Accent/brand colors — primary CTA color, hover state color
+- [ ] Transparency usage — rgba overlays, opacity layers
+- [ ] Blend modes present — `mix-blend-lighten`, `multiply`, `hue` flag a literal-mode section
+- [ ] Dark/light variants — does the design have both, requiring CSS variable tokens?
+
+## Typography Hierarchy
+
+- [ ] H1 equivalent — largest display text, font-size + weight + role
+- [ ] H2 / section heading — size, weight, color
+- [ ] Body text — base size, line-height, color
+- [ ] Caption / label text — smallest size, usage context
+- [ ] Font families — how many distinct families? Any variable fonts?
+- [ ] Responsive scaling — does font-size change across breakpoints?
+
+## Component Inventory
+
+- [ ] Repeating UI patterns — cards, list items, tabs (candidates for `v-for`)
+- [ ] State variants — default, hover, active, disabled, selected (note which states exist)
+- [ ] Shared components — GNB, Footer, Popup (already in project or needs creation?)
+- [ ] Interactive elements — buttons, links, inputs, toggles
+- [ ] Decorative elements — particles, background shapes, overlay effects
+
+## Storyboard-Specific Dimensions
+
+- [ ] Frame classification — SPEC, CONFIG, SHARED, PAGE (by name pattern)
+- [ ] Interaction annotations — arrows, overlay connections, state transitions in Figma
+- [ ] Section count — total PAGE frames that need components
+- [ ] Tall frames (1500px+) — flag for split strategy before `get_design_context`