@stella-studio/ck 1.0.0

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

@@ -0,0 +1,86 @@
+# Standard Workflow
+
+Full pipeline for moderate complexity issues.
+
+## Steps
+
+### Step 1: Debug & Investigate
+Activate `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
+
+**Output:** `✓ Step 1: Root cause - [summary], [N] files affected`
+
+### Step 2: Parallel Scout
+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.
+
+**Output:** `✓ Step 2: Scouted [N] areas - Found [M] related files`
+
+### Step 3: Implement Fix
+Fix the issue following debugging findings.
+
+- Apply `problem-solving` skill if stuck
+- Use `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")
+```
+
+**Output:** `✓ Step 3: Implemented - [N] files, verified (types/lint/build passed)`
+
+### Step 4: Test
+Use `tester` subagent to run tests.
+
+- Write new tests if needed
+- Run existing test suite
+- If fail → use `debugger`, fix, repeat
+
+**Output:** `✓ Step 4: Tests [X/X passed]`
+
+### Step 5: Review
+Use `code-reviewer` subagent.
+
+See `references/review-cycle.md` for mode-specific handling.
+
+**Output:** `✓ Step 5: Review [score]/10 - [status]`
+
+### Step 6: Finalize
+- Report summary to user
+- Ask to commit via `git-manager` subagent
+- Update docs if needed via `docs-manager`
+
+**Output:** `✓ Step 6: Complete - [action]`
+
+## Skills/Subagents Activated
+
+| Step | Skills/Subagents |
+|------|------------------|
+| 1 | `debug`, `debugger` subagent |
+| 2 | Multiple `Explore` subagents in parallel (optional) |
+| 3 | `problem-solving`, `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`, `chrome-devtools` or any relevant skills/tools to verify. 
+**Visual Assets:** Use `ai-multimodal` for visual assets generation, analysis and verification.

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

@@ -0,0 +1,36 @@
+# Test Failure Fix Workflow
+
+For fixing failing tests and test suite issues.
+
+## Workflow
+
+1. **Compile first** with `tester` agent
+   - Fix all syntax errors before running tests
+
+2. **Run tests** and collect failures
+
+3. **Debug** with `debugger` agent for root causes
+
+4. **Plan** fix with `planner` agent
+
+5. **Implement** fixes step by step
+
+6. **Re-test** with `tester` agent
+
+7. **Review** with `code-reviewer` agent
+
+8. **Iterate** if tests still fail, repeat from step 2
+
+## 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/.claude/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/.claude/skills/fix/references/workflow-ui.md

@@ -0,0 +1,37 @@
+# UI Fix Workflow
+
+For fixing visual/UI issues. Requires design skills.
+
+## Required Skills (activate in order)
+1. `ui-ux-pro-max` - Design database (ALWAYS FIRST)
+2. `ui-ux-pro-max` - Design principles
+3. `frontend-design` - Implementation patterns
+
+## Pre-fix Research
+```bash
+python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<product-type>" --domain product
+python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<style>" --domain style
+python3 .claude/skills/ui-ux-pro-max/scripts/search.py "accessibility" --domain ux
+```
+
+## Workflow
+
+1. **Analyze** screenshots/videos with `ai-multimodal` skill
+
+2. **Implement** fix with `ui-ux-designer` agent
+
+3. **Verify** with screenshot + `ai-multimodal` analysis
+   - Capture parent container, not whole page
+   - Compare to design guidelines
+   - Iterate until correct
+
+4. **DevTools check** with `chrome-devtools` skill
+
+5. **Test** compilation with `tester` agent
+
+6. **Document** updates to `./docs/design-guidelines.md` if needed
+
+## Tips
+- Read `./docs/design-guidelines.md` first
+- Use `ai-multimodal` for generating visual assets
+- Use `ImageMagick` for image editing

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

@@ -0,0 +1,78 @@
+---
+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` |
+| From scratch | Design Thinking below | - |
+
+**All workflows**: Activate `ui-ux-pro-max` skill FIRST for design intelligence.
+
+## Screenshot/Video Replication (Quick Reference)
+
+1. **Analyze** with `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 `ai-multimodal`, 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` |
+
+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/.claude/skills/frontend-design/references/ai-multimodal-overview.md

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

package/.claude/skills/frontend-design/references/analysis-best-practices.md

@@ -0,0 +1,80 @@
+# Analysis Best Practices
+
+Quality guidelines and common pitfalls.
+
+## Analysis Best Practices
+
+### 1. Be Specific
+❌ Generic: "Is this image good?"
+✓ Specific: "Does this align with brutalist aesthetic? Rate text overlay suitability."
+
+### 2. Use Structured Prompts
+Format analysis requests with numbered criteria for actionable feedback:
+```
+1. [Criterion A]
+2. [Criterion B]
+3. [Criterion C]
+Overall Rating: X/10
+```
+
+### 3. Request Hex Codes
+❌ Accept: "The image uses blue tones"
+✓ Demand: "Extract hex codes: #1E40AF, #3B82F6, #60A5FA"
+
+### 4. Compare Variations
+Never settle for the first generation without comparison:
+- Generate 3+ variations
+- Analyze comparatively
+- Select objectively based on scores
+
+### 5. Test Integration Context
+Analyze assets *with* UI elements overlaid, not in isolation:
+- Mock up text overlays
+- Test with actual buttons and CTAs
+- Evaluate in responsive contexts
+
+### 6. Document Decisions
+Save analysis reports for design system documentation:
+```
+docs/
+  assets/
+    hero-image.png
+    hero-analysis.md       # Analysis report
+    hero-color-palette.md  # Extracted colors
+  design-guidelines/
+    asset-usage.md         # Guidelines derived from analysis
+```
+
+## Common Analysis Pitfalls
+
+### ❌ Vague Feedback
+Analysis returns: "Colors are nice"
+**Fix**: Request specific hex codes and harmony evaluation
+
+### ❌ No Numeric Rating
+Analysis returns: "Pretty good quality"
+**Fix**: Always request 1-10 rating with justification
+
+### ❌ Missing Context
+Analyzing asset without specifying intended use
+**Fix**: Include context in prompt (hero section, background, marketing, etc.)
+
+### ❌ Single Analysis Point
+Only checking aesthetic, ignoring technical or integration concerns
+**Fix**: Use comprehensive evaluation template covering all dimensions
+
+## Evaluation Criteria
+
+### Core Evaluation Points
+- Visual coherence with chosen aesthetic direction
+- Color harmony and palette consistency
+- Composition balance and focal points
+- Typography compatibility (if text overlay needed)
+- Professional quality rating (1-10 scale)
+- Technical suitability (aspect ratio, resolution, file characteristics)
+
+### Context-Specific Points
+- **For hero sections**: Suitability for text overlay, visual hierarchy support
+- **For backgrounds**: Subtlety, pattern repetition quality, texture detail
+- **For marketing**: Brand alignment, emotional impact, attention-grabbing power
+- **For decorative elements**: Integration potential, visual weight, uniqueness

package/.claude/skills/frontend-design/references/analysis-prompts.md

@@ -0,0 +1,141 @@
+# Analysis Prompt Templates
+
+Complete prompt templates for visual analysis and verification.
+
+## Comprehensive Analysis Prompt
+
+```
+Analyze this design asset comprehensively:
+
+## Design Alignment
+- Aesthetic Direction: [e.g., brutalist/minimalist/maximalist]
+- Expected Style: [describe target aesthetic]
+- Color Palette Target: [list expected colors]
+
+## Evaluation Criteria
+1. Visual Coherence: Does it match the intended aesthetic direction?
+2. Color Analysis: List dominant colors (hex codes). Evaluate harmony and mood.
+3. Composition: Analyze balance, focal points, negative space, visual flow.
+4. Typography Compatibility: Rate suitability for overlaying text (consider contrast, busy areas).
+5. Professional Quality: Rate 1-10 with justification.
+6. Technical Assessment: Resolution quality, compression artifacts, aspect ratio correctness.
+
+## Specific Feedback
+- What works well?
+- What specific elements need improvement?
+- What would elevate this to 9/10 quality?
+
+## Overall Rating: X/10
+Provide final score with clear reasoning.
+```
+
+## Comparison Analysis Prompt
+
+```
+Compare these 3 design variations:
+
+For each image, evaluate:
+1. Aesthetic alignment with [design direction]
+2. Color effectiveness
+3. Composition strength
+4. Text overlay suitability
+5. Professional quality rating (1-10)
+
+Then provide:
+- Ranking: Best to worst with justification
+- Recommendation: Which to use and why
+- Hybrid suggestion: Best elements from each to combine
+```
+
+## Color Extraction Prompt
+
+```
+Extract the complete color palette from this image:
+
+1. Identify 5-8 dominant colors with hex codes
+2. Classify each: primary, accent, neutral, or background
+3. Suggest CSS variable names (e.g., --color-primary-500)
+4. Evaluate color accessibility (WCAG contrast ratios)
+5. Recommend which colors work for text, backgrounds, accents
+
+Provide as structured data for easy CSS implementation.
+```
+
+## Integration Testing Prompt
+
+```
+Analyze this design asset with UI elements overlaid:
+
+1. Text Readability: Can all text be read clearly?
+2. Contrast Issues: Identify any WCAG violations
+3. Visual Hierarchy: Do buttons and CTAs stand out?
+4. Spacing Problems: Any crowding or poor breathing room?
+5. Responsive Concerns: Will this work on mobile at 9:16?
+
+Provide specific recommendations for adjustments.
+```
+
+## A/B Testing Prompt
+
+```
+A/B test analysis:
+
+Design A: [minimalist approach]
+Design B: [maximalist approach]
+
+Compare for:
+1. User attention capture (first 3 seconds)
+2. Information hierarchy clarity
+3. Emotional impact and brand perception
+4. Conversion optimization potential
+5. Target audience alignment ([describe audience])
+
+Recommend which to A/B test in production and why.
+```
+
+## Quick Quality Check Template
+
+```
+Rate this asset 1-10 for:
+1. Aesthetic quality
+2. Color harmony
+3. Composition balance
+4. Professional polish
+
+Overall: X/10. Brief justification.
+```
+
+## Comprehensive Evaluation Template
+
+```
+Comprehensive design asset evaluation:
+
+## Aesthetic Alignment
+- Target style: [describe]
+- Actual style: [analyze]
+- Match quality: [1-10]
+
+## Technical Quality
+- Resolution: [assess]
+- Compression: [check artifacts]
+- Aspect ratio: [verify]
+
+## Color Analysis
+- Dominant colors: [list hex codes]
+- Harmony: [evaluate]
+- Mood: [describe]
+
+## Composition
+- Balance: [analyze]
+- Focal points: [identify]
+- Negative space: [evaluate]
+
+## Integration Readiness
+- Text overlay: [rate 1-10]
+- UI compatibility: [assess]
+- Responsive suitability: [evaluate]
+
+Overall Score: X/10
+Key Strengths: [list]
+Improvements Needed: [list]
+```