@manhnv319/codexkit 0.1.0

package/.agents/skills/fix/references/workflow-logs.md

@@ -0,0 +1,72 @@
+# Log Analysis Fix Workflow
+
+For fixing issues from application logs. Uses native Claude Tasks for phase tracking.
+
+## Prerequisites
+- Log file at `./logs.txt` or similar
+
+## Setup (if logs missing)
+
+Add permanent log piping to project config:
+- **Bash/Unix**: `command 2>&1 | tee logs.txt`
+- **PowerShell**: `command *>&1 | Tee-Object logs.txt`
+
+## Task Setup (Before Starting)
+
+```
+T1 = TaskCreate(subject="Read & analyze logs",  activeForm="Analyzing logs")
+T2 = TaskCreate(subject="Scout codebase",        activeForm="Scouting codebase",    addBlockedBy=[T1])
+T3 = TaskCreate(subject="Plan fix",              activeForm="Planning fix",          addBlockedBy=[T1, T2])
+T4 = TaskCreate(subject="Implement fix",         activeForm="Implementing fix",      addBlockedBy=[T3])
+T5 = TaskCreate(subject="Test fix",              activeForm="Testing fix",           addBlockedBy=[T4])
+T6 = TaskCreate(subject="Code review",           activeForm="Reviewing code",        addBlockedBy=[T5])
+```
+
+## Workflow
+
+### Step 1: Read & Analyze Logs
+`TaskUpdate(T1, status="in_progress")`
+
+- Read logs with `Grep` (use `head_limit: 30` initially, increase if needed)
+- Use `debugger` agent for root cause analysis
+- Focus on last N lines first (most recent errors)
+- Look for stack traces, error codes, timestamps, repeated patterns
+
+`TaskUpdate(T1, status="completed")`
+
+### Step 2: Scout Codebase
+`TaskUpdate(T2, status="in_progress")`
+Use `ck:scout` agent or parallel `Explore` subagents to find issue locations.
+
+See `references/parallel-exploration.md` for patterns.
+
+`TaskUpdate(T2, status="completed")`
+
+### Step 3: Plan Fix
+`TaskUpdate(T3, status="in_progress")` — auto-unblocks when T1 + T2 complete.
+Use `planner` agent.
+
+`TaskUpdate(T3, status="completed")`
+
+### Step 4: Implement
+`TaskUpdate(T4, status="in_progress")`
+Implement the fix.
+
+`TaskUpdate(T4, status="completed")`
+
+### Step 5: Test
+`TaskUpdate(T5, status="in_progress")`
+Use `tester` agent. If issues remain → 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")`
+
+## Tips
+- Focus on last N lines first (most recent errors)
+- Look for stack traces, error codes, timestamps
+- Check for patterns/repeated errors

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

@@ -0,0 +1,59 @@
+# Quick Workflow
+
+Fast debug-fix-review cycle for simple issues.
+
+## Steps
+
+### Step 1: Debug
+Activate `ck:debug` skill. Find root cause quickly. Verify the root cause with multiple `Explore` subagents in parallel.
+- Read error message/logs
+- Locate affected file(s)
+- Identify exact fix needed
+
+**Output:** `✓ Step 1: Root cause - [brief description]`
+
+### Step 2: 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")
+```
+
+See `references/parallel-exploration.md` for patterns.
+
+**Output:** `✓ Step 2: Fixed - [N] files, verified (types/lint passed)`
+
+### Step 3: Verify
+Use `code_reviewer` subagent for quick review.
+
+Prompt: "Quick review of fix for [issue]. Check: correctness, security, no regressions. Score X/10."
+
+**Review handling:** See `references/review-cycle.md`
+
+**Output:** `✓ Step 3: Review [score]/10 - [status]`
+
+### Step 4: 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 4: Complete - [action]`
+
+## Skills/Subagents Activated
+
+- `ck:debug` - Always (Step 1)
+- Parallel `git_manager` - Verification (Step 2)
+- `code_reviewer` subagent - Always (Step 3)
+- `ck:context-engineering` - If dealing with AI/LLM code
+
+## Notes
+
+- Skip if review fails → escalate to Standard workflow
+- Total steps: 4 (vs 5-6 in Standard/Deep)
+- No planning phase needed

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

@@ -0,0 +1,111 @@
+# Standard Workflow
+
+Full pipeline for moderate complexity issues. Uses native Claude Tasks for phase tracking.
+
+## Task Setup (Before Starting)
+
+Create all phase tasks upfront with dependencies. See `references/task-orchestration.md`.
+
+```
+T1 = TaskCreate(subject="Debug & investigate",  activeForm="Debugging issue")
+T2 = TaskCreate(subject="Scout related code",   activeForm="Scouting codebase")
+T3 = TaskCreate(subject="Implement fix",        activeForm="Implementing fix",    addBlockedBy=[T1, T2])
+T4 = TaskCreate(subject="Run tests",            activeForm="Running tests",       addBlockedBy=[T3])
+T5 = TaskCreate(subject="Code review",          activeForm="Reviewing code",      addBlockedBy=[T4])
+T6 = TaskCreate(subject="Finalize",             activeForm="Finalizing",          addBlockedBy=[T5])
+```
+
+## Steps
+
+### Step 1: Debug & Investigate
+`TaskUpdate(T1, status="in_progress")`
+Activate `ck:debug` skill. Use `debugger` subagent if needed.
+
+- Read error messages, logs, stack traces
+- Reproduce the issue
+- Trace backward to root cause
+- Identify all affected files
+
+`TaskUpdate(T1, status="completed")`
+**Output:** `✓ Step 1: Root cause - [summary], [N] files affected`
+
+### Step 2: Parallel Scout
+`TaskUpdate(T2, status="in_progress")`
+Launch multiple `Explore` subagents in parallel to scout and verify the root cause.
+
+**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")
+```
+
+- Only if unclear which files need changes
+- Find patterns, similar implementations, dependencies
+
+See `references/parallel-exploration.md` for patterns.
+
+`TaskUpdate(T2, status="completed")`
+**Output:** `✓ Step 2: Scouted [N] areas - Found [M] related files`
+
+### Step 3: Implement Fix
+`TaskUpdate(T3, status="in_progress")` — auto-unblocked when T1 + T2 complete.
+Fix the issue following debugging findings.
+
+- Apply `ck:problem-solving` skill if stuck
+- Use `ck:sequential-thinking` for complex logic
+
+**After implementation - Parallel Verification:**
+Launch `Bash` agents in parallel to verify:
+```
+Task("Bash", "Run typecheck", "Verify types")
+Task("Bash", "Run lint", "Verify lint")
+Task("Bash", "Run build", "Verify build")
+```
+
+`TaskUpdate(T3, status="completed")`
+**Output:** `✓ Step 3: Implemented - [N] files, verified (types/lint/build passed)`
+
+### Step 4: Test
+`TaskUpdate(T4, status="in_progress")`
+Use `tester` subagent to run tests.
+
+- Write new tests if needed
+- Run existing test suite
+- If fail → use `debugger`, fix, repeat
+
+`TaskUpdate(T4, status="completed")`
+**Output:** `✓ Step 4: Tests [X/X passed]`
+
+### Step 5: 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 to user
+- Ask to commit via `git_manager` subagent
+- Update docs if needed via `docs_manager`
+
+`TaskUpdate(T6, status="completed")`
+**Output:** `✓ Step 6: Complete - [action]`
+
+## Skills/Subagents Activated
+
+| Step | Skills/Subagents |
+|------|------------------|
+| 1 | `ck:debug`, `debugger` subagent |
+| 2 | Multiple `Explore` subagents in parallel (optional) |
+| 3 | `ck:problem-solving`, `ck:sequential-thinking`, parallel `Bash` for verification |
+| 4 | `tester` subagent |
+| 5 | `code_reviewer` subagent |
+| 6 | `git_manager`, `docs_manager` subagents |
+
+**Rules:** Don't skip steps. Validate before proceeding. One phase at a time.
+**Frontend:** Use `chrome`, `ck:chrome-devtools` or any relevant skills/tools to verify.
+**Visual Assets:** Use `ck:ai-multimodal` for visual assets generation, analysis and verification.

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

@@ -0,0 +1,75 @@
+# Test Failure Fix Workflow
+
+For fixing failing tests and test suite issues. Uses native Claude 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/.agents/skills/fix/references/workflow-types.md

@@ -0,0 +1,33 @@
+# Type Error Fix Workflow
+
+Quick workflow for TypeScript/type errors.
+
+## Commands
+```bash
+bun run typecheck
+tsc --noEmit
+npx tsc --noEmit
+```
+
+## Rules
+- Fix ALL type errors, don't stop at first
+- **NEVER use `any` just to pass** - find proper types
+- Repeat until zero errors
+
+## Common Fixes
+- Missing type imports
+- Incorrect property access
+- Null/undefined handling
+- Generic type parameters
+- Union type narrowing
+
+## Workflow
+1. Run typecheck command
+2. Fix errors one by one
+3. Re-run typecheck
+4. Repeat until clean
+
+## Tips
+- Group related errors (same root cause)
+- Check `@types/*` packages for library types
+- Use `unknown` + type guards instead of `any`

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

@@ -0,0 +1,75 @@
+# UI Fix Workflow
+
+For fixing visual/UI issues. Requires design skills. Uses native Claude Tasks for phase tracking.
+
+## Required Skills (activate in order)
+1. `ck:ui-ux-pro-max` - Design database (ALWAYS FIRST)
+2. `ck:ui-ux-pro-max` - Design principles
+3. `ck:frontend-design` - Implementation patterns
+
+## Pre-fix Research
+```bash
+python3 .agents/skills/ui-ux-pro-max/scripts/search.py "<product-type>" --domain product
+python3 .agents/skills/ui-ux-pro-max/scripts/search.py "<style>" --domain style
+python3 .agents/skills/ui-ux-pro-max/scripts/search.py "accessibility" --domain ux
+```
+
+## 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 `ck:ai-multimodal` 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 + `ck:ai-multimodal` 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 `ck:chrome-devtools` 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 `ck:ai-multimodal` for generating visual assets
+- Use `ImageMagick` for image editing

package/.agents/skills/frontend-design/SKILL.md

@@ -0,0 +1,78 @@
+---
+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` |
+| From scratch | Design Thinking below | - |
+
+**All workflows**: Activate `ck:ui-ux-pro-max` skill FIRST for design intelligence.
+
+## Screenshot/Video Replication (Quick Reference)
+
+1. **Analyze** with `ck:ai-multimodal` 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 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 `ck:ai-multimodal`, process with `ck: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` |
+
+Quick start: `./references/ai-multimodal-overview.md`
+
+## Anti-Patterns (AI Slop)
+
+NEVER use:
+- Overused fonts: Inter, Roboto, Arial, Space Grotesk
+- Cliched colors: purple gradients on white
+- Predictable layouts, cookie-cutter patterns
+
+DO:
+- Vary themes (light/dark), fonts, aesthetics per project
+- Match complexity to vision (maximalist = elaborate; minimalist = precise)
+- Make unexpected, context-specific choices
+
+Remember: Claude is capable of extraordinary creative work. Commit fully to distinctive visions.

package/.agents/skills/frontend-design/references/ai-multimodal-overview.md

@@ -0,0 +1,165 @@
+# AI Multimodal Integration for Frontend Design
+
+Entry point for using the `ck:ai-multimodal` skill to generate and analyze visual assets that align with frontend design thinking and aesthetic guidelines.
+
+## When to Use
+
+Use `ck:ai-multimodal` 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 `ck:frontend-design` with `ck:ai-multimodal` for asset generation and analysis that follows those guidelines.
+
+### With `ck:chrome-devtools` Skill
+Use `ck:chrome-devtools` 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 `ck: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.