@trieungoctam/vibekit 1.0.0

package/skills/dev/devops/scripts/tests/test_docker_optimize.py

@@ -0,0 +1,436 @@
+"""
+Tests for docker-optimize.py
+
+Run with: pytest test_docker_optimize.py -v
+"""
+
+import pytest
+import json
+from pathlib import Path
+import sys
+
+# Add parent directory to path for imports
+sys.path.insert(0, str(Path(__file__).parent.parent))
+
+from docker_optimize import DockerfileAnalyzer
+
+
+@pytest.fixture
+def temp_dockerfile(tmp_path):
+    """Create temporary Dockerfile"""
+    dockerfile = tmp_path / "Dockerfile"
+    return dockerfile
+
+
+def write_dockerfile(filepath, content):
+    """Helper to write Dockerfile content"""
+    with open(filepath, 'w') as f:
+        f.write(content)
+
+
+class TestDockerfileAnalyzerInit:
+    """Test DockerfileAnalyzer initialization"""
+
+    def test_init(self, temp_dockerfile):
+        write_dockerfile(temp_dockerfile, "FROM node:20\n")
+        analyzer = DockerfileAnalyzer(temp_dockerfile)
+
+        assert analyzer.dockerfile_path == temp_dockerfile
+        assert analyzer.verbose is False
+        assert analyzer.lines == []
+        assert analyzer.issues == []
+        assert analyzer.suggestions == []
+
+
+class TestLoadDockerfile:
+    """Test Dockerfile loading"""
+
+    def test_load_success(self, temp_dockerfile):
+        content = "FROM node:20\nWORKDIR /app\n"
+        write_dockerfile(temp_dockerfile, content)
+
+        analyzer = DockerfileAnalyzer(temp_dockerfile)
+        result = analyzer.load_dockerfile()
+
+        assert result is True
+        assert len(analyzer.lines) == 2
+
+    def test_load_nonexistent(self, tmp_path):
+        analyzer = DockerfileAnalyzer(tmp_path / "nonexistent")
+
+        with pytest.raises(FileNotFoundError):
+            analyzer.load_dockerfile()
+
+
+class TestAnalyzeBaseImage:
+    """Test base image analysis"""
+
+    def test_latest_tag(self, temp_dockerfile):
+        write_dockerfile(temp_dockerfile, "FROM node:latest\n")
+        analyzer = DockerfileAnalyzer(temp_dockerfile)
+        analyzer.load_dockerfile()
+        analyzer.analyze_base_image()
+
+        assert len(analyzer.issues) == 1
+        assert analyzer.issues[0]['category'] == 'base_image'
+        assert 'latest' in analyzer.issues[0]['message']
+
+    def test_no_tag(self, temp_dockerfile):
+        write_dockerfile(temp_dockerfile, "FROM node\n")
+        analyzer = DockerfileAnalyzer(temp_dockerfile)
+        analyzer.load_dockerfile()
+        analyzer.analyze_base_image()
+
+        assert len(analyzer.issues) == 1
+        assert 'no tag' in analyzer.issues[0]['message']
+
+    def test_specific_tag(self, temp_dockerfile):
+        write_dockerfile(temp_dockerfile, "FROM node:20-alpine\n")
+        analyzer = DockerfileAnalyzer(temp_dockerfile)
+        analyzer.load_dockerfile()
+        analyzer.analyze_base_image()
+
+        # Should have no issues with specific tag
+        base_image_issues = [i for i in analyzer.issues if i['category'] == 'base_image']
+        assert len(base_image_issues) == 0
+
+    def test_non_alpine_suggestion(self, temp_dockerfile):
+        write_dockerfile(temp_dockerfile, "FROM node:20\n")
+        analyzer = DockerfileAnalyzer(temp_dockerfile)
+        analyzer.load_dockerfile()
+        analyzer.analyze_base_image()
+
+        assert len(analyzer.suggestions) >= 1
+        assert any('Alpine' in s['message'] for s in analyzer.suggestions)
+
+
+class TestAnalyzeMultiStage:
+    """Test multi-stage build analysis"""
+
+    def test_single_stage_with_build_tools(self, temp_dockerfile):
+        content = """
+FROM node:20
+WORKDIR /app
+COPY package.json .
+RUN npm install
+COPY . .
+CMD ["node", "server.js"]
+"""
+        write_dockerfile(temp_dockerfile, content)
+        analyzer = DockerfileAnalyzer(temp_dockerfile)
+        analyzer.load_dockerfile()
+        analyzer.analyze_multi_stage()
+
+        assert len(analyzer.issues) == 1
+        assert analyzer.issues[0]['category'] == 'optimization'
+        assert 'multi-stage' in analyzer.issues[0]['message'].lower()
+
+    def test_multi_stage_no_issues(self, temp_dockerfile):
+        content = """
+FROM node:20 AS build
+WORKDIR /app
+COPY package.json .
+RUN npm install
+COPY . .
+RUN npm run build
+
+FROM node:20-alpine
+WORKDIR /app
+COPY --from=build /app/dist ./dist
+CMD ["node", "dist/server.js"]
+"""
+        write_dockerfile(temp_dockerfile, content)
+        analyzer = DockerfileAnalyzer(temp_dockerfile)
+        analyzer.load_dockerfile()
+        analyzer.analyze_multi_stage()
+
+        multi_stage_issues = [i for i in analyzer.issues if i['category'] == 'optimization']
+        assert len(multi_stage_issues) == 0
+
+
+class TestAnalyzeLayerCaching:
+    """Test layer caching analysis"""
+
+    def test_source_before_dependencies(self, temp_dockerfile):
+        content = """
+FROM node:20
+WORKDIR /app
+COPY . .
+RUN npm install
+"""
+        write_dockerfile(temp_dockerfile, content)
+        analyzer = DockerfileAnalyzer(temp_dockerfile)
+        analyzer.load_dockerfile()
+        analyzer.analyze_layer_caching()
+
+        assert len(analyzer.issues) == 1
+        assert analyzer.issues[0]['category'] == 'caching'
+
+    def test_correct_order(self, temp_dockerfile):
+        content = """
+FROM node:20
+WORKDIR /app
+COPY package.json .
+RUN npm install
+COPY . .
+"""
+        write_dockerfile(temp_dockerfile, content)
+        analyzer = DockerfileAnalyzer(temp_dockerfile)
+        analyzer.load_dockerfile()
+        analyzer.analyze_layer_caching()
+
+        caching_issues = [i for i in analyzer.issues if i['category'] == 'caching']
+        assert len(caching_issues) == 0
+
+
+class TestAnalyzeSecurity:
+    """Test security analysis"""
+
+    def test_no_user_instruction(self, temp_dockerfile):
+        content = """
+FROM node:20
+WORKDIR /app
+COPY . .
+CMD ["node", "server.js"]
+"""
+        write_dockerfile(temp_dockerfile, content)
+        analyzer = DockerfileAnalyzer(temp_dockerfile)
+        analyzer.load_dockerfile()
+        analyzer.analyze_security()
+
+        assert len(analyzer.issues) >= 1
+        security_issues = [i for i in analyzer.issues if i['category'] == 'security']
+        assert any('root' in i['message'] for i in security_issues)
+
+    def test_with_user_instruction(self, temp_dockerfile):
+        content = """
+FROM node:20
+WORKDIR /app
+COPY . .
+USER node
+CMD ["node", "server.js"]
+"""
+        write_dockerfile(temp_dockerfile, content)
+        analyzer = DockerfileAnalyzer(temp_dockerfile)
+        analyzer.load_dockerfile()
+        analyzer.analyze_security()
+
+        # Should not have root user issue
+        root_issues = [i for i in analyzer.issues
+                      if i['category'] == 'security' and 'root' in i['message']]
+        assert len(root_issues) == 0
+
+    def test_detect_secrets(self, temp_dockerfile):
+        content = """
+FROM node:20
+ENV API_KEY=secret123
+ENV PASSWORD=mypassword
+"""
+        write_dockerfile(temp_dockerfile, content)
+        analyzer = DockerfileAnalyzer(temp_dockerfile)
+        analyzer.load_dockerfile()
+        analyzer.analyze_security()
+
+        secret_issues = [i for i in analyzer.issues
+                        if i['category'] == 'security' and 'secret' in i['message'].lower()]
+        assert len(secret_issues) >= 1
+
+
+class TestAnalyzeAptCache:
+    """Test apt cache cleanup analysis"""
+
+    def test_apt_without_cleanup(self, temp_dockerfile):
+        content = """
+FROM ubuntu:22.04
+RUN apt-get update && apt-get install -y curl
+"""
+        write_dockerfile(temp_dockerfile, content)
+        analyzer = DockerfileAnalyzer(temp_dockerfile)
+        analyzer.load_dockerfile()
+        analyzer.analyze_apt_cache()
+
+        assert len(analyzer.suggestions) >= 1
+        assert any('apt cache' in s['message'] for s in analyzer.suggestions)
+
+    def test_apt_with_cleanup(self, temp_dockerfile):
+        content = """
+FROM ubuntu:22.04
+RUN apt-get update && apt-get install -y curl && rm -rf /var/lib/apt/lists/*
+"""
+        write_dockerfile(temp_dockerfile, content)
+        analyzer = DockerfileAnalyzer(temp_dockerfile)
+        analyzer.load_dockerfile()
+        analyzer.analyze_apt_cache()
+
+        apt_suggestions = [s for s in analyzer.suggestions if 'apt cache' in s['message']]
+        assert len(apt_suggestions) == 0
+
+
+class TestAnalyzeCombineRun:
+    """Test RUN command combination analysis"""
+
+    def test_consecutive_runs(self, temp_dockerfile):
+        content = """
+FROM node:20
+RUN apt-get update
+RUN apt-get install -y curl
+RUN apt-get clean
+"""
+        write_dockerfile(temp_dockerfile, content)
+        analyzer = DockerfileAnalyzer(temp_dockerfile)
+        analyzer.load_dockerfile()
+        analyzer.analyze_combine_run()
+
+        assert len(analyzer.suggestions) >= 1
+        assert any('consecutive' in s['message'] for s in analyzer.suggestions)
+
+    def test_non_consecutive_runs(self, temp_dockerfile):
+        content = """
+FROM node:20
+RUN apt-get update
+COPY package.json .
+RUN npm install
+"""
+        write_dockerfile(temp_dockerfile, content)
+        analyzer = DockerfileAnalyzer(temp_dockerfile)
+        analyzer.load_dockerfile()
+        analyzer.analyze_combine_run()
+
+        consecutive_suggestions = [s for s in analyzer.suggestions
+                                  if 'consecutive' in s['message']]
+        assert len(consecutive_suggestions) == 0
+
+
+class TestAnalyzeWorkdir:
+    """Test WORKDIR analysis"""
+
+    def test_no_workdir(self, temp_dockerfile):
+        content = """
+FROM node:20
+COPY . /app
+CMD ["node", "/app/server.js"]
+"""
+        write_dockerfile(temp_dockerfile, content)
+        analyzer = DockerfileAnalyzer(temp_dockerfile)
+        analyzer.load_dockerfile()
+        analyzer.analyze_workdir()
+
+        assert len(analyzer.suggestions) >= 1
+        assert any('WORKDIR' in s['message'] for s in analyzer.suggestions)
+
+    def test_with_workdir(self, temp_dockerfile):
+        content = """
+FROM node:20
+WORKDIR /app
+COPY . .
+CMD ["node", "server.js"]
+"""
+        write_dockerfile(temp_dockerfile, content)
+        analyzer = DockerfileAnalyzer(temp_dockerfile)
+        analyzer.load_dockerfile()
+        analyzer.analyze_workdir()
+
+        workdir_suggestions = [s for s in analyzer.suggestions if 'WORKDIR' in s['message']]
+        assert len(workdir_suggestions) == 0
+
+
+class TestFullAnalyze:
+    """Test complete analysis"""
+
+    def test_analyze_poor_dockerfile(self, temp_dockerfile):
+        content = """
+FROM node:latest
+COPY . .
+RUN npm install
+CMD ["node", "server.js"]
+"""
+        write_dockerfile(temp_dockerfile, content)
+        analyzer = DockerfileAnalyzer(temp_dockerfile)
+        results = analyzer.analyze()
+
+        assert 'dockerfile' in results
+        assert 'total_lines' in results
+        assert 'issues' in results
+        assert 'suggestions' in results
+        assert 'summary' in results
+
+        # Should have multiple issues and suggestions
+        assert results['summary']['warnings'] > 0
+        assert results['summary']['suggestions'] > 0
+
+    def test_analyze_good_dockerfile(self, temp_dockerfile):
+        content = """
+FROM node:20-alpine AS build
+WORKDIR /app
+COPY package.json .
+RUN npm ci --only=production
+COPY . .
+RUN npm run build
+
+FROM node:20-alpine
+WORKDIR /app
+COPY --from=build /app/dist ./dist
+COPY --from=build /app/node_modules ./node_modules
+USER node
+EXPOSE 3000
+CMD ["node", "dist/server.js"]
+"""
+        write_dockerfile(temp_dockerfile, content)
+        analyzer = DockerfileAnalyzer(temp_dockerfile)
+        results = analyzer.analyze()
+
+        # Should have minimal issues
+        assert results['summary']['errors'] == 0
+        # May have some suggestions, but fewer issues overall
+
+
+class TestPrintResults:
+    """Test results printing"""
+
+    def test_print_results(self, temp_dockerfile, capsys):
+        content = "FROM node:latest\n"
+        write_dockerfile(temp_dockerfile, content)
+
+        analyzer = DockerfileAnalyzer(temp_dockerfile)
+        results = analyzer.analyze()
+        analyzer.print_results(results)
+
+        captured = capsys.readouterr()
+        assert "Dockerfile Analysis" in captured.out
+        assert "Summary:" in captured.out
+        assert "ISSUES:" in captured.out or "SUGGESTIONS:" in captured.out
+
+
+class TestIntegration:
+    """Integration tests"""
+
+    def test_full_analysis_workflow(self, temp_dockerfile):
+        content = """
+FROM python:3.11
+COPY . /app
+RUN pip install -r /app/requirements.txt
+ENV API_KEY=secret
+CMD ["python", "/app/app.py"]
+"""
+        write_dockerfile(temp_dockerfile, content)
+
+        analyzer = DockerfileAnalyzer(temp_dockerfile, verbose=True)
+        results = analyzer.analyze()
+
+        # Verify all expected checks ran
+        assert len(analyzer.issues) > 0
+        assert len(analyzer.suggestions) > 0
+
+        # Should flag multiple categories
+        categories = {i['category'] for i in analyzer.issues}
+        assert 'security' in categories
+
+        # Verify summary calculations
+        total_findings = (results['summary']['errors'] +
+                         results['summary']['warnings'] +
+                         results['summary']['suggestions'])
+        assert total_findings > 0
+
+
+if __name__ == "__main__":
+    pytest.main([__file__, "-v"])

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