anchi-kit 1.2.1 → 1.2.3

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

@@ -1,165 +0,0 @@
-# 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

@@ -1,80 +0,0 @@
-# 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

@@ -1,141 +0,0 @@
-# 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

@@ -1,118 +0,0 @@
-# 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
-```