thanh-kit 2.5.0

package/templates/skills/feature-investigation/SKILL.md

@@ -0,0 +1,346 @@
+---
+name: feature-investigation
+description: Use when the user asks to investigate, understand, explore, or explain how a feature works, asks about existing logic, or wants to understand code flow. Triggers on keywords like "how does", "explain", "investigate", "understand", "what does", "where is", "how works", "logic flow", "trace", "explore feature".
+allowed-tools: Read, Write, Edit, Bash, Grep, Glob, Task, WebFetch, WebSearch, TodoWrite
+---
+
+# Investigating a Feature or Understanding Logic
+
+You are to operate as an expert full-stack dotnet angular principle developer and software architect to investigate and explain how existing features work, trace logic flows, and provide comprehensive understanding of code behavior.
+
+**IMPORTANT**: Always think hard, plan step-by-step todo list first before execute. Always remember todo list, never compact or summarize it when memory context limit is reached. Always preserve and carry your todo list through every operation. Todo list must cover all phases, from start to end, including child tasks in each phase, everything is flattened out into a long detailed todo list.
+
+---
+
+## Core Anti-Hallucination Protocols
+
+### ASSUMPTION_VALIDATION_CHECKPOINT
+
+Before every major operation:
+
+1. "What assumptions am I making about [X]?"
+2. "Have I verified this with actual code evidence?"
+3. "Could I be wrong about [specific pattern/relationship]?"
+
+### EVIDENCE_CHAIN_VALIDATION
+
+Before claiming any relationship:
+
+- "I believe X calls Y because..." → show actual code
+- "This follows pattern Z because..." → cite specific examples
+- "Service A owns B because..." → grep for actual boundaries
+
+### TOOL_EFFICIENCY_PROTOCOL
+
+- Batch multiple Grep searches into single calls with OR patterns
+- Use parallel Read operations for related files
+- Combine semantic searches with related keywords
+
+### CONTEXT_ANCHOR_SYSTEM
+
+Every 10 operations:
+
+1. Re-read the original task description from the `## Metadata` section
+2. Verify the current operation aligns with original goals
+3. Check if we're solving the right problem
+4. Update the `Current Focus` bullet point within the `## Progress` section
+
+---
+
+## Quick Reference Checklist
+
+Before any major operation:
+
+- [ ] ASSUMPTION_VALIDATION_CHECKPOINT
+- [ ] EVIDENCE_CHAIN_VALIDATION
+- [ ] TOOL_EFFICIENCY_PROTOCOL
+
+Every 10 operations:
+
+- [ ] CONTEXT_ANCHOR_CHECK
+- [ ] Update 'Current Focus' in `## Progress` section
+
+Emergency:
+
+- **Context Drift** → Re-read `## Metadata` section
+- **Assumption Creep** → Halt, validate with code
+- **Evidence Gap** → Mark as "inferred"
+
+---
+
+## PHASE 1: EXTERNAL MEMORY-DRIVEN FEATURE INVESTIGATION
+
+Your sole objective is to build a structured knowledge model in a Markdown analysis file at `ai_task_analysis_notes/[feature-name]-investigation.ai_task_analysis_notes_temp.md` with systematic external memory management.
+
+### PHASE 1A: INITIALIZATION AND DISCOVERY
+
+1. **Initialize** the analysis file with a `## Metadata` heading. Under it, add the full original prompt/question in a markdown box using 5 backticks:
+
+   ```markdown
+   [Full original prompt/question here]
+   ```
+
+2. **Continue adding** to the `## Metadata` section: the investigation question and full details of the `Source Code Structure` from `ai-prompt-context.md`. Use 6 backticks for this nested markdown:
+
+   ```markdown
+   ## Investigation Question
+
+   [Investigation question here]
+
+   ## Source Code Structure
+
+   [Full details from ai-prompt-context.md]
+   ```
+
+3. **Create all required headings**:
+   - `## Progress`
+   - `## Investigation Questions`
+   - `## Assumption Validations`
+   - `## Processed Files`
+   - `## File List`
+   - `## Knowledge Graph`
+   - `## Logic Flow Map`
+   - `## Entry Points`
+   - `## Data Flow`
+
+4. **Populate `## Progress`** with:
+   - **Phase**: 1
+   - **Items Processed**: 0
+   - **Total Items**: 0
+   - **Current Operation**: "initialization"
+   - **Current Focus**: "[original investigation question]"
+
+5. **Populate `## Investigation Questions`** with:
+   - Primary question being investigated
+   - Sub-questions to answer
+   - Expected outcomes
+
+6. **Discovery searches** - Semantic search and grep search all keywords to find:
+   - **Domain Entities, Commands, Queries, Event Handlers, Controllers, Background Jobs, Consumers, front-end Components .ts**
+
+7. **Additional targeted searches**:
+   - `grep search` patterns: `.*EventHandler.*{FeatureName}|{FeatureName}.*EventHandler`
+   - `grep search` patterns: `.*BackgroundJob.*{FeatureName}|{FeatureName}.*BackgroundJob`
+   - `grep search` patterns: `.*Consumer.*{FeatureName}|{FeatureName}.*Consumer`
+   - `grep search` patterns: `.*Service.*{FeatureName}|{FeatureName}.*Service`
+   - `grep search` patterns: `.*Helper.*{FeatureName}|{FeatureName}.*Helper`
+   - Include pattern: `**/*.{cs,ts,html}`
+
+**CRITICAL:** Save ALL file paths immediately as a numbered list under `## File List`. Update the `Total Items` count in `## Progress`.
+
+### PHASE 1B: KNOWLEDGE GRAPH CONSTRUCTION
+
+**IMPORTANT: MUST DO WITH TODO LIST**
+
+Count total files in file list, split it into many batches of 10 files in priority order. For each batch, insert a new task in the current todo list for analyzing that batch.
+
+**File Analysis Order (by priority)**:
+
+1. Domain Entities
+2. Commands
+3. Queries
+4. Event Handlers
+5. Controllers
+6. Background Jobs
+7. Consumers
+8. Frontend Components .ts
+
+**CRITICAL:** You must analyze ALL files in the file list identified as belonging to the highest priority categories.
+
+For each file, add results into `## Knowledge Graph` section. **The heading of each analyzed file must have the item order number in the heading.**
+
+**Core fields** for each file:
+
+- `filePath`: Full path to the file
+- `type`: Component classification
+- `architecturalPattern`: Design pattern used
+- `content`: Purpose and logic summary
+- `symbols`: Classes, interfaces, methods
+- `dependencies`: Imports/using statements
+- `businessContext`: Comprehensive detail of all business logic
+- `referenceFiles`: Files using this file's symbols
+- `relevanceScore`: 1-10
+- `evidenceLevel`: "verified" or "inferred"
+- `uncertainties`: Unclear aspects
+- `platformAbstractions`: Platform base classes used
+- `serviceContext`: Microservice ownership
+- `dependencyInjection`: DI registrations
+- `genericTypeParameters`: Generic type relationships
+
+**Message Bus Analysis** (CRITICAL FOR CONSUMERS):
+
+- `messageBusAnalysis`: When analyzing Consumer files (`*Consumer.cs` extending `PlatformApplicationMessageBusConsumer<T>`):
+  1. Identify the `*BusMessage` type used
+  2. Grep search ALL services to find files that send/publish this message
+  3. List all producer files and their service locations in `messageBusProducers`
+
+**Targeted Aspect Analysis** (`targetedAspectAnalysis`):
+
+For **Front-End items**:
+
+- `componentHierarchy`, `routeConfig`, `routeGuards`
+- `stateManagementStores`, `dataBindingPatterns`, `validationStrategies`
+
+For **Back-End items**:
+
+- `authorizationPolicies`, `commands`, `queries`
+- `domainEntities`, `repositoryPatterns`, `businessRuleImplementations`
+
+For **Consumer items**:
+
+- `messageBusMessage`, `messageBusProducers`
+- `crossServiceIntegration`, `handleLogicWorkflow`
+
+**MANDATORY PROGRESS TRACKING**: After processing every 10 files, you **MUST** update `Items Processed` in `## Progress`, run a `CONTEXT_ANCHOR_CHECK`, and explicitly state your progress. After each file, add its path to the `## Processed Files` list.
+
+### PHASE 1C: LOGIC FLOW MAPPING
+
+Document under `## Logic Flow Map`:
+
+1. **Entry Points**: Where does the feature start? (API endpoint, UI action, scheduled job, message consumer)
+
+2. **Request Flow**: Trace the complete path:
+   - Frontend Component → API Service → Controller
+   - Controller → CQRS Command/Query Handler
+   - Handler → Domain Entity operations
+   - Handler → Repository operations
+   - Handler → Side effects (events, notifications)
+
+3. **Data Flow**: Track how data moves:
+   - Input validation and transformation
+   - Business rule application
+   - Persistence operations
+   - Response transformation
+
+4. **Event Flow**: Map triggered events:
+   - Domain events raised
+   - Entity events produced
+   - Message bus publications
+   - Cross-service communications
+
+5. **Error Handling Flow**: Document error paths:
+   - Validation failures
+   - Business rule violations
+   - Technical exceptions
+   - Error propagation
+
+### PHASE 1D: OVERALL ANALYSIS
+
+Write comprehensive `overallAnalysis:` summary showing:
+
+- Complete end-to-end workflows discovered
+- Key architectural patterns and relationships
+- All business logic workflows: From front-end to back-end
+  - Example: Front-end Component => Controller Api Service => Command/Query => EventHandler => Others (Send email, producer bus message)
+  - Example: Background Job => Event Handler => Others
+- Integration points and dependencies
+- Cross-service dependencies identified
+- Authorization and security checkpoints
+
+---
+
+## PHASE 2: INVESTIGATION SYNTHESIS
+
+**Prerequisites**: Ensure ALL files are analyzed. Read the ENTIRE analysis notes file.
+
+Generate comprehensive investigation report under `## Investigation Report` heading:
+
+### 2.1: Feature Overview
+
+- **Purpose**: What business problem does this feature solve?
+- **Scope**: What are the boundaries of this feature?
+- **Key Components**: List the main files/classes involved
+
+### 2.2: Architecture Summary
+
+- **Pattern**: What architectural patterns are used?
+- **Layers**: How does it fit in Clean Architecture?
+- **Dependencies**: What external/internal dependencies exist?
+
+### 2.3: Logic Flow Diagram (Text-based)
+
+```
+[Entry Point] → [Validation] → [Business Logic] → [Persistence] → [Side Effects] → [Response]
+```
+
+### 2.4: Code Evidence
+
+For each major claim, provide:
+
+- File path and line numbers
+- Code snippets as evidence
+- Explanation of the code's role
+
+### 2.5: Answer to Investigation Questions
+
+Address each question from `## Investigation Questions` with:
+
+- Direct answer
+- Supporting evidence (file:line references)
+- Confidence level (High/Medium/Low)
+
+### PHASE 2.1: VERIFY AND REFACTOR
+
+Verify your investigation findings align with code patterns from these files:
+
+- `.github/copilot-instructions.md` - Platform patterns
+- `.github/instructions/frontend-angular.instructions.md` - Frontend patterns
+- `.github/instructions/backend-dotnet.instructions.md` - Backend patterns
+- `.github/instructions/clean-code.instructions.md` - Clean code rules
+
+---
+
+## PHASE 3: PRESENTATION
+
+Present findings to the user in a clear, structured format:
+
+1. **Executive Summary**: 2-3 sentences explaining the feature
+2. **Detailed Explanation**: Step-by-step logic flow
+3. **Code References**: Key files and their roles
+4. **Visual Flow**: Text-based diagram of the process
+5. **Questions Answered**: Direct responses to user's questions
+
+---
+
+## Investigation Guidelines
+
+- **Evidence-based approach**: Use grep and semantic search to verify assumptions
+- **Service boundary discovery**: Find endpoints before assuming responsibilities
+- **Never assume service ownership**: Verify patterns with code evidence
+- **Trace complete flows**: Don't stop at surface-level understanding
+- **Document uncertainties**: Mark unclear areas as "needs verification"
+- **Cross-reference findings**: Validate discoveries with multiple sources
+- **Platform awareness**: Understand platform base class behaviors
+
+---
+
+## Common Investigation Patterns
+
+### For "How does X work?" questions:
+
+1. Find the entry point (controller, UI component, job)
+2. Trace the command/query handler
+3. Map domain entity operations
+4. Document side effects and events
+5. Summarize the complete flow
+
+### For "Where is X handled?" questions:
+
+1. Search for the specific term/concept
+2. Identify the owning component
+3. Map dependencies and callers
+4. Document the responsibility chain
+
+### For "What happens when X?" questions:
+
+1. Identify the trigger condition
+2. Trace the execution path
+3. Document all branches and conditions
+4. Map outputs and side effects
+
+### For "Why does X behave this way?" questions:
+
+1. Find the relevant code
+2. Understand the business context
+3. Check for related validation/rules
+4. Document the design decision rationale

package/templates/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/templates/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/templates/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