cokit-cli 1.0.9 → 1.2.2

package/skills/frontend-design/references/asset-generation.md

@@ -0,0 +1,161 @@
+# Asset Processing Workflow
+
+Complete workflow for processing design assets using CLI tools (ImageMagick, FFmpeg, RMBG).
+
+## Processing Workflow
+
+### Step 1: Define Design Context
+
+Before processing, extract from the design brief:
+- **Aesthetic direction**: Minimalist? Maximalist? Brutalist? Organic?
+- **Color palette**: Primary colors, accent colors, mood
+- **Visual tone**: Professional? Playful? Luxury? Raw?
+- **Output requirements**: Formats, sizes, optimization targets
+
+### Step 2: Source Assets
+
+Get assets from:
+- Client-provided images/videos
+- Stock photo services (Unsplash, Pexels)
+- Design tools exports (Figma, Sketch)
+- Screenshots or captured frames
+
+### Step 3: Process Assets with CLI Tools
+
+Use these CLI tools:
+
+**Image Processing (ImageMagick)**:
+```bash
+# Resize for web
+convert input.png -resize 1920x1080 output.png
+
+# Convert format
+convert input.png output.webp
+
+# Apply color adjustments
+convert input.png -modulate 100,110,100 output.png
+
+# Add border/padding
+convert input.png -bordercolor white -border 20 output.png
+
+# Create thumbnail
+convert input.png -thumbnail 300x200 thumbnail.png
+```
+
+**Background Removal (RMBG CLI)**:
+```bash
+# Remove background from image
+rmbg input.png output.png
+
+# Batch process directory
+rmbg -i ./input/ -o ./output/
+```
+
+**Video Processing (FFmpeg)**:
+```bash
+# Extract frame from video
+ffmpeg -i video.mp4 -ss 00:00:05 -frames:v 1 frame.png
+
+# Create thumbnail grid
+ffmpeg -i video.mp4 -frames 1 -vf "select=not(mod(n\,100)),scale=200:120,tile=5x3" grid.png
+
+# Convert to web format
+ffmpeg -i input.mp4 -c:v libx264 -crf 23 output.mp4
+
+# Create animated GIF
+ffmpeg -i video.mp4 -vf "fps=10,scale=480:-1" output.gif
+```
+
+### Step 4: Optimize for Web
+
+**Image Optimization**:
+```bash
+# PNG optimization
+pngquant --quality=65-80 input.png -o output.png
+
+# JPEG optimization
+convert input.jpg -quality 85 output.jpg
+
+# WebP conversion (smaller file size)
+convert input.png -quality 80 output.webp
+```
+
+**Responsive Variants**:
+```bash
+# Create multiple sizes
+convert hero.png -resize 1920x output/hero-lg.png
+convert hero.png -resize 1280x output/hero-md.png
+convert hero.png -resize 768x output/hero-sm.png
+convert hero.png -resize 480x output/hero-xs.png
+```
+
+### Step 5: Verify Quality
+
+After processing, verify:
+- File sizes are optimized (target < 200KB for images)
+- Colors match design palette
+- Resolution appropriate for use case
+- No compression artifacts visible
+- Transparent backgrounds work correctly
+
+## Common Asset Tasks
+
+### Background Removal for Product Images
+```bash
+# Single image
+rmbg product.jpg product-nobg.png
+
+# Batch process
+for f in products/*.jpg; do rmbg "$f" "output/$(basename "$f" .jpg).png"; done
+```
+
+### Hero Image Optimization
+```bash
+# Full workflow
+convert original.png -resize 1920x1080^ -gravity center -extent 1920x1080 hero-lg.png
+convert hero-lg.png -quality 85 hero-lg.webp
+convert original.png -resize 768x -quality 85 hero-sm.webp
+```
+
+### Sprite Sheet Creation
+```bash
+# Combine multiple images into sprite
+convert icon-*.png +append sprite.png
+
+# With grid layout
+montage icon-*.png -tile 4x -geometry +0+0 sprite.png
+```
+
+### Video Thumbnail
+```bash
+# Extract best frame (usually around 25% in)
+ffmpeg -i video.mp4 -ss 00:00:03 -frames:v 1 thumbnail.jpg
+```
+
+## File Format Guidelines
+
+| Format | Use Case | Notes |
+|--------|----------|-------|
+| WebP | Web images (default) | Best compression, wide support |
+| PNG | Images with transparency | Use for icons, logos |
+| JPEG | Photos without transparency | Good for large images |
+| SVG | Icons, simple graphics | Scalable, smallest for simple shapes |
+| MP4 (H.264) | Web video | Universal support |
+| WebM | Modern browsers | Better compression than MP4 |
+| GIF | Simple animations | Limited colors, larger files |
+
+## Quality vs Size Targets
+
+| Asset Type | Target Size | Quality Setting |
+|------------|-------------|-----------------|
+| Hero image | < 200KB | 80-85% |
+| Thumbnails | < 50KB | 75-80% |
+| Icons | < 10KB | PNG or SVG |
+| Product images | < 150KB | 80-85% |
+| Background patterns | < 100KB | 70-80% |
+
+## Next Steps
+
+- **Verify visual quality**: Compare processed assets to originals
+- **Test across devices**: Ensure responsive variants work
+- **Document assets**: Keep track of source files and processing steps

package/skills/frontend-design/references/design-extraction-overview.md

@@ -0,0 +1,71 @@
+# Extract Design Guidelines from Existing Assets
+
+Reverse-engineer design principles from existing images or videos to establish design guidelines.
+
+## Purpose
+
+- Analyze competitor designs to understand their approach
+- Extract design systems from inspiration screenshots
+- Learn from high-quality design examples
+- Create documented guidelines based on visual analysis
+- Establish consistent aesthetic direction from references
+
+## Use Cases
+
+- Analyzing competitor websites or apps
+- Learning from inspiration galleries (Dribbble, Awwwards, Mobbin)
+- Extracting design systems from brand materials
+- Reverse-engineering successful interfaces
+- Creating design documentation from visual references
+
+## Quick Workflows
+
+### Single Image Analysis
+```bash
+python scripts/gemini_batch_process.py \
+  --files docs/inspiration/reference-design.png \
+  --task analyze \
+  --prompt "[see extraction-prompts.md for detailed prompt]" \
+  --output docs/design-guidelines/extracted-design-system.md \
+  --model gemini-2.5-flash
+```
+
+### Multi-Screen System Extraction
+```bash
+python scripts/gemini_batch_process.py \
+  --files docs/inspiration/home.png docs/inspiration/about.png \
+  --task analyze \
+  --prompt "[see extraction-prompts.md for multi-screen prompt]" \
+  --output docs/design-guidelines/complete-design-system.md \
+  --model gemini-2.5-flash
+```
+
+### Video Motion Analysis
+```bash
+python scripts/gemini_batch_process.py \
+  --files docs/inspiration/interaction-demo.mp4 \
+  --task analyze \
+  --prompt "[see extraction-prompts.md for motion prompt]" \
+  --output docs/design-guidelines/motion-system.md \
+  --model gemini-2.5-flash
+```
+
+### Competitive Analysis
+```bash
+python scripts/gemini_batch_process.py \
+  --files competitor-a.png competitor-b.png competitor-c.png \
+  --task analyze \
+  --prompt "[see extraction-prompts.md for competitive prompt]" \
+  --output docs/design-guidelines/competitive-analysis.md \
+  --model gemini-2.5-flash
+```
+
+## Detailed References
+
+- `extraction-prompts.md` - All extraction prompt templates
+- `extraction-best-practices.md` - Capture quality, analysis tips
+- `extraction-output-templates.md` - Documentation formats
+
+## Integration
+
+After extraction, use guidelines with `asset-generation.md` for generating design-aligned visual assets.

package/skills/frontend-design/references/extraction-best-practices.md

@@ -0,0 +1,141 @@
+# Extraction Best Practices
+
+Guidelines for capturing and analyzing design references effectively.
+
+## Capture Quality Guidelines
+
+### Screenshot Requirements
+- High-resolution (minimum 1920px wide for desktop)
+- Accurate color reproduction (disable browser extensions that alter colors)
+- Actual viewport size, not full-page scrolls
+- Device-specific resolutions (desktop 1920x1080, mobile 390x844)
+- Multiple states: default, hover, active, responsive breakpoints
+
+### Multiple Examples
+- Analyze 3-5 screens minimum for pattern recognition
+- Include different page types (home, product, about, contact)
+- Single screenshots miss patterns
+- Capture from same site to identify consistency
+
+## Analysis Best Practices
+
+### 1. Demand Specifics
+❌ Accept: "Uses blue and gray colors"
+✓ Demand: "Primary: #1E40AF, Secondary: #6B7280, Accent: #F59E0B"
+
+❌ Accept: "Modern sans-serif font"
+✓ Demand: "Inter, weight 600, 48px for h1, tracking -0.02em"
+
+### 2. Document Rationale
+Understand *why* design decisions work, not just *what* they are:
+- Why does this color palette create trust?
+- Why does this spacing scale improve readability?
+- Why does this typography hierarchy guide user attention?
+
+### 3. Create Actionable Guidelines
+Output should be directly implementable in code:
+
+```css
+/* Immediately usable CSS from extraction */
+:root {
+  --font-display: 'Bebas Neue', sans-serif;
+  --font-body: 'Inter', sans-serif;
+
+  --color-primary-600: #1E40AF;
+  --color-accent-500: #F59E0B;
+
+  --spacing-xs: 4px;
+  --spacing-sm: 8px;
+  --spacing-md: 16px;
+  --spacing-lg: 24px;
+
+  --radius-sm: 4px;
+  --radius-md: 8px;
+
+  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
+  --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
+}
+```
+
+### 4. Cross-Reference
+- Validate font predictions against Google Fonts library
+- Use font identification tools (WhatFont, Font Ninja) for accuracy
+- Manually verify extracted colors with eyedropper tools
+
+### 5. Iterate Analysis
+First pass may miss subtleties:
+- Run initial comprehensive analysis
+- Review output, identify gaps
+- Run focused follow-up queries for specific elements
+
+## Advanced Techniques
+
+### Design System Mining
+Extract complete design system from single brand (10+ screens):
+
+```bash
+python scripts/gemini_batch_process.py \
+  --files docs/inspiration/brand/*.png \
+  --task analyze \
+  --prompt "Extract complete, production-ready design system:
+- All color tokens (20+ colors)
+- All typography specs (sizes, weights, line-heights)
+- All spacing tokens
+- All component variants
+- All animation timings
+Output as CSS variables ready for implementation." \
+  --output docs/design-guidelines/brand-design-system.md \
+  --model gemini-2.5-flash
+```
+
+### Trend Analysis
+Analyze multiple top designs to identify current trends:
+
+```bash
+python scripts/gemini_batch_process.py \
+  --files docs/inspiration/awwwards-*.png \
+  --task analyze \
+  --prompt "Trend analysis across 10 award-winning designs:
+1. Dominant aesthetic movements
+2. Common color strategies
+3. Typography trends
+4. Layout innovations
+5. Animation patterns
+Identify what's trending in 2024 web design." \
+  --output docs/design-guidelines/trend-analysis.md \
+  --model gemini-2.5-flash
+```
+
+### Historical Evolution
+Track design evolution of single brand over time:
+
+```bash
+python scripts/gemini_batch_process.py \
+  --files docs/inspiration/brand-2020.png docs/inspiration/brand-2024.png \
+  --task analyze \
+  --prompt "Compare 2020 vs 2024 design evolution:
+1. What changed and why
+2. What remained consistent (brand identity)
+3. How trends influenced changes
+4. Lessons for our design evolution" \
+  --output docs/design-guidelines/evolution-analysis.md \
+  --model gemini-2.5-flash
+```
+
+## Common Pitfalls
+
+### ❌ Surface-Level Analysis
+"Uses blue colors and sans-serif fonts"
+**Fix**: Demand specifics—hex codes, font names, size values
+
+### ❌ Missing Context
+Extracting design without understanding target audience or purpose
+**Fix**: Research brand context before analysis
+
+### ❌ Blind Copying
+Extracting and applying design 1:1 to your project
+**Fix**: Extract principles, adapt to your unique context
+
+### ❌ Single Source
+Learning from one example only
+**Fix**: Analyze 3-5 examples to identify patterns vs. anomalies

package/skills/frontend-design/references/extraction-output-templates.md

@@ -0,0 +1,162 @@
+# Extraction Output Templates
+
+Documentation format templates for extracted design guidelines.
+
+## Template 1: Complete Design System
+
+```markdown
+# [Project/Competitor] Design System
+
+## Aesthetic Direction
+- **Style**: Neo-brutalism with organic elements
+- **Mood**: Bold, confident, approachable
+- **Differentiation**: High contrast typography with soft color accents
+
+## Typography
+### Display Font
+- Family: Archivo Black (Google Fonts)
+- Sizes: h1: 72px, h2: 48px, h3: 36px
+- Weights: 400 (regular)
+- Line Height: 1.1
+- Letter Spacing: -0.02em
+
+### Body Font
+- Family: Inter (Google Fonts)
+- Sizes: body: 16px, small: 14px
+- Weights: 400, 500, 600
+- Line Height: 1.6
+- Letter Spacing: 0
+
+## Color Palette
+\```css
+:root {
+  /* Primary Colors */
+  --color-primary-900: #0A1628;
+  --color-primary-600: #1E40AF;
+  --color-primary-400: #60A5FA;
+
+  /* Accent Colors */
+  --color-accent-500: #F59E0B;
+  --color-accent-300: #FCD34D;
+
+  /* Neutral Colors */
+  --color-neutral-900: #111827;
+  --color-neutral-700: #374151;
+  --color-neutral-500: #6B7280;
+  --color-neutral-300: #D1D5DB;
+  --color-neutral-100: #F3F4F6;
+
+  /* Background */
+  --color-bg-primary: #FFFFFF;
+  --color-bg-secondary: #F9FAFB;
+}
+\```
+
+## Spacing System
+- Base: 4px
+- Scale: 4, 8, 12, 16, 24, 32, 48, 64, 96px
+- Usage: Consistent 8px rhythm for most components
+
+## Component Specifications
+
+### Button (Primary)
+\```css
+.button-primary {
+  background: var(--color-primary-600);
+  color: white;
+  padding: 12px 24px;
+  border-radius: 8px;
+  font-weight: 600;
+  transition: background 200ms ease-out;
+}
+.button-primary:hover {
+  background: var(--color-primary-900);
+}
+\```
+
+### Card
+\```css
+.card {
+  background: white;
+  border-radius: 12px;
+  padding: 24px;
+  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
+  transition: box-shadow 200ms ease-out;
+}
+.card:hover {
+  box-shadow: 0 10px 15px rgba(0,0,0,0.1);
+}
+\```
+
+## Motion Guidelines
+- Transition timing: 200ms for micro-interactions, 400ms for page transitions
+- Easing: ease-out for entrances, ease-in for exits
+- Stagger delay: 50ms between sequential elements
+```
+
+## Template 2: Competitive Analysis
+
+```markdown
+# Competitive Design Analysis
+
+## Competitors Analyzed
+1. Competitor A - [URL]
+2. Competitor B - [URL]
+3. Competitor C - [URL]
+
+## Comparative Summary
+
+| Aspect | Competitor A | Competitor B | Competitor C |
+|--------|--------------|--------------|--------------|
+| Aesthetic | Minimalist | Maximalist | Editorial |
+| Primary Color | #1E40AF | #7C3AED | #DC2626 |
+| Typography | Inter | Poppins | Playfair Display |
+| Layout | Grid-based | Asymmetric | Magazine |
+
+## Common Patterns (Industry Standard)
+- All use sans-serif for body text
+- All prioritize mobile-first responsive design
+- All use card-based layouts for content
+- All feature hero sections with large imagery
+
+## Differentiation Opportunities
+1. **Color Strategy**: Competitors use saturated colors; opportunity for muted, sophisticated palette
+2. **Typography**: No one uses display serifs; opportunity for elegant, high-end feel
+3. **Layout**: All symmetric; opportunity for asymmetric, dynamic composition
+
+## Recommendations
+Based on analysis, recommend:
+- Aesthetic: Refined minimalism with editorial typography
+- Color: Muted earth tones with one bold accent
+- Layout: Asymmetric grid with generous white space
+- Differentiation: Unexpected typography hierarchy, subtle animations
+```
+
+## Integration Workflow
+
+### After Extraction
+
+1. **Review & Validate**
+   - Manually verify color codes with eyedropper tool
+   - Cross-reference font predictions against Google Fonts
+   - Check spacing values against browser dev tools
+
+2. **Adapt & Customize**
+   - Don't copy—adapt principles to your unique context
+   - Maintain underlying logic, change expression
+   - Example: Extract "generous white space" principle, apply with your colors
+
+3. **Document Decisions**
+   - Save extracted guidelines in project `docs/design-guidelines/`
+   - Create design system spec from extraction
+   - Reference when generating new assets
+
+4. **Reference in Implementation**
+   - Use extracted tokens when generating new assets with `asset-generation.md`
+   - Apply extracted principles when analyzing your own designs with `visual-analysis.md`
+   - Maintain consistency between inspiration and implementation
+
+5. **Iterate & Refine**
+   - Update guidelines as design evolves
+   - Extract from multiple sources, synthesize learnings
+   - Create your own unique voice from combined insights

package/skills/frontend-design/references/extraction-prompts.md

@@ -0,0 +1,127 @@
+# Extraction Prompt Templates
+
+Complete prompt templates for design guideline extraction.
+
+## Comprehensive Design Analysis Prompt
+
+```
+Extract comprehensive design guidelines from this interface:
+
+## Aesthetic Identification
+- Design Style: Identify the aesthetic movement (minimalism, brutalism, maximalism, glassmorphism, neo-brutalism, organic, luxury, editorial, etc.)
+- Overall Mood: Professional, playful, serious, energetic, calm, bold, refined
+- Differentiation Factor: What makes this design memorable and distinctive?
+
+## Typography System
+- Display Font: Predict font family (favor Google Fonts: Playfair Display, Bebas Neue, DM Serif, Archivo Black, etc.). Provide 2-3 alternatives if uncertain.
+- Body Font: Identify or suggest similar alternatives
+- Font Sizes: Estimate in px for h1, h2, h3, body, small text
+- Font Weights: Used weights (300, 400, 500, 600, 700)
+- Line Heights: Estimate leading ratios
+- Letter Spacing: Tight, normal, or wide tracking
+
+## Color System (CRITICAL)
+- Extract 8-12 distinct colors with accurate hex codes
+- Classify: Primary (1-2), Secondary (1-2), Accent (2-3), Neutral/Gray (3-5), Background (1-2)
+- Note color relationships and usage patterns
+- Identify gradients (provide start/end hex codes and direction)
+
+## Spatial Composition
+- Layout Type: Grid-based, asymmetric, centered, multi-column, magazine-style
+- Grid System: Estimate column count and gutter widths
+- Spacing Scale: Identify spacing rhythm (4px, 8px, 16px, 24px, etc.)
+- White Space Strategy: Generous, tight, varied
+- Section Hierarchy: How content is organized and prioritized
+
+## Visual Elements
+- Border Styles: Radius values (sharp, subtle rounded, fully rounded)
+- Shadows: Box-shadow characteristics (elevation, spread, blur)
+- Backgrounds: Solid, gradients, patterns, textures, images
+- Effects: Blur, overlays, transparency, grain, noise
+- Decorative Elements: Lines, shapes, illustrations, icons
+
+## Component Patterns
+- Button Styles: Shape, size, states, hover effects
+- Card Design: Borders, shadows, padding, content structure
+- Navigation: Style, position, behavior
+- Forms: Input styles, validation, spacing
+- Interactive Elements: Hover states, transitions
+
+## Motion & Animation (if video)
+- Transition Timing: Fast (100-200ms), medium (200-400ms), slow (400-600ms+)
+- Easing Functions: Linear, ease-out, ease-in, cubic-bezier specifics
+- Animation Types: Fade, slide, scale, rotate, stagger
+- Scroll Interactions: Parallax, reveal-on-scroll, sticky elements
+
+## Accessibility Considerations
+- Color Contrast: Evaluate text/background combinations
+- Font Sizes: Minimum sizes used
+- Interactive Targets: Button/link sizes
+- Visual Hierarchy: Clear content prioritization
+
+## Design Highlights
+- Top 3 standout design decisions
+- What makes this design effective
+- Potential improvements or considerations
+
+Output as structured markdown for easy reference.
+```
+
+## Multi-Screen System Extraction Prompt
+
+```
+Analyze these multiple screens to extract the consistent design system:
+
+For each screen:
+1. Identify consistent design tokens (colors, typography, spacing)
+2. Note variations and their rationale
+3. Extract reusable component patterns
+
+Then synthesize:
+- Core design system: Consistent colors, fonts, spacing scales
+- Component library: Buttons, cards, navigation, forms
+- Layout patterns: Grid systems, responsive behavior
+- Visual language: Shared aesthetic principles
+- Design tokens: Create CSS variable recommendations
+
+Provide as a unified design system specification.
+```
+
+## Motion Design Extraction Prompt
+
+```
+Analyze this video to extract motion design guidelines:
+
+1. Transition Timing: Measure duration of key animations (in ms)
+2. Easing Curves: Describe acceleration/deceleration (ease-in, ease-out, spring)
+3. Animation Types: List all animation styles used
+4. Micro-interactions: Button hovers, form focus states, feedback
+5. Page Transitions: How screens change
+6. Scroll Interactions: Parallax, sticky headers, reveal animations
+7. Loading States: Skeleton screens, spinners, progressive reveals
+8. Stagger Effects: Sequential animation delays and patterns
+
+Provide implementable specifications with timing values.
+```
+
+## Competitive Analysis Prompt
+
+```
+Comparative design analysis of 3 competitors:
+
+For each competitor:
+1. Design style and aesthetic approach
+2. Color strategy and brand perception
+3. Typography choices and hierarchy
+4. Layout and information architecture
+5. Unique design elements
+6. Strengths and weaknesses
+
+Synthesis:
+- Common industry patterns (what everyone does)
+- Differentiation opportunities (gaps to exploit)
+- Best practices observed (proven approaches)
+- Design recommendations (how to stand out)
+
+Provide strategic design direction based on analysis.
+```