cokit-cli 1.3.0 → 1.4.0

package/skills/fix/references/workflow-quick.md

@@ -1,82 +0,0 @@
-# Quick Workflow
-
-Fast scout-diagnose-fix-verify cycle for simple issues.
-
-## Steps
-
-### Step 1: Scout (Minimal)
-Locate affected file(s) and their direct dependencies only.
-- Read error message → identify file path
-- Check direct imports/dependencies of affected file
-- Skip full codebase mapping
-
-**Output:** `✓ Step 1: Scouted - [file], [N] direct deps`
-
-### Step 2: Diagnose (Abbreviated)
-Activate `debug` skill. Activate `sequential-thinking` for structured analysis.
-
-- Read error message/logs
-- **Capture pre-fix state:** Record exact error output (this is your verification baseline)
-- Identify root cause (usually obvious for simple issues)
-- Skip parallel hypothesis testing for trivial cases
-
-**Output:** `✓ Step 2: Diagnosed - Root cause: [brief description]`
-
-### Step 3: Fix & Verify
-Implement the fix directly.
-- Make minimal changes
-- Follow existing patterns
-
-**Parallel Verification:**
-Launch `Bash` agents in parallel:
-```
-Task("Bash", "Run typecheck", "Verify types")
-Task("Bash", "Run lint", "Verify lint")
-```
-
-**Before/After comparison:** Re-run the EXACT command from pre-fix state capture. Compare output.
-
-See `references/parallel-exploration.md` for patterns.
-
-**Output:** `✓ Step 3: Fixed - [N] files, verified (types/lint passed)`
-
-### Step 4: Review + Prevent
-Use `code-reviewer` subagent for quick review.
-
-Prompt: "Quick review of fix for [issue]. Check: correctness, security, no regressions. Score X/10."
-
-**Prevention (abbreviated for Quick):**
-- Type errors/lint: type system IS the test → regression test optional
-- Bug fixes: add at least 1 test covering the fixed scenario
-- Still require before/after comparison of verification output
-
-**Review handling:** See `references/review-cycle.md`
-
-**Output:** `✓ Step 4: Review [score]/10 - [prevention measures]`
-
-### Step 5: Complete
-Report summary to user.
-
-**If autonomous mode:** Ask to commit via `git-manager` subagent if score >= 9.0
-**If HITL mode:** Ask user next action
-
-**Output:** `✓ Step 5: Complete - [action]`
-
-## Skills/Subagents Activated
-
-| Step | Skills/Subagents |
-|------|------------------|
-| 1 | `scout` (minimal) or direct file read |
-| 2 | `debug`, `sequential-thinking` |
-| 3 | Parallel `Bash` for verification |
-| 4 | `code-reviewer` subagent |
-| 5 | `git-manager` subagent |
-
-**Extra:** `context-engineering` if dealing with AI/LLM code
-
-## Notes
-
-- Skip if review fails → escalate to Standard workflow
-- Total steps: 5
-- No planning phase needed
-- Pre-fix state capture is STILL mandatory (even for quick fixes)

package/skills/fix/references/workflow-standard.md

@@ -1,120 +0,0 @@
-# Standard Workflow
-
-Full pipeline for moderate complexity issues. Uses native Tasks for phase tracking.
-
-## Task Setup (Before Starting)
-
-Create all phase tasks upfront with dependencies. See `references/task-orchestration.md`.
-
-```
-T1 = TaskCreate(subject="Scout codebase",        activeForm="Scouting codebase")
-T2 = TaskCreate(subject="Diagnose root cause",    activeForm="Diagnosing root cause")
-T3 = TaskCreate(subject="Implement fix",          activeForm="Implementing fix",    addBlockedBy=[T1, T2])
-T4 = TaskCreate(subject="Verify + prevent",       activeForm="Verifying fix",       addBlockedBy=[T3])
-T5 = TaskCreate(subject="Code review",            activeForm="Reviewing code",      addBlockedBy=[T4])
-T6 = TaskCreate(subject="Finalize",               activeForm="Finalizing",          addBlockedBy=[T5])
-```
-
-## Steps
-
-### Step 1: Scout Codebase
-`TaskUpdate(T1, status="in_progress")`
-
-**Mandatory skill chain:**
-1. Activate `scout` skill OR launch 2-3 parallel `Explore` subagents.
-2. Map: affected files, module boundaries, dependencies, related tests, recent git changes.
-
-**Pattern:** In SINGLE message, launch 2-3 Explore agents:
-```
-Task("Explore", "Find [area1] files related to issue", "Scout area1")
-Task("Explore", "Find [area2] patterns/usage", "Scout area2")
-Task("Explore", "Find [area3] tests/dependencies", "Scout area3")
-```
-
-See `references/parallel-exploration.md` for patterns.
-
-`TaskUpdate(T1, status="completed")`
-**Output:** `✓ Step 1: Scouted [N] areas - [M] files, [K] tests found`
-
-### Step 2: Diagnose Root Cause
-`TaskUpdate(T2, status="in_progress")`
-
-**Mandatory skill chain:**
-1. **Capture pre-fix state:** Record exact error messages, failing test output, stack traces.
-2. Activate `debug` skill. Use `debugger` subagent if needed.
-3. Activate `sequential-thinking` — form hypotheses through structured reasoning.
-4. Spawn parallel `Explore` subagents to test hypotheses against codebase evidence.
-5. If 2+ hypotheses fail → auto-activate `problem-solving`.
-6. Trace backward to root cause (not just symptom location).
-
-See `references/diagnosis-protocol.md` for full methodology.
-
-`TaskUpdate(T2, status="completed")`
-**Output:** `✓ Step 2: Diagnosed - Root cause: [summary], Evidence: [brief], Scope: [N files]`
-
-### Step 3: Implement Fix
-`TaskUpdate(T3, status="in_progress")` — auto-unblocked when T1 + T2 complete.
-
-Fix the ROOT CAUSE per diagnosis findings. Not symptoms.
-
-- Apply `problem-solving` skill if stuck
-- Use `sequential-thinking` for complex logic
-- Minimal changes. Follow existing patterns.
-
-`TaskUpdate(T3, status="completed")`
-**Output:** `✓ Step 3: Implemented - [N] files changed`
-
-### Step 4: Verify + Prevent
-`TaskUpdate(T4, status="in_progress")`
-
-**Mandatory skill chain:**
-1. **Iron-law verify:** Re-run the EXACT commands from pre-fix state capture. Compare before/after.
-2. **Regression test:** Add/update test(s) covering the fixed issue. Test MUST fail without fix, pass with fix.
-3. **Defense-in-depth:** Apply prevention layers where applicable (see `references/prevention-gate.md`).
-4. **Parallel verification:** Launch `Bash` agents:
-```
-Task("Bash", "Run typecheck", "Verify types")
-Task("Bash", "Run lint", "Verify lint")
-Task("Bash", "Run build", "Verify build")
-Task("Bash", "Run tests", "Verify tests")
-```
-
-**If verification fails:** Loop back to Step 2 (re-diagnose). Max 3 attempts.
-
-`TaskUpdate(T4, status="completed")`
-**Output:** `✓ Step 4: Verified + Prevented - [before/after], [N] tests added, [M] guards`
-
-### Step 5: Code Review
-`TaskUpdate(T5, status="in_progress")`
-Use `code-reviewer` subagent.
-
-See `references/review-cycle.md` for mode-specific handling.
-
-`TaskUpdate(T5, status="completed")`
-**Output:** `✓ Step 5: Review [score]/10 - [status]`
-
-### Step 6: Finalize
-`TaskUpdate(T6, status="in_progress")`
-- Report summary: root cause, changes, prevention measures, confidence score
-- Activate `project-management` for task sync-back and plan status updates
-- Update docs if needed via `docs-manager`
-- Ask to commit via `git-manager` subagent
-- Run `/ck-journal`
-
-`TaskUpdate(T6, status="completed")`
-**Output:** `✓ Step 6: Complete - [action]`
-
-## Skills/Subagents Activated
-
-| Step | Skills/Subagents |
-|------|------------------|
-| 1 | `scout` OR parallel `Explore` subagents |
-| 2 | `debug`, `sequential-thinking`, `debugger` subagent, parallel `Explore`, (`problem-solving` auto) |
-| 3 | `problem-solving` (if stuck), `sequential-thinking` (complex logic) |
-| 4 | `tester` subagent, parallel `Bash` verification |
-| 5 | `code-reviewer` subagent |
-| 6 | `project-management`, `git-manager`, `docs-manager` subagents |
-
-**Rules:** Don't skip steps. Validate before proceeding. One phase at a time.
-**Frontend:** Use `chrome`, `chrome-devtools` (if available) or any relevant skills/tools to verify.
-**Visual Assets:** Use `ai-multimodal` (if available) for visual assets generation, analysis and verification.

package/skills/fix/references/workflow-test.md

@@ -1,75 +0,0 @@
-# Test Failure Fix Workflow
-
-For fixing failing tests and test suite issues. Uses native Tasks for phase tracking.
-
-## Task Setup (Before Starting)
-
-```
-T1 = TaskCreate(subject="Compile & collect failures", activeForm="Compiling and collecting failures")
-T2 = TaskCreate(subject="Debug root causes",          activeForm="Debugging test failures",       addBlockedBy=[T1])
-T3 = TaskCreate(subject="Plan fixes",                 activeForm="Planning fixes",                addBlockedBy=[T2])
-T4 = TaskCreate(subject="Implement fixes",             activeForm="Implementing fixes",            addBlockedBy=[T3])
-T5 = TaskCreate(subject="Re-test",                     activeForm="Re-running tests",              addBlockedBy=[T4])
-T6 = TaskCreate(subject="Code review",                 activeForm="Reviewing code",                addBlockedBy=[T5])
-```
-
-## Workflow
-
-### Step 1: Compile & Collect Failures
-`TaskUpdate(T1, status="in_progress")`
-Use `tester` agent. Fix all syntax errors before running tests.
-
-- Run full test suite, collect all failures
-- Group failures by module/area
-
-`TaskUpdate(T1, status="completed")`
-
-### Step 2: Debug
-`TaskUpdate(T2, status="in_progress")`
-Use `debugger` agent for root cause analysis.
-
-- Analyze each failure group
-- Identify shared root causes across failures
-
-`TaskUpdate(T2, status="completed")`
-
-### Step 3: Plan
-`TaskUpdate(T3, status="in_progress")`
-Use `planner` agent for fix strategy.
-
-- Prioritize fixes (shared root causes first)
-- Identify dependencies between fixes
-
-`TaskUpdate(T3, status="completed")`
-
-### Step 4: Implement
-`TaskUpdate(T4, status="in_progress")`
-Implement fixes step by step per plan.
-
-`TaskUpdate(T4, status="completed")`
-
-### Step 5: Re-test
-`TaskUpdate(T5, status="in_progress")`
-Use `tester` agent. If tests still fail → keep T5 `in_progress`, loop back to Step 2.
-
-`TaskUpdate(T5, status="completed")`
-
-### Step 6: Review
-`TaskUpdate(T6, status="in_progress")`
-Use `code-reviewer` agent.
-
-`TaskUpdate(T6, status="completed")`
-
-## Common Commands
-```bash
-npm test
-bun test
-pytest
-go test ./...
-```
-
-## Tips
-- Run single failing test first for faster iteration
-- Check test assertions vs actual behavior
-- Verify test fixtures/mocks are correct
-- Don't modify tests to pass unless test is wrong

package/skills/fix/references/workflow-ui.md

@@ -1,72 +0,0 @@
-# UI Fix Workflow
-
-For fixing visual/UI issues. Requires design skills. Uses native Tasks for phase tracking.
-
-## Required Skills (activate in order)
-1. `ui-ux-pro-max` (if available) - Design database (ALWAYS FIRST)
-2. `ui-ux-pro-max` (if available) - Design principles
-3. `frontend-design` - Implementation patterns
-
-## Pre-fix Research
-```bash
-```
-
-## Task Setup (Before Starting)
-
-```
-T1 = TaskCreate(subject="Analyze visual issue",    activeForm="Analyzing visual issue")
-T2 = TaskCreate(subject="Implement UI fix",         activeForm="Implementing UI fix",       addBlockedBy=[T1])
-T3 = TaskCreate(subject="Verify visually",          activeForm="Verifying visually",         addBlockedBy=[T2])
-T4 = TaskCreate(subject="DevTools check",           activeForm="Checking with DevTools",     addBlockedBy=[T3])
-T5 = TaskCreate(subject="Test compilation",         activeForm="Testing compilation",        addBlockedBy=[T4])
-T6 = TaskCreate(subject="Update design docs",       activeForm="Updating design docs",       addBlockedBy=[T5])
-```
-
-## Workflow
-
-### Step 1: Analyze
-`TaskUpdate(T1, status="in_progress")`
-Analyze screenshots/videos with `ai-multimodal` (if available) skill.
-
-- Read `./docs/design-guidelines.md` first
-- Identify exact visual discrepancy
-
-`TaskUpdate(T1, status="completed")`
-
-### Step 2: Implement
-`TaskUpdate(T2, status="in_progress")`
-Use `ui-ux-designer` agent.
-
-`TaskUpdate(T2, status="completed")`
-
-### Step 3: Verify Visually
-`TaskUpdate(T3, status="in_progress")`
-Screenshot + `ai-multimodal` (if available) analysis.
-
-- Capture parent container, not whole page
-- Compare to design guidelines
-- If incorrect → keep T3 `in_progress`, loop back to Step 2
-
-`TaskUpdate(T3, status="completed")`
-
-### Step 4: DevTools Check
-`TaskUpdate(T4, status="in_progress")`
-Use `chrome-devtools` (if available) skill.
-
-`TaskUpdate(T4, status="completed")`
-
-### Step 5: Test
-`TaskUpdate(T5, status="in_progress")`
-Use `tester` agent for compilation check.
-
-`TaskUpdate(T5, status="completed")`
-
-### Step 6: Document
-`TaskUpdate(T6, status="in_progress")`
-Update `./docs/design-guidelines.md` if needed.
-
-`TaskUpdate(T6, status="completed")`
-
-## Tips
-- Use `ai-multimodal` (if available) for generating visual assets
-- Use `ImageMagick` for image editing

package/skills/frontend-design/SKILL.md

@@ -1,109 +0,0 @@
----
-name: frontend-design
-description: Create polished frontend interfaces from designs/screenshots/videos. Use for web components, 3D experiences, replicating UI designs, quick prototypes, immersive interfaces, avoiding AI slop.
-license: Complete terms in LICENSE.txt
----
-
-Create distinctive, production-grade frontend interfaces. Implement real working code with exceptional aesthetic attention.
-
-## Workflow Selection
-
-Choose workflow based on input type:
-
-| Input | Workflow | Reference |
-|-------|----------|-----------|
-| Screenshot | Replicate exactly | `./references/workflow-screenshot.md` |
-| Video | Replicate with animations | `./references/workflow-video.md` |
-| Screenshot/Video (describe only) | Document for devs | `./references/workflow-describe.md` |
-| 3D/WebGL request | Three.js immersive | `./references/workflow-3d.md` |
-| Quick task | Rapid implementation | `./references/workflow-quick.md` |
-| Complex/award-quality | Full immersive | `./references/workflow-immersive.md` |
-| Existing project upgrade | Redesign Audit | `./references/redesign-audit-checklist.md` |
-| From scratch | Design Thinking below | - |
-
-**All workflows**: Activate `ui-ux-pro-max` skill (if available) FIRST for design intelligence.
-
-**Precedence:** When anti-slop rules (below) conflict with `ui-ux-pro-max` (if available) recommendations (e.g., Inter font, AI Purple palette, Lucide-only icons), substitute with alternatives from `./references/anti-slop-rules.md` unless the user explicitly requested the conflicting choice.
-
-## Screenshot/Video Replication (Quick Reference)
-
-1. **Analyze** with `ai-multimodal` (if available) skill - extract colors, fonts, spacing, effects
-2. **Plan** with `ui-ux-designer` subagent - create phased implementation
-3. **Implement** - match source precisely
-4. **Verify** - compare to original
-5. **Document** - update `./docs/design-guidelines.md` if approved
-
-See specific workflow files for detailed steps.
-
-## Design Dials
-
-Three configurable parameters that drive design decisions. Set defaults at session start or let user override via chat:
-
-| Dial | Default | Range | Low (1-3) | High (8-10) |
-|------|---------|-------|-----------|-------------|
-| `DESIGN_VARIANCE` | 8 | 1-10 | Perfect symmetry, centered layouts, equal grids | Asymmetric, masonry, massive empty zones, fractional CSS Grid |
-| `MOTION_INTENSITY` | 6 | 1-10 | CSS hover/active states only | Framer Motion scroll reveals, spring physics, perpetual micro-animations |
-| `VISUAL_DENSITY` | 4 | 1-10 | Art gallery — huge whitespace, expensive/clean | Cockpit — tiny paddings, 1px dividers, monospace numbers everywhere |
-
-**Usage:** These values drive specific rules. At `DESIGN_VARIANCE > 4`, centered heroes are overused — force split-screen or left-aligned layouts. At `MOTION_INTENSITY > 5`, embed perpetual micro-animations. At `VISUAL_DENSITY > 7`, remove generic cards and use spacing/dividers.
-
-See `./references/bento-motion-engine.md` for dial-driven SaaS dashboard implementation.
-
-## Design Thinking (From Scratch)
-
-Before coding, commit to a BOLD aesthetic direction:
-- **Purpose**: What problem does this interface solve? Who uses it?
-- **Tone**: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.
-- **Constraints**: Technical requirements (framework, performance, accessibility).
-- **Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember?
-
-**CRITICAL**: Execute with precision. Bold maximalism and refined minimalism both work - intentionality is key.
-
-## Aesthetics Guidelines
-
-- **Typography**: Avoid Arial/Inter; use distinctive, characterful fonts. Pair display + body fonts.
-- **Color**: Commit to cohesive palette. CSS variables. Dominant colors with sharp accents.
-- **Motion**: CSS-first, anime.js for complex (`./references/animejs.md`). Orchestrated page loads > scattered micro-interactions.
-- **Spatial**: Unexpected layouts. Asymmetry. Overlap. Negative space OR controlled density.
-- **Backgrounds**: Atmosphere over solid colors. Gradients, noise, patterns, shadows, grain.
-- **Assets**: Generate with `ai-multimodal` (if available), process with `media-processing`
-
-## Asset & Analysis References
-
-| Task | Reference |
-|------|-----------|
-| Generate assets | `./references/asset-generation.md` |
-| Analyze quality | `./references/visual-analysis-overview.md` |
-| Extract guidelines | `./references/design-extraction-overview.md` |
-| Optimization | `./references/technical-overview.md` |
-| Animations | `./references/animejs.md` |
-| Magic UI (80+ components) | `./references/magicui-components.md` |
-| Anti-slop forbidden patterns | `./references/anti-slop-rules.md` |
-| Redesign audit checklist | `./references/redesign-audit-checklist.md` |
-| Premium design patterns | `./references/premium-design-patterns.md` |
-| Performance guardrails | `./references/performance-guardrails.md` |
-| Bento motion engine (SaaS) | `./references/bento-motion-engine.md` |
-
-Quick start: `./references/ai-multimodal-overview.md`
-
-## Anti-Patterns (AI Slop)
-
-Strongly prefer alternatives to these LLM defaults. Full rules: `./references/anti-slop-rules.md`
-
-**Typography** — Avoid Inter/Roboto/Arial. Prefer: `Geist`, `Outfit`, `Cabinet Grotesk`, `Satoshi`
-
-**Color** — Avoid AI purple/blue gradient aesthetic, pure `#000000`, oversaturated accents. Use neutral bases with a single considered accent.
-
-**Layout** — Avoid 3-column equal card feature rows, centered heroes at high variance, `h-screen`. Use asymmetric grids, split-screen, `min-h-[100dvh]`.
-
-**Content** — Avoid "John Doe", "Acme Corp", round numbers, AI copy clichés ("Elevate", "Seamless", "Unleash"). Use realistic names, organic data, plain specific language.
-
-**Effects** — Avoid neon/outer glows, custom cursors, gradient text on headers. Use tinted inner shadows, spring physics.
-
-**Components** — Avoid default unstyled shadcn, Lucide-only icons, generic card-border-shadow pattern at high density. Always customize, try Phosphor/Heroicons, use spacing over cards.
-
-**Quick check:** See the "AI Tells" checklist in `./references/anti-slop-rules.md` before delivering any design.
-
-**Performance:** Animation and blur rules in `./references/performance-guardrails.md`
-
-Remember: The AI is capable of extraordinary creative work. Commit fully to distinctive visions.

package/skills/frontend-design/references/workflow-3d.md

@@ -1,98 +0,0 @@
-# 3D Design Workflow
-
-Create immersive interactive 3D designs with Three.js.
-
-## Prerequisites
-- Activate `ui-ux-pro-max` skill (if available) first
-- Activate `threejs` skill for 3D and WebGL expertise
-- Have `ai-multimodal` (if available) skill ready for asset generation
-
-## Initial Research
-```bash
-```
-
-## Workflow Steps
-
-### 1. Create Implementation Plan
-Use `ui-ux-designer` + `researcher` subagents:
-- Create plan directory (use `## Naming` pattern)
-- Write `plan.md` (<80 lines overview)
-- Add `phase-XX-name.md` files
-- Keep research reports under 150 lines
-
-### 2. Implement with Three.js
-Use `ui-ux-designer` subagent to build:
-- Three.js scene setup
-- Custom GLSL shaders
-- GPU particle systems
-- Cinematic camera controls
-- Post-processing effects
-- Interactive elements
-
-### 3. Generate 3D Assets
-Use `ai-multimodal` (if available) skill for:
-- Textures and materials
-- Skyboxes and environment maps
-- Particle sprites
-- Video backgrounds
-
-Use `media-processing` skill for:
-- Texture optimization for WebGL
-- Normal/height map generation
-- Sprite sheet creation
-- Background removal
-- Asset optimization
-
-### 4. Verify & Report
-- Test across devices
-- Optimize for 60fps
-- Report to user
-- Request approval
-
-### 5. Document
-Update `./docs/design-guidelines.md` with:
-- 3D design patterns
-- Shader libraries
-- Reusable components
-
-## Technical Requirements
-
-### Three.js Implementation
-- Proper scene optimization
-- Efficient draw calls
-- LOD (Level of Detail) where needed
-- Responsive canvas behavior
-- Memory management
-
-### Shader Development
-- Custom vertex shaders
-- Custom fragment shaders
-- Uniform management
-- Performance optimization
-
-### Particle Systems
-- GPU-accelerated rendering
-- Efficient buffer geometry
-- Point sprite optimization
-
-### Post-Processing
-- Render pipeline setup
-- Effect composition
-- Performance budgeting
-
-## Implementation Stack
-- Three.js - 3D rendering
-- GLSL - Custom shaders
-- HTML/CSS/JS - UI integration
-- WebGL - GPU graphics
-
-## Performance Targets
-- 60fps minimum
-- < 100ms initial load
-- Responsive to viewport
-- Mobile-friendly fallbacks
-
-## Related
-- `animejs.md` - UI animation patterns
-- `technical-optimization.md` - Performance tips
-- `asset-generation.md` - Asset creation

package/skills/frontend-design/references/workflow-describe.md

@@ -1,87 +0,0 @@
-# Design Description Workflow
-
-Create detailed design documentation from screenshot/video for developer implementation.
-
-## Prerequisites
-- Activate `ui-ux-pro-max` skill (if available) first
-- Have `ai-multimodal` (if available) skill ready
-
-## Workflow Steps
-
-### 1. Comprehensive Visual Analysis
-Use `ai-multimodal` (if available) skill to describe exhaustively:
-
-**Layout & Structure**
-- Element positions (absolute coords or relative)
-- Container hierarchy
-- Grid/flexbox patterns
-- Responsive breakpoints visible
-
-**Visual Properties**
-- Design style and aesthetic trend
-- Every color with hex codes
-- Every border (width, style, radius)
-- Every icon (describe or identify)
-- Font names (predict Google Fonts), sizes, weights
-- Line heights, letter spacing
-
-**Spacing System**
-- Padding values
-- Margin values
-- Gap between elements
-- Section spacing
-
-**Visual Effects**
-- Shapes and geometry
-- Textures and materials
-- Lighting direction
-- Shadows (offset, blur, spread, color)
-- Reflections and refractions
-- Blur effects (backdrop, gaussian)
-- Glow effects
-- Background transparency
-- Image treatments
-
-**Interactions (if video)**
-- Animation sequences
-- Transition types and timing
-- Hover/focus states
-- Scroll behaviors
-
-**Font Prediction**: Match actual fonts, avoid Inter/Poppins defaults.
-
-### 2. Create Implementation Plan
-Use `ui-ux-designer` subagent:
-- Create plan directory (use `## Naming` pattern)
-- Write `plan.md` overview (<80 lines)
-- Add detailed `phase-XX-name.md` files
-
-### 3. Report to User
-Provide implementation-ready documentation:
-- Summary of design system
-- Component breakdown
-- Technical specifications
-- Suggested implementation approach
-
-## Output Format
-
-```markdown
-# Design Analysis: [Name]
-
-## Design System
-- **Style**: [aesthetic direction]
-- **Colors**: [palette with hex]
-- **Typography**: [fonts, sizes, weights]
-- **Spacing Scale**: [values]
-
-## Component Breakdown
-1. [Component] - [specs]
-2. [Component] - [specs]
-
-## Implementation Notes
-- [Technical considerations]
-```
-
-## Related
-- `extraction-prompts.md` - Detailed prompts
-- `extraction-output-templates.md` - Output formats