@trieungoctam/vibekit 1.0.0

package/skills/dev/frontend-design/references/visual-analysis-overview.md

@@ -0,0 +1,95 @@
+# Visual Analysis Overview
+
+Use AI multimodal vision to analyze generated assets and verify design standards.
+
+## Purpose
+
+- Verify generated assets align with aesthetic direction
+- Ensure professional quality before integration
+- Identify specific improvements needed for iteration
+- Make objective design decisions based on analysis
+- Extract actionable data (hex codes, composition insights)
+
+## Quick Start
+
+### Comprehensive Analysis
+```bash
+python scripts/gemini_batch_process.py \
+  --files docs/assets/generated-hero.png \
+  --task analyze \
+  --prompt "[see analysis-prompts.md for detailed prompt]" \
+  --output docs/assets/analysis-report.md \
+  --model gemini-2.5-flash
+```
+
+### Compare Multiple Variations
+```bash
+python scripts/gemini_batch_process.py \
+  --files docs/assets/option-1.png docs/assets/option-2.png docs/assets/option-3.png \
+  --task analyze \
+  --prompt "[see analysis-prompts.md for comparison prompt]" \
+  --output docs/assets/comparison-analysis.md \
+  --model gemini-2.5-flash
+```
+
+### Extract Color Palette
+```bash
+python scripts/gemini_batch_process.py \
+  --files docs/assets/final-asset.png \
+  --task analyze \
+  --prompt "Extract 5-8 dominant colors with hex codes. Classify as primary/accent/neutral. Suggest CSS variable names." \
+  --output docs/assets/color-palette.md \
+  --model gemini-2.5-flash
+```
+
+## Decision Framework
+
+### Score ≥ 8/10: Proceed to Integration
+**Actions**:
+- Optimize for web delivery
+- Create responsive variants
+- Document implementation guidelines
+- Extract color palette for CSS variables
+
+### Score 6-7/10: Minor Refinements Needed
+**Actions**:
+- Use `ck:media-processing` skill for adjustments (brightness/contrast/saturation)
+- Consider selective regeneration of problem areas
+- May proceed with caution if time-constrained
+
+### Score < 6/10: Major Iteration Required
+**Actions**:
+- Analyze specific failure points from report
+- Refine generation prompt substantially
+- Regenerate with corrected parameters
+- Consider alternative aesthetic approach
+
+## Detailed References
+
+- `analysis-prompts.md` - All analysis prompt templates
+- `analysis-techniques.md` - Advanced analysis strategies
+- `analysis-best-practices.md` - Quality guidelines and pitfalls
+
+## Example Color Extraction Output
+
+```css
+/* Extracted Color Palette */
+:root {
+  /* Primary Colors */
+  --color-primary-600: #2C5F7D;  /* Dark teal - headers, CTAs */
+  --color-primary-400: #4A90B8;  /* Medium teal - links, accents */
+
+  /* Accent Colors */
+  --color-accent-500: #E8B44F;   /* Warm gold - highlights */
+
+  /* Neutral Colors */
+  --color-neutral-900: #1A1A1A;  /* Near black - body text */
+  --color-neutral-100: #F5F5F5;  /* Light gray - backgrounds */
+
+  /* Semantic Usage */
+  --color-text-primary: var(--color-neutral-900);
+  --color-text-on-primary: #FFFFFF;
+  --color-background: var(--color-neutral-100);
+  --color-cta: var(--color-primary-600);
+}
+```

package/skills/dev/frontend-design/references/workflow-3d.md

@@ -0,0 +1,102 @@
+# 3D Design Workflow
+
+Create immersive interactive 3D designs with Three.js.
+
+## Prerequisites
+- Activate `ck:ui-ux-pro-max` skill first
+- Activate `ck:threejs` skill for 3D and WebGL expertise
+- Have `ck:ai-multimodal` skill ready for asset generation
+
+## Initial Research
+Run `ck:ui-ux-pro-max` searches:
+```bash
+python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<product-type>" --domain product
+python3 .claude/skills/ui-ux-pro-max/scripts/search.py "immersive 3d" --domain style
+python3 .claude/skills/ui-ux-pro-max/scripts/search.py "animation" --domain ux
+```
+
+## Workflow Steps
+
+### 1. Create Implementation Plan
+Use `ui-ux-designer` + `researcher` subagents:
+- Create plan directory (use `## Naming` pattern)
+- Write `plan.md` (<80 lines overview)
+- Add `phase-XX-name.md` files
+- Keep research reports under 150 lines
+
+### 2. Implement with Three.js
+Use `ui-ux-designer` subagent to build:
+- Three.js scene setup
+- Custom GLSL shaders
+- GPU particle systems
+- Cinematic camera controls
+- Post-processing effects
+- Interactive elements
+
+### 3. Generate 3D Assets
+Use `ck:ai-multimodal` skill for:
+- Textures and materials
+- Skyboxes and environment maps
+- Particle sprites
+- Video backgrounds
+
+Use `ck:media-processing` skill for:
+- Texture optimization for WebGL
+- Normal/height map generation
+- Sprite sheet creation
+- Background removal
+- Asset optimization
+
+### 4. Verify & Report
+- Test across devices
+- Optimize for 60fps
+- Report to user
+- Request approval
+
+### 5. Document
+Update `./docs/design-guidelines.md` with:
+- 3D design patterns
+- Shader libraries
+- Reusable components
+
+## Technical Requirements
+
+### Three.js Implementation
+- Proper scene optimization
+- Efficient draw calls
+- LOD (Level of Detail) where needed
+- Responsive canvas behavior
+- Memory management
+
+### Shader Development
+- Custom vertex shaders
+- Custom fragment shaders
+- Uniform management
+- Performance optimization
+
+### Particle Systems
+- GPU-accelerated rendering
+- Efficient buffer geometry
+- Point sprite optimization
+
+### Post-Processing
+- Render pipeline setup
+- Effect composition
+- Performance budgeting
+
+## Implementation Stack
+- Three.js - 3D rendering
+- GLSL - Custom shaders
+- HTML/CSS/JS - UI integration
+- WebGL - GPU graphics
+
+## Performance Targets
+- 60fps minimum
+- < 100ms initial load
+- Responsive to viewport
+- Mobile-friendly fallbacks
+
+## Related
+- `animejs.md` - UI animation patterns
+- `technical-optimization.md` - Performance tips
+- `asset-generation.md` - Asset creation

package/skills/dev/frontend-design/references/workflow-describe.md

@@ -0,0 +1,87 @@
+# Design Description Workflow
+
+Create detailed design documentation from screenshot/video for developer implementation.
+
+## Prerequisites
+- Activate `ck:ui-ux-pro-max` skill first
+- Have `ck:ai-multimodal` skill ready
+
+## Workflow Steps
+
+### 1. Comprehensive Visual Analysis
+Use `ck:ai-multimodal` skill to describe exhaustively:
+
+**Layout & Structure**
+- Element positions (absolute coords or relative)
+- Container hierarchy
+- Grid/flexbox patterns
+- Responsive breakpoints visible
+
+**Visual Properties**
+- Design style and aesthetic trend
+- Every color with hex codes
+- Every border (width, style, radius)
+- Every icon (describe or identify)
+- Font names (predict Google Fonts), sizes, weights
+- Line heights, letter spacing
+
+**Spacing System**
+- Padding values
+- Margin values
+- Gap between elements
+- Section spacing
+
+**Visual Effects**
+- Shapes and geometry
+- Textures and materials
+- Lighting direction
+- Shadows (offset, blur, spread, color)
+- Reflections and refractions
+- Blur effects (backdrop, gaussian)
+- Glow effects
+- Background transparency
+- Image treatments
+
+**Interactions (if video)**
+- Animation sequences
+- Transition types and timing
+- Hover/focus states
+- Scroll behaviors
+
+**Font Prediction**: Match actual fonts, avoid Inter/Poppins defaults.
+
+### 2. Create Implementation Plan
+Use `ui-ux-designer` subagent:
+- Create plan directory (use `## Naming` pattern)
+- Write `plan.md` overview (<80 lines)
+- Add detailed `phase-XX-name.md` files
+
+### 3. Report to User
+Provide implementation-ready documentation:
+- Summary of design system
+- Component breakdown
+- Technical specifications
+- Suggested implementation approach
+
+## Output Format
+
+```markdown
+# Design Analysis: [Name]
+
+## Design System
+- **Style**: [aesthetic direction]
+- **Colors**: [palette with hex]
+- **Typography**: [fonts, sizes, weights]
+- **Spacing Scale**: [values]
+
+## Component Breakdown
+1. [Component] - [specs]
+2. [Component] - [specs]
+
+## Implementation Notes
+- [Technical considerations]
+```
+
+## Related
+- `extraction-prompts.md` - Detailed prompts
+- `extraction-output-templates.md` - Output formats

package/skills/dev/frontend-design/references/workflow-immersive.md

@@ -0,0 +1,87 @@
+# Immersive Design Workflow
+
+Create award-quality designs with storytelling, 3D experiences, and micro-interactions.
+
+## Prerequisites
+- Activate `ck:ui-ux-pro-max` skill first
+
+## Initial Research
+Run `ck:ui-ux-pro-max` searches:
+```bash
+python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<product-type>" --domain product
+python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<style-keywords>" --domain style
+python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<mood>" --domain typography
+python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<industry>" --domain color
+```
+
+## Workflow Steps
+
+### 1. Research Phase
+Use `researcher` subagent to investigate:
+- Design style and current trends
+- Font combinations and typography
+- Color theory for the context
+- Border and spacing patterns
+- Element positioning principles
+- Animation and interaction patterns
+
+### 2. Design Implementation
+Use `ui-ux-designer` subagent:
+- Build step by step from research
+- Create plan with `## Naming` pattern
+- Default to HTML/CSS/JS if unspecified
+
+### 3. Storytelling Elements
+Incorporate:
+- Narrative flow through scroll
+- Emotional pacing
+- Visual hierarchy for story beats
+- Progressive disclosure of content
+
+### 4. 3D Experiences
+If applicable, integrate:
+- Three.js scenes
+- Interactive 3D elements
+- Parallax depth effects
+- WebGL enhancements
+
+### 5. Micro-interactions
+Add polish:
+- Button feedback
+- Form interactions
+- Loading states
+- Hover effects
+- Scroll responses
+
+### 6. Asset Generation
+Use `ck:ai-multimodal` skill:
+- Generate high-quality visuals
+- Create unique imagery
+- Verify asset quality
+- Remove backgrounds as needed
+
+### 7. Verify & Report
+- Review against inspiration
+- Report to user
+- Request approval
+- Update `./docs/design-guidelines.md`
+
+## Quality Standards
+Match award-winning sites:
+- Dribbble top shots
+- Behance featured
+- Awwwards winners
+- Mobbin patterns
+- TheFWA selections
+
+## Design Principles
+- **Bold aesthetic choices**: Commit fully to direction
+- **Attention to detail**: Every pixel matters
+- **Cohesive experience**: All elements work together
+- **Memorable moments**: Create surprise and delight
+- **Technical excellence**: Performance + polish
+
+## Related
+- `workflow-3d.md` - 3D implementation details
+- `animejs.md` - Animation patterns
+- `technical-best-practices.md` - Quality guidelines

package/skills/dev/frontend-design/references/workflow-quick.md

@@ -0,0 +1,57 @@
+# Quick Design Workflow
+
+Rapid design creation with minimal planning overhead.
+
+## Prerequisites
+- Activate `ck:ui-ux-pro-max` skill first
+
+## Initial Research
+Run `ck:ui-ux-pro-max` searches:
+```bash
+python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<product-type>" --domain product
+python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<style-keywords>" --domain style
+python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<mood>" --domain typography
+python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<industry>" --domain color
+```
+
+## Workflow Steps
+
+### 1. Start Design Process
+Use `ui-ux-designer` subagent directly:
+- Skip extensive planning
+- Move to implementation quickly
+- Make design decisions on-the-fly
+
+### 2. Implement
+- Default to HTML/CSS/JS if unspecified
+- Focus on core functionality
+- Maintain quality despite speed
+
+### 3. Generate Assets
+Use `ck:ai-multimodal` skill:
+- Generate required visuals
+- Verify quality quickly
+- Use `ck:media-processing` for adjustments
+
+### 4. Report & Approve
+- Summarize changes briefly
+- Request user approval
+- Update `./docs/design-guidelines.md` if approved
+
+## When to Use
+- Simple components
+- Prototypes and MVPs
+- Time-constrained projects
+- Iterative exploration
+- Single-page designs
+
+## Quality Shortcuts
+While moving fast, maintain:
+- Semantic HTML
+- CSS variables for consistency
+- Basic accessibility
+- Clean code structure
+
+## Related
+- `workflow-immersive.md` - For comprehensive designs
+- `technical-overview.md` - Quick reference

package/skills/dev/frontend-design/references/workflow-screenshot.md

@@ -0,0 +1,63 @@
+# Screenshot Replication Workflow
+
+Replicate a design exactly from a provided screenshot.
+
+## Prerequisites
+- Activate `ck:ui-ux-pro-max` skill first for design intelligence
+- Have `ck:ai-multimodal` skill ready for visual analysis
+
+## Workflow Steps
+
+### 1. Analyze Screenshot Details
+Use `ck:ai-multimodal` skill to extract:
+- Design style and visual trends
+- Font names (predict Google Fonts), sizes, weights
+- Color palette with exact hex codes
+- Border radius, spacing patterns
+- Element positions, sizes, shapes
+- Textures, materials, lighting
+- Shadows, reflections, blur, glow effects
+- Background transparency, transitions
+- Image treatments and effects
+
+**Font Prediction**: Avoid defaulting to Inter/Poppins. Match actual fonts visible.
+
+### 2. Create Implementation Plan
+Use `ui-ux-designer` subagent:
+- Create plan directory (use `## Naming` pattern from hooks)
+- Write `plan.md` (<80 lines, generic overview)
+- Add `phase-XX-name.md` files with:
+  - Context links, Overview, Key Insights
+  - Requirements, Architecture, Related files
+  - Implementation Steps, Todo list
+  - Success Criteria, Risk Assessment
+
+### 3. Implement
+- Follow plan step by step
+- Default to HTML/CSS/JS if no framework specified
+- Match screenshot precisely
+
+### 4. Generate Assets
+Use `ck:ai-multimodal` skill:
+- Generate images, icons, backgrounds
+- Verify generated assets match design
+- Remove backgrounds if needed with `ck:media-processing`
+
+### 5. Verify & Report
+- Compare implementation to screenshot
+- Report changes summary to user
+- Request approval
+
+### 6. Document
+If approved, update `./docs/design-guidelines.md`
+
+## Quality Standards
+- Match screenshot at pixel level where possible
+- Preserve all visual hierarchy
+- Maintain exact spacing and proportions
+- Replicate animations if visible in source
+
+## Related
+- `design-extraction-overview.md` - Extract design guidelines
+- `extraction-prompts.md` - Detailed analysis prompts
+- `visual-analysis-overview.md` - Verify quality

package/skills/dev/frontend-design/references/workflow-video.md

@@ -0,0 +1,74 @@
+# Video Replication Workflow
+
+Replicate a design including animations/interactions from a provided video.
+
+## Prerequisites
+- Activate `ck:ui-ux-pro-max` skill first
+- Have `ck:ai-multimodal` skill ready for video analysis
+
+## Workflow Steps
+
+### 1. Analyze Video Details
+Use `ck:ai-multimodal` skill to describe:
+- Every visible element and its properties
+- All interactions and user flows
+- Animation timing, easing, duration
+- Transitions between states/pages
+- Color palette with hex codes
+- Typography (predict Google Fonts)
+- Borders, spacing, sizing
+- Textures, materials, lighting
+- Shadows, reflections, blur, glow
+- Background effects
+
+**Font Prediction**: Avoid defaulting to Inter/Poppins.
+
+### 2. Create Implementation Plan
+Use `ui-ux-designer` subagent:
+- Create plan directory (use `## Naming` pattern)
+- Write `plan.md` (<80 lines overview)
+- Add `phase-XX-name.md` files with full sections
+- Keep research reports under 150 lines
+
+### 3. Implement
+- Follow plan step by step
+- Default to HTML/CSS/JS if unspecified
+- Prioritize animation accuracy
+
+### 4. Animation Implementation
+Focus on:
+- Timing functions matching video
+- State transitions
+- Micro-interactions
+- Scroll-triggered effects
+- Hover/focus states
+- Loading animations
+
+Use `animejs.md` reference for animation patterns.
+
+### 5. Generate Assets
+Use `ck:ai-multimodal` skill:
+- Generate static assets
+- Create animated sprites if needed
+- Verify quality matches video
+- Use `ck:media-processing` for processing
+
+### 6. Verify & Report
+- Compare implementation to video
+- Test all interactions
+- Report summary to user
+- Request approval
+
+### 7. Document
+If approved, update `./docs/design-guidelines.md`
+
+## Quality Standards
+- Frame-accurate animation timing
+- Smooth 60fps performance
+- Responsive behavior preserved
+- All interactions functional
+
+## Related
+- `animejs.md` - Animation library reference
+- `design-extraction-overview.md` - Guidelines extraction
+- `technical-optimization.md` - Performance tips