cokit-cli 1.2.7 → 1.4.0

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

@@ -0,0 +1,82 @@
+# 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 `ck-debug` skill. Activate `ck-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 `ck-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 `ck-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 | `ck-scout` (minimal) or direct file read |
+| 2 | `ck-debug`, `ck-sequential-thinking` |
+| 3 | Parallel `Bash` for verification |
+| 4 | `ck-code-reviewer` subagent |
+| 5 | `ck-git-manager` subagent |
+
+**Extra:** `ck-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/ck-fix/references/workflow-standard.md

@@ -0,0 +1,120 @@
+# 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 `ck-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 `ck-debug` skill. Use `ck-debugger` subagent if needed.
+3. Activate `ck-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 `ck-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 `ck-problem-solving` skill if stuck
+- Use `ck-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 `ck-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 `ck-docs-manager`
+- Ask to commit via `ck-git-manager` subagent
+- Run `/ck-journal`
+
+`TaskUpdate(T6, status="completed")`
+**Output:** `✓ Step 6: Complete - [action]`
+
+## Skills/Subagents Activated
+
+| Step | Skills/Subagents |
+|------|------------------|
+| 1 | `ck-scout` OR parallel `Explore` subagents |
+| 2 | `ck-debug`, `ck-sequential-thinking`, `ck-debugger` subagent, parallel `Explore`, (`ck-problem-solving` auto) |
+| 3 | `ck-problem-solving` (if stuck), `ck-sequential-thinking` (complex logic) |
+| 4 | `ck-tester` subagent, parallel `Bash` verification |
+| 5 | `ck-code-reviewer` subagent |
+| 6 | `project-management`, `ck-git-manager`, `ck-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/ck-fix/references/workflow-test.md

@@ -0,0 +1,75 @@
+# 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 `ck-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 `ck-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 `ck-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 `ck-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 `ck-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/ck-fix/references/workflow-ui.md

@@ -0,0 +1,72 @@
+# 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 `ck-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 `ck-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/ck-frontend-design/SKILL.md

@@ -0,0 +1,109 @@
+---
+name: ck-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 `ck-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/ck-frontend-design/references/ai-multimodal-overview.md

@@ -0,0 +1,165 @@
+# AI Multimodal Integration for Frontend Design
+
+Entry point for using the `ai-multimodal` (if available) skill to generate and analyze visual assets that align with frontend design thinking and aesthetic guidelines.
+
+## When to Use
+
+Use `ai-multimodal` (if available) in frontend design when you need to:
+
+**Asset Generation**:
+- Generate hero images, background assets, decorative elements
+- Create placeholder images with specific aesthetic qualities
+- Produce marketing visuals that match UI design language
+- Generate icon sets, illustrations, or graphic elements
+- Create texture overlays, gradient meshes, or background patterns
+- Prototype visual concepts before implementing in code
+
+**Visual Analysis**:
+- Analyze generated assets to verify they meet design standards
+- Compare multiple variations objectively with ratings
+- Extract exact color palettes with hex codes for implementation
+- Test assets with UI overlays for readability and contrast
+
+**Design Extraction**:
+- Extract design guidelines from existing images or videos
+- Analyze competitor designs to understand their approach
+- Reverse-engineer design systems from inspiration screenshots
+- Create documented guidelines based on visual analysis
+- Establish consistent aesthetic direction from references
+
+## Core Principles
+
+### 1. Design-Driven Generation
+**NEVER** generate generic AI imagery. Every asset must align with:
+- The chosen aesthetic direction (brutalism, maximalism, retro-futurism, etc.)
+- Typography system and visual hierarchy
+- Color palette and theme consistency
+- Overall design story and purpose
+
+### 2. Contextual Asset Creation
+Assets aren't standalone—they're part of a cohesive interface. Consider:
+- **Purpose**: Hero image vs. background texture vs. decorative element
+- **Integration**: How it interacts with overlaid text, buttons, forms
+- **Technical constraints**: File size, aspect ratio, responsive behavior
+- **Accessibility**: Color contrast, text readability, decorative vs. informative
+
+### 3. Analysis is Mandatory
+Never integrate assets without comprehensive analysis:
+- Score quality objectively (1-10 scale, minimum 7/10)
+- Extract specific values: hex codes, not "blue"; px sizes, not "large"
+- Compare multiple variations before deciding
+- Test with UI overlays, not in isolation
+
+### 4. Learn from Excellence
+Extract design systems systematically from high-quality references:
+- Analyze 3-5 screens to identify patterns
+- Document actionably with CSS variables and exact values
+- Validate predictions (fonts, colors) manually
+- Adapt principles contextually, don't copy blindly
+
+## Workflow Quick Reference
+
+### For Asset Generation
+**See**: `asset-generation.md`
+
+1. Define design context (aesthetic, colors, typography, tone)
+2. Craft design-driven prompts (not generic)
+3. Generate with appropriate Imagen 4 model
+4. Analyze and verify quality (score ≥ 7/10)
+5. Iterate or integrate based on results
+
+**Models**: imagen-4.0-generate-001 (standard), imagen-4.0-ultra-generate-001 (production), imagen-4.0-fast-generate-001 (iteration)
+
+### For Visual Analysis
+**See**: `visual-analysis.md`
+
+1. Define evaluation criteria (context-specific)
+2. Run comprehensive analysis with structured prompts
+3. Compare multiple variations objectively
+4. Extract color palettes with hex codes
+5. Test integration with UI elements
+
+**Model**: gemini-2.5-flash (vision understanding)
+
+### For Design Extraction
+**See**: `design-extraction.md`
+
+1. Capture high-quality reference screenshots
+2. Extract comprehensive design elements systematically
+3. Analyze multiple screens for consistent patterns
+4. Extract motion guidelines from videos (if applicable)
+5. Document actionably with CSS-ready specifications
+
+**Model**: gemini-2.5-flash (vision understanding)
+
+## Integration with Other Skills
+
+### With `aesthetic` Skill
+Use `aesthetic` for overall design system guidance and quality evaluation framework. Then use `frontend-design` with `ai-multimodal` (if available) for asset generation and analysis that follows those guidelines.
+
+### With `chrome-devtools` (if available) Skill
+Use `chrome-devtools` (if available) to capture full-screen screenshots from inspiration websites for design extraction. Capture at actual viewport size, not full-page scrolls.
+
+### With `ui-styling` Skill
+Generate and analyze assets first, then implement using shadcn/ui + Tailwind with colors/styles that complement the generated imagery.
+
+### With `web-frameworks` Skill
+Optimize generated assets for Next.js App Router: image optimization, responsive images, lazy loading.
+
+### With `media-processing` Skill
+Post-process generated assets: resize, compress, add filters, create compositions using FFmpeg/ImageMagick.
+
+## Navigation
+
+**Detailed Workflows**:
+- `asset-generation.md` - Complete generation workflow with prompt strategies
+- `visual-analysis.md` - Analysis and verification workflow
+- `design-extraction.md` - Extract guidelines from existing designs
+
+**Additional Resources**:
+- `technical-guide.md` - File optimization, examples, checklists, common pitfalls
+- `animejs.md` - Animation implementation for frontend
+
+## Quick Commands
+
+**Generate asset**:
+```bash
+python scripts/gemini_batch_process.py \
+  --task generate \
+  --prompt "[design-driven prompt]" \
+  --output docs/assets/[name] \
+  --model imagen-4.0-generate-001 \
+  --aspect-ratio 16:9
+```
+
+**Analyze asset**:
+```bash
+python scripts/gemini_batch_process.py \
+  --files docs/assets/[image].png \
+  --task analyze \
+  --prompt "[evaluation criteria]" \
+  --output docs/assets/analysis.md \
+  --model gemini-2.5-flash
+```
+
+**Extract design guidelines**:
+```bash
+python scripts/gemini_batch_process.py \
+  --files docs/inspiration/[reference].png \
+  --task analyze \
+  --prompt "[extraction criteria from design-extraction.md]" \
+  --output docs/design-guidelines/extracted.md \
+  --model gemini-2.5-flash
+```
+
+## Remember
+
+1. **Design First, Generate Second**: Start with design thinking, not generation capabilities
+2. **Context is King**: Every asset serves the interface, not itself
+3. **Iterate Ruthlessly**: First generation is rarely final—evaluate and refine
+4. **Analysis is Mandatory**: Never integrate without comprehensive verification (≥7/10)
+5. **Demand Specifics**: Hex codes not "blue", px not "large", ms not "fast"
+6. **Learn from Excellence**: Extract design systems from high-quality references systematically
+7. **Adapt, Don't Copy**: Understand principles, apply contextually to your unique design
+
+Generate assets that elevate frontend design, maintain aesthetic consistency, and serve user experience—never generic, always contextual.