@oriro/orirocli 0.1.11 → 0.3.1

package/skills/craft/uipm-design/references/cip-style-guide.md

@@ -1,76 +1,76 @@
-# CIP Design Style Guide
-
-## Corporate Minimal
-
-**Industries:** Finance, Legal, Consulting, Tech
-**Colors:** Navy (#0F172A), White (#FFFFFF), Blue accents
-**Typography:** Clean sans-serif (Inter, Helvetica)
-**Materials:** Premium matte paper, subtle textures
-**Finishes:** Matte, spot UV on logo
-
-## Modern Tech
-
-**Industries:** Tech, SaaS, Startups, AI
-**Colors:** Purple (#6366F1), Cyan (#0EA5E9), Green (#10B981)
-**Typography:** Geometric sans (Outfit, Poppins)
-**Materials:** Smooth surfaces, gradient prints
-**Finishes:** Gloss, metallic accents
-
-## Luxury Premium
-
-**Industries:** Fashion, Jewelry, Hotels, Fine Dining
-**Colors:** Black (#1C1917), Gold (#D4AF37), White
-**Typography:** Elegant serif (Playfair), thin sans
-**Materials:** Heavy cotton paper, leather, metal
-**Finishes:** Gold foil, emboss, deboss, soft-touch
-
-## Classic Traditional
-
-**Industries:** Law Firms, Heritage Brands, Finance
-**Colors:** Navy, Burgundy, Gold
-**Typography:** Traditional serif (Times, Garamond)
-**Materials:** Quality laid paper, wood
-**Finishes:** Letterpress, gold emboss
-
-## Warm Organic
-
-**Industries:** Food, Organic, Wellness, Craft
-**Colors:** Brown (#8B4513), Green (#228B22), Cream
-**Typography:** Friendly serif, organic script
-**Materials:** Kraft paper, recycled materials
-**Finishes:** Uncoated, natural textures
-
-## Bold Dynamic
-
-**Industries:** Sports, Entertainment, Gaming
-**Colors:** Red (#DC2626), Orange (#F97316), Black
-**Typography:** Bold condensed sans
-**Materials:** High-contrast, metallic
-**Finishes:** Gloss, vibrant colors
-
-## Fresh Modern
-
-**Industries:** Healthcare, Wellness, Fintech
-**Colors:** Mint (#10B981), Sky (#0EA5E9), White
-**Typography:** Modern rounded sans
-**Materials:** Light, clean surfaces
-**Finishes:** Matte, clean minimal
-
-## Soft Elegant
-
-**Industries:** Beauty, Wedding, Spa, Fashion
-**Colors:** Pink (#F472B6), Gold, White
-**Typography:** Elegant script, thin sans
-**Materials:** Soft-touch, quality paper
-**Finishes:** Rose gold foil, emboss
-
-## Color Psychology
-
-| Color | Meaning          | Best Use                  |
-| ----- | ---------------- | ------------------------- |
-| Blue  | Trust, stability | Finance, Tech, Healthcare |
-| Green | Growth, nature   | Eco, Wellness, Organic    |
-| Gold  | Luxury, prestige | Premium, Jewelry          |
-| Red   | Energy, passion  | Food, Sports              |
-| Black | Sophistication   | Luxury, Fashion           |
-| White | Clean, minimal   | Tech, Healthcare          |
+# CIP Design Style Guide
+
+## Corporate Minimal
+
+**Industries:** Finance, Legal, Consulting, Tech
+**Colors:** Navy (#0F172A), White (#FFFFFF), Blue accents
+**Typography:** Clean sans-serif (Inter, Helvetica)
+**Materials:** Premium matte paper, subtle textures
+**Finishes:** Matte, spot UV on logo
+
+## Modern Tech
+
+**Industries:** Tech, SaaS, Startups, AI
+**Colors:** Purple (#6366F1), Cyan (#0EA5E9), Green (#10B981)
+**Typography:** Geometric sans (Outfit, Poppins)
+**Materials:** Smooth surfaces, gradient prints
+**Finishes:** Gloss, metallic accents
+
+## Luxury Premium
+
+**Industries:** Fashion, Jewelry, Hotels, Fine Dining
+**Colors:** Black (#1C1917), Gold (#D4AF37), White
+**Typography:** Elegant serif (Playfair), thin sans
+**Materials:** Heavy cotton paper, leather, metal
+**Finishes:** Gold foil, emboss, deboss, soft-touch
+
+## Classic Traditional
+
+**Industries:** Law Firms, Heritage Brands, Finance
+**Colors:** Navy, Burgundy, Gold
+**Typography:** Traditional serif (Times, Garamond)
+**Materials:** Quality laid paper, wood
+**Finishes:** Letterpress, gold emboss
+
+## Warm Organic
+
+**Industries:** Food, Organic, Wellness, Craft
+**Colors:** Brown (#8B4513), Green (#228B22), Cream
+**Typography:** Friendly serif, organic script
+**Materials:** Kraft paper, recycled materials
+**Finishes:** Uncoated, natural textures
+
+## Bold Dynamic
+
+**Industries:** Sports, Entertainment, Gaming
+**Colors:** Red (#DC2626), Orange (#F97316), Black
+**Typography:** Bold condensed sans
+**Materials:** High-contrast, metallic
+**Finishes:** Gloss, vibrant colors
+
+## Fresh Modern
+
+**Industries:** Healthcare, Wellness, Fintech
+**Colors:** Mint (#10B981), Sky (#0EA5E9), White
+**Typography:** Modern rounded sans
+**Materials:** Light, clean surfaces
+**Finishes:** Matte, clean minimal
+
+## Soft Elegant
+
+**Industries:** Beauty, Wedding, Spa, Fashion
+**Colors:** Pink (#F472B6), Gold, White
+**Typography:** Elegant script, thin sans
+**Materials:** Soft-touch, quality paper
+**Finishes:** Rose gold foil, emboss
+
+## Color Psychology
+
+| Color | Meaning          | Best Use                  |
+| ----- | ---------------- | ------------------------- |
+| Blue  | Trust, stability | Finance, Tech, Healthcare |
+| Green | Growth, nature   | Eco, Wellness, Organic    |
+| Gold  | Luxury, prestige | Premium, Jewelry          |
+| Red   | Energy, passion  | Food, Sports              |
+| Black | Sophistication   | Luxury, Fashion           |
+| White | Clean, minimal   | Tech, Healthcare          |

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

@@ -1,226 +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
+# 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