anchi-kit 1.1.2

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

@@ -0,0 +1,91 @@
+---
+name: frontend-design
+description: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications, OR when they provide screenshots/images/designs to replicate or draw inspiration from. For screenshot inputs, extracts design guidelines first using ai-multimodal analysis, then implements code following those guidelines. Generates creative, polished code that avoids generic AI aesthetics.
+license: Complete terms in LICENSE.txt
+---
+
+This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.
+
+The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.
+
+## Input Types & Workflows
+
+### When User Provides Screenshot/Image/Design Reference
+
+**MANDATORY workflow for screenshot/image/design inputs**:
+
+1. **Extract Design Guidelines** using `./references/design-extraction-overview.md`:
+   - Analyze screenshot/image with ai-multimodal skill
+   - Extract: colors (hex codes), typography (fonts, sizes, weights), spacing scale, layout patterns, visual hierarchy
+   - Document findings in project `docs/design-guidelines/extracted-design.md`
+   - See `./references/extraction-prompts.md` for comprehensive analysis prompts
+
+2. **Implement Code** following extracted guidelines:
+   - Use exact colors from extraction (hex codes)
+   - Match typography specifications (fonts, sizes, weights, line-heights)
+   - Replicate layout structure and spacing system
+   - Maintain visual hierarchy and component patterns
+   - Preserve aesthetic direction and mood
+
+3. **Verify Quality** using `./references/visual-analysis-overview.md`:
+   - Compare implementation to original screenshot
+   - Check color accuracy, spacing consistency, typography matching
+   - Ensure all design elements preserved
+
+**Important**: Do NOT skip to implementation. Extract design guidelines FIRST, then code.
+
+### When Building from Scratch (No Screenshot Provided)
+
+Follow "Design Thinking" process below to create original design.
+
+## Design Thinking
+
+Before coding, understand the context and 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**: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.
+
+Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:
+- Production-grade and functional
+- Visually striking and memorable
+- Cohesive with a clear aesthetic point-of-view
+- Meticulously refined in every detail
+
+## Frontend Aesthetics Guidelines
+
+Focus on:
+- **Typography**: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics; unexpected, characterful font choices. Pair a distinctive display font with a refined body font.
+- **Color & Theme**: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
+- **Motion**: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available (Use `anime.js` for animations: `./references/animejs.md`). Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.
+- **Spatial Composition**: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
+- **Backgrounds & Visual Details**: Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.
+- **Visual Assets**: Use `ai-multimodal` skills to generate the assets and `media-processing` skill to remove the background of generated assets if needed
+
+## Working with Visual Assets
+
+**Quick Start**: `./references/ai-multimodal-overview.md`
+
+### Generating New Visual Assets
+When you need to GENERATE new hero images, backgrounds, textures, or decorative elements that match the design aesthetic, use the `ai-multimodal` skill. This ensures generated assets align with the design thinking and aesthetics guidelines rather than producing generic imagery.
+
+### Analyzing Provided Screenshots/Images/Designs
+When user provides screenshots, photos, or design references to analyze or replicate, use `./references/design-extraction-overview.md` to extract design guidelines BEFORE implementation. This is MANDATORY for screenshot inputs (see "Input Types & Workflows" above).
+
+**Workflows**:
+- `./references/asset-generation.md` - Generate design-aligned visual assets
+- `./references/visual-analysis-overview.md` - Analyze and verify asset quality (modular)
+- `./references/design-extraction-overview.md` - Extract guidelines from inspiration (modular)
+- `./references/technical-overview.md` - Optimization and best practices (modular)
+
+Each overview references detailed sub-modules for progressive disclosure.
+
+NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts and component patterns, and cookie-cutter design that lacks context-specific character.
+
+Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations.
+
+**IMPORTANT**: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.
+
+Remember: Claude is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision.

package/.cursor/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/.cursor/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/.cursor/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]
+```

package/.cursor/skills/frontend-design/references/analysis-techniques.md

@@ -0,0 +1,118 @@
+# Advanced Analysis Techniques
+
+Advanced strategies for visual analysis and testing.
+
+## Batch Analysis for Rapid Iteration
+
+Analyze multiple generations simultaneously:
+
+```bash
+# Generate 3 variations with fast model
+for i in {1..3}; do
+  python scripts/gemini_batch_process.py \
+    --task generate \
+    --prompt "[prompt with variation-$i twist]" \
+    --output docs/assets/var-$i \
+    --model imagen-4.0-fast-generate-001 \
+    --aspect-ratio 16:9
+done
+
+# Batch analyze all variations
+python scripts/gemini_batch_process.py \
+  --files docs/assets/var-*.png \
+  --task analyze \
+  --prompt "Rank these variations 1-3 with scores. Identify winner." \
+  --output docs/assets/batch-analysis.md \
+  --model gemini-2.5-flash
+```
+
+## Contextual Testing
+
+Test assets in actual UI context:
+
+1. **Mock up UI overlay** (use design tool or code)
+2. **Capture screenshot** of asset with real UI elements
+3. **Analyze integrated version** for readability, hierarchy, contrast
+
+```bash
+# After creating mockup with UI overlay
+python scripts/gemini_batch_process.py \
+  --files docs/assets/hero-mockup-with-ui.png \
+  --task analyze \
+  --prompt "Evaluate this hero section with actual UI:
+1. Headline readability over image
+2. CTA button visibility and contrast
+3. Navigation bar integration
+4. Overall visual hierarchy effectiveness
+Provide WCAG contrast ratio estimates." \
+  --output docs/assets/ui-integration-test.md \
+  --model gemini-2.5-flash
+```
+
+## A/B Testing Analysis
+
+Compare design directions objectively:
+
+```bash
+python scripts/gemini_batch_process.py \
+  --files docs/assets/design-a.png docs/assets/design-b.png \
+  --task analyze \
+  --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." \
+  --output docs/assets/ab-test-analysis.md \
+  --model gemini-2.5-flash
+```
+
+## Iteration Strategy
+
+When score < 6/10:
+
+1. **Identify top 3 weaknesses** from analysis
+2. **Address each in refined prompt**
+3. **Regenerate with fast model** first
+4. **Re-analyze before committing** to standard model
+5. **Iterate until score ≥ 7/10**
+
+Example:
+```bash
+# First attempt scores 5/10 - "colors too muted, composition unbalanced"
+
+# Refine prompt addressing specific issues
+python scripts/gemini_batch_process.py \
+  --task generate \
+  --prompt "[original prompt] + vibrant saturated colors, dynamic diagonal composition" \
+  --output docs/assets/hero-v2 \
+  --model imagen-4.0-fast-generate-001
+
+# Re-analyze
+python scripts/gemini_batch_process.py \
+  --files docs/assets/hero-v2.png \
+  --task analyze \
+  --prompt "[same evaluation criteria]" \
+  --output docs/assets/analysis-v2.md
+```
+
+## Documentation Strategy
+
+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
+```