@oriro/orirocli 0.1.0

package/skills/craft/uipm-design/references/design-routing.md

@@ -0,0 +1,226 @@
+# 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/skills/craft/uipm-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/skills/craft/uipm-design/references/logo-color-psychology.md

@@ -0,0 +1,113 @@
+# 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/skills/craft/uipm-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
+```