@auto-engineer/react-gen 1.134.0

package/dist/skills/design/references/design-routing.md

@@ -0,0 +1,207 @@
+# Design Routing Guide
+
+When to use each design sub-skill.
+
+## Skill Overview
+
+| Skill | Purpose | Key Files |
+|-------|---------|-----------|
+| brand | Brand identity, voice, assets | SKILL.md + 10 references + 3 scripts |
+| design-system | Token architecture, specs | SKILL.md + 7 references + 2 scripts |
+| ui-styling | Component implementation | SKILL.md + 7 references + 2 scripts |
+| logo-design | AI logo generation (55 styles, 30 palettes) | SKILL.md + 4 references + 2 scripts |
+| cip-design | Corporate Identity Program (50 deliverables) | SKILL.md + 3 references + 3 scripts |
+| slides | HTML presentations with Chart.js | SKILL.md + 4 references |
+| banner-design | Banners for social, ads, web, print (22 styles) | SKILL.md + 1 reference |
+| icon-design | SVG icon generation (15 styles, Gemini 3.1 Pro) | SKILL.md + 1 reference + 1 script |
+
+## Routing by Task Type
+
+### Brand Identity Tasks
+**→ brand**
+
+- Define brand colors and typography
+- Create logo usage guidelines
+- Establish brand voice and tone
+- Organize and validate assets
+- Create messaging frameworks
+- Audit brand consistency
+
+### Token System Tasks
+**→ design-system**
+
+- Create design tokens JSON
+- Generate CSS variables
+- Define component specifications
+- Map tokens to Tailwind config
+- Validate token usage in code
+- Document state and variants
+
+### Implementation Tasks
+**→ ui-styling**
+
+- Add shadcn/ui components
+- Style with Tailwind classes
+- Implement dark mode
+- Create responsive layouts
+- Build accessible components
+
+### Logo Design Tasks
+**→ logo-design**
+
+- Create logos with AI (Gemini Nano Banana)
+- Search logo styles, color palettes, industry guidelines
+- Generate design briefs
+- Explore 55+ styles (minimalist, vintage, luxury, geometric, etc.)
+
+### Corporate Identity Program Tasks
+**→ cip-design**
+
+- Generate CIP deliverables (business cards, letterheads, signage, vehicles, apparel)
+- Create CIP briefs with industry/style analysis
+- Generate mockups with/without logo (Gemini Flash/Pro)
+- Render HTML presentations from CIP mockups
+
+### Presentation Tasks
+**→ slides**
+
+- Create strategic HTML presentations
+- Data visualization with Chart.js
+- Apply copywriting formulas to slide content
+- Use layout patterns and design tokens
+
+### Banner Design Tasks
+**→ banner-design**
+
+- Design banners for social media (Facebook, Twitter, LinkedIn, YouTube, Instagram)
+- Create ad banners (Google Ads, Meta Ads)
+- Website hero banners and headers
+- Print banners and covers
+- 22 art direction styles (minimalist, bold typography, gradient, glassmorphism, etc.)
+
+### Icon Design Tasks
+**→ icon-design**
+
+- Generate SVG icons with AI (Gemini 3.1 Pro Preview)
+- Batch icon variations in multiple styles
+- Multi-size export (16px, 24px, 32px, 48px)
+- 15 styles: outlined, filled, duotone, rounded, sharp, gradient, etc.
+- 12 categories: navigation, action, communication, media, commerce, data
+
+## Routing by Question Type
+
+| Question | Skill |
+|----------|-------|
+| "What color should this be?" | brand |
+| "How do I create a token for X?" | design-system |
+| "How do I build a button component?" | ui-styling |
+| "Is this on-brand?" | brand |
+| "Should I use a CSS variable here?" | design-system |
+| "How do I add dark mode?" | ui-styling |
+| "Create a logo for my brand" | logo-design |
+| "Generate business card mockups" | cip-design |
+| "Create a pitch deck" | slides |
+| "Design brand identity package" | cip-design |
+| "What logo style fits my industry?" | logo-design |
+| "Design a Facebook cover" | banner-design |
+| "Create ad banners for Google" | banner-design |
+| "Make a website hero banner" | banner-design |
+| "Generate a settings icon" | icon-design |
+| "Create SVG icons for my app" | icon-design |
+| "Design an icon set" | icon-design |
+
+## Multi-Skill Workflows
+
+### New Project Setup
+
+```
+1. brand → Define identity
+   - Colors, typography, voice
+
+2. design-system → Create tokens
+   - Primitive, semantic, component
+
+3. ui-styling → Implement
+   - Configure Tailwind, add components
+```
+
+### Design System Migration
+
+```
+1. brand → Audit existing
+   - Extract brand colors, fonts
+
+2. design-system → Formalize tokens
+   - Create three-layer architecture
+
+3. ui-styling → Update code
+   - Replace hardcoded values
+```
+
+### Component Creation
+
+```
+1. design-system → Reference specs
+   - Button states, sizes, variants
+
+2. ui-styling → Implement
+   - Build with shadcn/ui + Tailwind
+```
+
+## Skill Dependencies
+
+```
+brand
+    ↓ (colors, typography)
+design-system
+    ↓ (tokens, specs)
+ui-styling
+    ↓ (components)
+Application Code
+```
+
+## Quick Commands
+
+**Brand:**
+```bash
+node .claude/skills/brand/scripts/inject-brand-context.cjs
+node .claude/skills/brand/scripts/validate-asset.cjs <path>
+```
+
+**Tokens:**
+```bash
+node .claude/skills/design-system/scripts/generate-tokens.cjs -c tokens.json
+node .claude/skills/design-system/scripts/validate-tokens.cjs -d src/
+```
+
+**Components:**
+```bash
+npx shadcn@latest add button card input
+```
+
+## When to Use Multiple Skills
+
+Use **all eight** when:
+- Complete brand package from scratch (logo → CIP → presentation)
+
+Use **brand + design-system + ui-styling** when:
+- Design system setup and implementation
+
+Use **logo-design + cip-design** when:
+- Complete brand identity package with deliverable mockups
+
+Use **logo-design + cip-design + slides** when:
+- Brand pitch: generate logo, create CIP mockups, build pitch deck
+
+Use **banner-design + brand** when:
+- Social media presence: branded banners across all platforms
+
+Use **icon-design + design-system** when:
+- Custom icon set matching design tokens and component specs
+
+Use **brand + design-system** when:
+- Defining design language without implementation
+
+Use **design-system + ui-styling** when:
+- Implementing existing brand in code
+- Building component library

package/dist/skills/design/references/icon-design.md

@@ -0,0 +1,122 @@
+# Icon Design Reference
+
+AI-powered SVG icon generation using Gemini 3.1 Pro Preview. 15 styles, 12 categories, multi-size export.
+
+## Scripts
+
+| Script | Purpose |
+|--------|---------|
+| `scripts/icon/generate.py` | Generate SVG icons with Gemini 3.1 Pro Preview |
+
+## Commands
+
+### Generate Single Icon
+
+```bash
+python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "settings gear" --style outlined
+python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "shopping cart" --style filled --color "#6366F1"
+python3 ~/.claude/skills/design/scripts/icon/generate.py --name "dashboard" --category navigation --style duotone
+```
+
+### Generate Batch Variations
+
+```bash
+python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "cloud upload" --batch 4 --output-dir ./icons
+python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "notification bell" --batch 6 --style outlined --output-dir ./icons
+```
+
+### Generate Multiple Sizes
+
+```bash
+python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "user profile" --sizes "16,24,32,48" --output-dir ./icons
+```
+
+### List Styles/Categories
+
+```bash
+python3 ~/.claude/skills/design/scripts/icon/generate.py --list-styles
+python3 ~/.claude/skills/design/scripts/icon/generate.py --list-categories
+```
+
+## CLI Options
+
+| Option | Description | Default |
+|--------|-------------|---------|
+| `--prompt, -p` | Icon description | required |
+| `--name, -n` | Icon name (for filename) | - |
+| `--style, -s` | Icon style (15 options) | - |
+| `--category, -c` | Icon category for context | - |
+| `--color` | Primary hex color | currentColor |
+| `--size` | Display size in px | 24 |
+| `--viewbox` | SVG viewBox size | 24 |
+| `--output, -o` | Output file path | auto |
+| `--output-dir` | Output directory (batch) | ./icons |
+| `--batch` | Number of variations | - |
+| `--sizes` | Comma-separated sizes | - |
+
+## Available Styles
+
+| Style | Stroke | Fill | Best For |
+|-------|--------|------|----------|
+| outlined | 2px | none | UI interfaces, web apps |
+| filled | 0 | solid | Mobile apps, nav bars |
+| duotone | 0 | dual | Marketing, landing pages |
+| thin | 1-1.5px | none | Luxury brands, editorial |
+| bold | 3px | none | Headers, hero sections |
+| rounded | 2px | none | Friendly apps, health |
+| sharp | 2px | none | Tech, fintech, enterprise |
+| flat | 0 | solid | Material design, Google-style |
+| gradient | 0 | gradient | Modern brands, SaaS |
+| glassmorphism | 1px | semi | Modern UI, overlays |
+| pixel | 0 | solid | Gaming, retro |
+| hand-drawn | varies | none | Artisan, creative |
+| isometric | 1-2px | partial | Tech docs, infographics |
+| glyph | 0 | solid | System UI, compact |
+| animated-ready | 2px | varies | Interactive UI, onboarding |
+
+## Icon Categories
+
+| Category | Icons |
+|----------|-------|
+| navigation | arrows, menus, home, chevrons |
+| action | edit, delete, save, download, upload |
+| communication | email, chat, phone, notification |
+| media | play, pause, volume, camera |
+| file | document, folder, archive, cloud |
+| user | person, group, profile, settings |
+| commerce | cart, bag, wallet, credit card |
+| data | chart, graph, analytics, dashboard |
+| development | code, terminal, bug, git, API |
+| social | heart, star, bookmark, trophy |
+| weather | sun, moon, cloud, rain |
+| map | pin, location, compass, globe |
+
+## SVG Best Practices
+
+- **ViewBox**: Use `0 0 24 24` (standard) or `0 0 16 16` (compact)
+- **Colors**: Use `currentColor` for CSS inheritance, avoid hardcoded colors
+- **Accessibility**: Always include `<title>` element
+- **Optimization**: Minimal path nodes, no embedded fonts or raster images
+- **Sizing**: Design at 24px, test at 16px and 48px for clarity
+- **Stroke**: Use `stroke-linecap="round"` and `stroke-linejoin="round"` for outlined styles
+
+## Model
+
+- **gemini-3.1-pro-preview**: Best thinking, token efficiency, factual consistency
+- Text-only output (SVG is XML text) — no image generation API needed
+- Supports structured output for consistent SVG formatting
+
+## Workflow
+
+1. Describe icon → `--prompt "settings gear"`
+2. Choose style → `--style outlined`
+3. Generate → script outputs .svg file
+4. Optionally batch → `--batch 4` for variations
+5. Multi-size export → `--sizes "16,24,32,48"`
+
+## Setup
+
+```bash
+export GEMINI_API_KEY="your-key"
+pip install google-genai
+```

package/dist/skills/design/references/logo-color-psychology.md

@@ -0,0 +1,101 @@
+# Logo Color Psychology
+
+## Primary Color Meanings
+
+### Blue
+- **Psychology:** Trust, stability, professionalism, calm
+- **Industries:** Finance, healthcare, tech, corporate
+- **Hex Examples:** Navy #003366, Royal #0055A4, Sky #0EA5E9
+- **Pairings:** White, gold, light gray
+
+### Red
+- **Psychology:** Energy, passion, urgency, excitement
+- **Industries:** Food, sports, entertainment, sales
+- **Hex Examples:** Crimson #DC2626, Scarlet #EF4444, Burgundy #9F1239
+- **Pairings:** White, black, gold
+- **Caution:** Avoid for healthcare (blood connotation)
+
+### Green
+- **Psychology:** Growth, nature, health, sustainability
+- **Industries:** Eco, wellness, organic, finance (growth)
+- **Hex Examples:** Forest #228B22, Sage #2E8B57, Mint #10B981
+- **Pairings:** White, brown, blue
+
+### Yellow/Gold
+- **Psychology:** Optimism, warmth, luxury, attention
+- **Industries:** Food, children, luxury (gold), energy
+- **Hex Examples:** Gold #D4AF37, Amber #F59E0B, Lemon #FACC15
+- **Pairings:** Black, navy, dark brown
+
+### Purple
+- **Psychology:** Creativity, wisdom, luxury, mystery
+- **Industries:** Beauty, creative, spiritual, premium
+- **Hex Examples:** Royal #7C3AED, Lavender #A78BFA, Deep #581C87
+- **Pairings:** Gold, white, pink
+
+### Orange
+- **Psychology:** Friendly, energetic, confident, youthful
+- **Industries:** Food, sports, entertainment, retail
+- **Hex Examples:** Tangerine #F97316, Coral #FB923C, Burnt #EA580C
+- **Pairings:** White, navy, dark gray
+
+### Black
+- **Psychology:** Sophistication, power, elegance, authority
+- **Industries:** Luxury, fashion, tech, premium
+- **Pairings:** White, gold, silver
+- **Note:** Use for high-end positioning
+
+### White
+- **Psychology:** Purity, simplicity, cleanliness, modern
+- **Use:** Backgrounds, negative space, contrast
+- **Pairings:** Any color (universal neutral)
+
+## Color Combinations by Industry
+
+| Industry | Primary | Secondary | Accent | Avoid |
+|----------|---------|-----------|--------|-------|
+| Tech | Blue, Purple | Gray, White | Teal, Green | Brown, Beige |
+| Healthcare | Blue, Green | Teal, White | Light Purple | Red, Black |
+| Finance | Navy, Blue | Gold, Gray | Green | Bright colors |
+| Food | Red, Orange | Yellow, Brown | Green | Blue (appetite suppressant) |
+| Fashion | Black, White | Gold, Blush | Navy | Neon (unless intentional) |
+| Eco | Green, Brown | Beige, Blue | Yellow | Neon, Black |
+| Children | Multi-color | Pastels | Bright accents | Dark, muted |
+
+## Color Harmony Types
+
+### Monochromatic
+Single color with tints/shades. Safe, cohesive.
+
+### Complementary
+Opposite colors (blue-orange). High contrast, vibrant.
+
+### Analogous
+Adjacent colors (blue-teal-green). Harmonious, natural.
+
+### Triadic
+Three evenly spaced colors. Balanced, dynamic.
+
+## Accessibility Considerations
+
+- Minimum contrast ratio: 4.5:1 (WCAG AA)
+- Avoid red-green only indicators
+- Test in grayscale for clarity
+- Consider colorblind users (~8% of males)
+
+## Quick Reference Palettes
+
+**Tech Professional:**
+Primary: #6366F1 | Secondary: #8B5CF6 | Accent: #06B6D4
+
+**Eco Sustainable:**
+Primary: #228B22 | Secondary: #2E8B57 | Accent: #DEB887
+
+**Luxury Premium:**
+Primary: #1C1917 | Secondary: #D4AF37 | Accent: #FFFFFF
+
+**Healthcare Trust:**
+Primary: #0077B6 | Secondary: #00A896 | Accent: #FFFFFF
+
+**Food Warm:**
+Primary: #DC2626 | Secondary: #F97316 | Accent: #CA8A04

package/dist/skills/design/references/logo-design.md

@@ -0,0 +1,92 @@
+# Logo Design Reference
+
+AI-powered logo design with 55+ styles, 30 color palettes, 25 industry guides. Uses Gemini Nano Banana models.
+
+## Scripts
+
+| Script | Purpose |
+|--------|---------|
+| `scripts/logo/search.py` | Search styles, colors, industries; generate design briefs |
+| `scripts/logo/generate.py` | Generate logos with Gemini Nano Banana |
+| `scripts/logo/core.py` | BM25 search engine for logo data |
+
+## Commands
+
+### Design Brief (Start Here)
+
+```bash
+python3 ~/.claude/skills/design/scripts/logo/search.py "tech startup modern" --design-brief -p "BrandName"
+```
+
+### Search Domains
+
+```bash
+# Styles
+python3 ~/.claude/skills/design/scripts/logo/search.py "minimalist clean" --domain style
+
+# Color palettes
+python3 ~/.claude/skills/design/scripts/logo/search.py "tech professional" --domain color
+
+# Industry guidelines
+python3 ~/.claude/skills/design/scripts/logo/search.py "healthcare medical" --domain industry
+```
+
+### Generate Logo
+
+**ALWAYS** use white background for output logos.
+
+```bash
+python3 ~/.claude/skills/design/scripts/logo/generate.py --brand "TechFlow" --style minimalist --industry tech
+python3 ~/.claude/skills/design/scripts/logo/generate.py --prompt "coffee shop vintage badge" --style vintage
+```
+
+Options: `--style`, `--industry`, `--prompt`
+
+## Available Styles
+
+| Category | Styles |
+|----------|--------|
+| General | Minimalist, Wordmark, Lettermark, Pictorial Mark, Abstract Mark, Mascot, Emblem, Combination Mark |
+| Aesthetic | Vintage/Retro, Art Deco, Luxury, Playful, Corporate, Organic, Neon, Grunge, Watercolor |
+| Modern | Gradient, Flat Design, 3D/Isometric, Geometric, Line Art, Duotone, Motion-Ready |
+| Clever | Negative Space, Monoline, Split/Fragmented, Responsive/Adaptive |
+
+## Color Psychology
+
+| Color | Psychology | Best For |
+|-------|------------|----------|
+| Blue | Trust, stability | Finance, tech, healthcare |
+| Green | Growth, natural | Eco, wellness, organic |
+| Red | Energy, passion | Food, sports, entertainment |
+| Gold | Luxury, premium | Fashion, jewelry, hotels |
+| Purple | Creative, innovative | Beauty, creative, tech |
+
+## Industry Defaults
+
+| Industry | Style | Colors | Typography |
+|----------|-------|--------|------------|
+| Tech | Minimalist, Abstract | Blues, purples, gradients | Geometric sans |
+| Healthcare | Professional, Line Art | Blues, greens, teals | Clean sans |
+| Finance | Corporate, Emblem | Navy, gold | Serif or clean sans |
+| Food | Vintage Badge, Mascot | Warm reds, oranges | Friendly, script |
+| Fashion | Wordmark, Luxury | Black, gold, white | Elegant serif |
+
+## Workflow
+
+1. Generate design brief → `scripts/logo/search.py --design-brief`
+2. Generate logo variations → `scripts/logo/generate.py --brand --style --industry`
+3. Ask user about HTML preview → `AskUserQuestion` tool
+4. If yes, invoke `/ui-ux-pro-max` for HTML gallery
+
+## Detailed References
+
+- `references/logo-style-guide.md` - Detailed style descriptions
+- `references/logo-color-psychology.md` - Color meanings and combinations
+- `references/logo-prompt-engineering.md` - AI generation prompts
+
+## Setup
+
+```bash
+export GEMINI_API_KEY="your-key"
+pip install google-genai
+```

package/dist/skills/design/references/logo-prompt-engineering.md

@@ -0,0 +1,158 @@
+# Logo AI Prompt Engineering
+
+## Core Prompt Structure
+
+```
+Professional logo design for [brand/industry]:
+[Visual description]
+Style: [style keywords]
+Colors: [color palette]
+Requirements: [technical specs]
+```
+
+## Effective Keywords by Style
+
+### Minimalist
+```
+minimalist, clean lines, simple geometric shapes, essential elements only,
+high white space, flat design, single color, modern, uncluttered,
+negative space, subtle, refined
+```
+
+### Vintage/Retro
+```
+vintage, retro, heritage, established, classic, nostalgic, weathered,
+distressed texture, badge style, hand-lettered, craft, artisan,
+sepia tones, muted colors, aged paper effect
+```
+
+### Luxury/Premium
+```
+luxury, elegant, sophisticated, premium, refined, exclusive, high-end,
+gold accents, metallic, minimal, tasteful, upscale, prestige,
+thin lines, serif typography, foil effect
+```
+
+### Modern/Tech
+```
+modern, innovative, digital, tech-forward, sleek, futuristic,
+gradient colors, geometric, abstract, dynamic, cutting-edge,
+clean sans-serif, circuit-like, data visualization
+```
+
+### Playful/Fun
+```
+playful, fun, colorful, friendly, approachable, cheerful, whimsical,
+bouncy, rounded shapes, bright colors, cartoon-like, energetic,
+bubbly, hand-drawn elements
+```
+
+### Organic/Natural
+```
+organic, natural, flowing, botanical, eco-friendly, sustainable,
+earth tones, leaf elements, hand-drawn, imperfect lines, growth,
+green, nature-inspired, biophilic
+```
+
+## Negative Prompts (What to Avoid)
+
+Always include to prevent unwanted results:
+```
+NOT: photorealistic, 3D render with realistic textures, photograph,
+stock image, clip art, multiple logos, busy background, text watermarks,
+low quality, blurry, distorted, complex detailed patterns
+```
+
+## Industry-Specific Prompts
+
+### Tech Startup
+```
+Modern tech company logo, abstract geometric mark, gradient blue to purple,
+clean minimal design, innovative feel, scalable vector style,
+professional quality, silicon valley aesthetic
+```
+
+### Healthcare
+```
+Healthcare medical logo, clean professional design, cross or heart symbol,
+calming blue and teal colors, trustworthy appearance, caring feel,
+simple scalable mark, HIPAA-appropriate conservative style
+```
+
+### Restaurant/Food
+```
+Restaurant logo, warm inviting colors, appetizing feel, vintage badge style,
+chef or utensil iconography, friendly welcoming design, rustic charm,
+established look, readable at small sizes
+```
+
+### Fashion Brand
+```
+Fashion brand logo, elegant sophisticated wordmark, luxury aesthetic,
+black and gold color scheme, thin refined typography, haute couture feel,
+minimal exclusive design, high-end positioning
+```
+
+### Eco/Sustainable
+```
+Eco-friendly sustainable brand logo, organic natural elements, leaf motif,
+earth green and brown colors, growth symbolism, environmental awareness,
+clean modern yet natural feel, recyclable-look design
+```
+
+## Technical Requirements to Include
+
+### Scalability
+```
+vector-style, scalable at any size, clear silhouette,
+works as favicon, recognizable small scale, simple shapes
+```
+
+### Versatility
+```
+works on light and dark backgrounds, single color version possible,
+horizontal and stacked layouts, brand mark can stand alone
+```
+
+### Quality
+```
+professional quality, print-ready, high resolution,
+crisp edges, balanced composition, centered design
+```
+
+## Prompt Templates
+
+### Quick Generation
+```
+Professional [industry] logo, [style] design, [color] colors,
+clean modern aesthetic, scalable vector style
+```
+
+### Detailed Brief
+```
+Professional logo design for [brand name], a [industry] company.
+
+Visual style: [style keywords]
+Primary colors: [hex codes]
+Mood: [emotional keywords]
+Symbols: [iconography hints]
+
+Technical: Vector-style illustration, scalable, works in single color,
+centered on plain background, no text unless specified.
+```
+
+### Variation Request
+```
+Alternative version of [brand] logo:
+Keep: [elements to preserve]
+Change: [elements to modify]
+Style direction: [new style keywords]
+```
+
+## Common Pitfalls
+
+1. **Too detailed** - AI generates complexity; request "simple"
+2. **Unclear background** - Specify "plain white background"
+3. **Text issues** - AI struggles with text; generate mark separately
+4. **Wrong aspect** - Specify "1:1 square" or "horizontal"
+5. **Realistic style** - Add "illustration, vector-style, not photorealistic"