@trieungoctam/vibekit 1.0.0

package/skills/dev/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/skills/dev/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/skills/dev/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
+```