@oriro/orirocli 0.1.11 → 0.3.1

package/skills/craft/uipm-design/SKILL.md

@@ -1,305 +1,305 @@
----
-watermark: ORIRO
-name: uipm-design
-provider: ORIRO.ai
-copyright: Copyright (c) 2026 ORIRO.ai
-description: "Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations (Chart.js), banner design (22 styles, social/ads/web/print), icon design (15 styles, SVG, Gemini 3.1 Pro), social photos (HTML→screenshot, multi-platform). Actions: design logo, create CIP, generate mockups, build slides, design banner, generate icon, create social photos, social media images, brand identity, design system. Platforms: Facebook, Twitter, LinkedIn, YouTube, Instagram, Pinterest, TikTok, Threads, Google Ads."
-argument-hint: "[design-type] [context]"
-license: MIT
-metadata:
-  author: ORIRO.ai
-  version: "2.1.0"
----
-
-# Design
-
-Unified design skill: brand, tokens, UI, logo, CIP, slides, banners, social photos, icons.
-
-## When to Use
-
-- Brand identity, voice, assets
-- Design system tokens and specs
-- UI styling with shadcn/ui + Tailwind
-- Logo design and AI generation
-- Corporate identity program (CIP) deliverables
-- Presentations and pitch decks
-- Banner design for social media, ads, web, print
-- Social photos for Instagram, Facebook, LinkedIn, Twitter, Pinterest, TikTok
-
-## Sub-skill Routing
-
-| Task                          | Sub-skill                | Details                                 |
-| ----------------------------- | ------------------------ | --------------------------------------- |
-| Brand identity, voice, assets | `brand`                  | External skill                          |
-| Tokens, specs, CSS vars       | `design-system`          | External skill                          |
-| shadcn/ui, Tailwind, code     | `ui-styling`             | External skill                          |
-| Logo creation, AI generation  | Logo (built-in)          | `references/logo-design.md`             |
-| CIP mockups, deliverables     | CIP (built-in)           | `references/cip-design.md`              |
-| Presentations, pitch decks    | Slides (built-in)        | `references/slides.md`                  |
-| Banners, covers, headers      | Banner (built-in)        | `references/banner-sizes-and-styles.md` |
-| Social media images/photos    | Social Photos (built-in) | `references/social-photos-design.md`    |
-| SVG icons, icon sets          | Icon (built-in)          | `references/icon-design.md`             |
-
-## Logo Design (Built-in)
-
-55+ styles, 30 color palettes, 25 industry guides. Gemini Nano Banana models.
-
-### Logo: Generate Design Brief
-
-```bash
-python3 ~/.claude/skills/design/scripts/logo/search.py "tech startup modern" --design-brief -p "BrandName"
-```
-
-### Logo: Search Styles/Colors/Industries
-
-```bash
-python3 ~/.claude/skills/design/scripts/logo/search.py "minimalist clean" --domain style
-python3 ~/.claude/skills/design/scripts/logo/search.py "tech professional" --domain color
-python3 ~/.claude/skills/design/scripts/logo/search.py "healthcare medical" --domain industry
-```
-
-### Logo: Generate with AI
-
-**ALWAYS** generate output logo images with white background.
-
-```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
-```
-
-**IMPORTANT:** When scripts fail, try to fix them directly.
-
-After generation, **ALWAYS** ask user about HTML preview via `AskUserQuestion`. If yes, invoke `/ui-ux-pro-max` for gallery.
-
-## CIP Design (Built-in)
-
-50+ deliverables, 20 styles, 20 industries. Gemini Nano Banana (Flash/Pro).
-
-### CIP: Generate Brief
-
-```bash
-python3 ~/.claude/skills/design/scripts/cip/search.py "tech startup" --cip-brief -b "BrandName"
-```
-
-### CIP: Search Domains
-
-```bash
-python3 ~/.claude/skills/design/scripts/cip/search.py "business card letterhead" --domain deliverable
-python3 ~/.claude/skills/design/scripts/cip/search.py "luxury premium elegant" --domain style
-python3 ~/.claude/skills/design/scripts/cip/search.py "hospitality hotel" --domain industry
-python3 ~/.claude/skills/design/scripts/cip/search.py "office reception" --domain mockup
-```
-
-### CIP: Generate Mockups
-
-```bash
-# With logo (RECOMMENDED)
-python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --deliverable "business card" --industry "consulting"
-
-# Full CIP set
-python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --industry "consulting" --set
-
-# Pro model (4K text)
-python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo logo.png --deliverable "business card" --model pro
-
-# Without logo
-python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TechFlow" --deliverable "business card" --no-logo-prompt
-```
-
-Models: `flash` (default, `gemini-2.5-flash-image`), `pro` (`gemini-3-pro-image-preview`)
-
-### CIP: Render HTML Presentation
-
-```bash
-python3 ~/.claude/skills/design/scripts/cip/render-html.py --brand "TopGroup" --industry "consulting" --images /path/to/cip-output
-```
-
-**Tip:** If no logo exists, use Logo Design section above first.
-
-## Slides (Built-in)
-
-Strategic HTML presentations with Chart.js, design tokens, copywriting formulas.
-
-Load `references/slides-create.md` for the creation workflow.
-
-### Slides: Knowledge Base
-
-| Topic           | File                                        |
-| --------------- | ------------------------------------------- |
-| Creation Guide  | `references/slides-create.md`               |
-| Layout Patterns | `references/slides-layout-patterns.md`      |
-| HTML Template   | `references/slides-html-template.md`        |
-| Copywriting     | `references/slides-copywriting-formulas.md` |
-| Strategies      | `references/slides-strategies.md`           |
-
-## Banner Design (Built-in)
-
-22 art direction styles across social, ads, web, print. Uses `frontend-design`, `ai-artist`, `ai-multimodal`, `chrome-devtools` skills.
-
-Load `references/banner-sizes-and-styles.md` for complete sizes and styles reference.
-
-### Banner: Workflow
-
-1. **Gather requirements** via `AskUserQuestion` — purpose, platform, content, brand, style, quantity
-2. **Research** — Activate `ui-ux-pro-max`, browse Pinterest for references
-3. **Design** — Create HTML/CSS banner with `frontend-design`, generate visuals with `ai-artist`/`ai-multimodal`
-4. **Export** — Screenshot to PNG at exact dimensions via `chrome-devtools`
-5. **Present** — Show all options side-by-side, iterate on feedback
-
-### Banner: Quick Size Reference
-
-| Platform   | Type          | Size (px)       |
-| ---------- | ------------- | --------------- |
-| Facebook   | Cover         | 820 x 312       |
-| Twitter/X  | Header        | 1500 x 500      |
-| LinkedIn   | Personal      | 1584 x 396      |
-| YouTube    | Channel art   | 2560 x 1440     |
-| Instagram  | Story         | 1080 x 1920     |
-| Instagram  | Post          | 1080 x 1080     |
-| Google Ads | Med Rectangle | 300 x 250       |
-| Website    | Hero          | 1920 x 600-1080 |
-
-### Banner: Top Art Styles
-
-| Style           | Best For         |
-| --------------- | ---------------- |
-| Minimalist      | SaaS, tech       |
-| Bold Typography | Announcements    |
-| Gradient        | Modern brands    |
-| Photo-Based     | Lifestyle, e-com |
-| Geometric       | Tech, fintech    |
-| Glassmorphism   | SaaS, apps       |
-| Neon/Cyberpunk  | Gaming, events   |
-
-### Banner: Design Rules
-
-- Safe zones: critical content in central 70-80%
-- One CTA per banner, bottom-right, min 44px height
-- Max 2 fonts, min 16px body, ≥32px headline
-- Text under 20% for ads (Meta penalizes)
-- Print: 300 DPI, CMYK, 3-5mm bleed
-
-## Icon Design (Built-in)
-
-15 styles, 12 categories. Gemini 3.1 Pro Preview generates SVG text output.
-
-### Icon: 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
-```
-
-### Icon: Generate Batch Variations
-
-```bash
-python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "cloud upload" --batch 4 --output-dir ./icons
-```
-
-### Icon: Multi-size Export
-
-```bash
-python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "user profile" --sizes "16,24,32,48" --output-dir ./icons
-```
-
-### Icon: Top Styles
-
-| Style    | Best For                      |
-| -------- | ----------------------------- |
-| outlined | UI interfaces, web apps       |
-| filled   | Mobile apps, nav bars         |
-| duotone  | Marketing, landing pages      |
-| rounded  | Friendly apps, health         |
-| sharp    | Tech, fintech, enterprise     |
-| flat     | Material design, Google-style |
-| gradient | Modern brands, SaaS           |
-
-**Model:** `gemini-3.1-pro-preview` — text-only output (SVG is XML text). No image generation API needed.
-
-## Social Photos (Built-in)
-
-Multi-platform social image design: HTML/CSS → screenshot export. Uses `ui-ux-pro-max`, `brand`, `design-system`, `chrome-devtools` skills.
-
-Load `references/social-photos-design.md` for sizes, templates, best practices.
-
-### Social Photos: Workflow
-
-1. **Orchestrate** — `project-management` skill for TODO tasks; parallel subagents for independent work
-2. **Analyze** — Parse prompt: subject, platforms, style, brand context, content elements
-3. **Ideate** — 3-5 concepts, present via `AskUserQuestion`
-4. **Design** — `/ckm:brand` → `/ckm:design-system` → randomly invoke `/ck:ui-ux-pro-max` OR `/ck:frontend-design`; HTML per idea × size
-5. **Export** — `chrome-devtools` or Playwright screenshot at exact px (2x deviceScaleFactor)
-6. **Verify** — Use Chrome MCP or `chrome-devtools` skill to visually inspect exported designs; fix layout/styling issues and re-export
-7. **Report** — Summary to `plans/reports/` with design decisions
-8. **Organize** — Invoke `assets-organizing` skill to sort output files and reports
-
-### Social Photos: Key Sizes
-
-| Platform    | Size (px) | Platform  | Size (px) |
-| ----------- | --------- | --------- | --------- |
-| IG Post     | 1080×1080 | FB Post   | 1200×630  |
-| IG Story    | 1080×1920 | X Post    | 1200×675  |
-| IG Carousel | 1080×1350 | LinkedIn  | 1200×627  |
-| YT Thumb    | 1280×720  | Pinterest | 1000×1500 |
-
-## Workflows
-
-### Complete Brand Package
-
-1. **Logo** → `scripts/logo/generate.py` → Generate logo variants
-2. **CIP** → `scripts/cip/generate.py --logo ...` → Create deliverable mockups
-3. **Presentation** → Load `references/slides-create.md` → Build pitch deck
-
-### New Design System
-
-1. **Brand** (brand skill) → Define colors, typography, voice
-2. **Tokens** (design-system skill) → Create semantic token layers
-3. **Implement** (ui-styling skill) → Configure Tailwind, shadcn/ui
-
-## References
-
-| Topic                 | File                                        |
-| --------------------- | ------------------------------------------- |
-| Design Routing        | `references/design-routing.md`              |
-| Logo Design Guide     | `references/logo-design.md`                 |
-| Logo Styles           | `references/logo-style-guide.md`            |
-| Logo Colors           | `references/logo-color-psychology.md`       |
-| Logo Prompts          | `references/logo-prompt-engineering.md`     |
-| CIP Design Guide      | `references/cip-design.md`                  |
-| CIP Deliverables      | `references/cip-deliverable-guide.md`       |
-| CIP Styles            | `references/cip-style-guide.md`             |
-| CIP Prompts           | `references/cip-prompt-engineering.md`      |
-| Slides Create         | `references/slides-create.md`               |
-| Slides Layouts        | `references/slides-layout-patterns.md`      |
-| Slides Template       | `references/slides-html-template.md`        |
-| Slides Copy           | `references/slides-copywriting-formulas.md` |
-| Slides Strategy       | `references/slides-strategies.md`           |
-| Banner Sizes & Styles | `references/banner-sizes-and-styles.md`     |
-| Social Photos Guide   | `references/social-photos-design.md`        |
-| Icon Design Guide     | `references/icon-design.md`                 |
-
-## Scripts
-
-| Script                       | Purpose                                     |
-| ---------------------------- | ------------------------------------------- |
-| `scripts/logo/search.py`     | Search logo styles, colors, industries      |
-| `scripts/logo/generate.py`   | Generate logos with Gemini AI               |
-| `scripts/logo/core.py`       | BM25 search engine for logo data            |
-| `scripts/cip/search.py`      | Search CIP deliverables, styles, industries |
-| `scripts/cip/generate.py`    | Generate CIP mockups with Gemini            |
-| `scripts/cip/render-html.py` | Render HTML presentation from CIP mockups   |
-| `scripts/cip/core.py`        | BM25 search engine for CIP data             |
-| `scripts/icon/generate.py`   | Generate SVG icons with Gemini 3.1 Pro      |
-
-## Setup
-
-```bash
-export GEMINI_API_KEY="your-key"  # https://aistudio.google.com/apikey
-pip install google-genai pillow
-```
-
-## Integration
-
-**External sub-skills:** brand, design-system, ui-styling
-**Related Skills:** frontend-design, ui-ux-pro-max, ai-multimodal, chrome-devtools
+---
+watermark: ORIRO
+name: uipm-design
+provider: ORIRO.ai
+copyright: Copyright (c) 2026 ORIRO.ai
+description: "Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations (Chart.js), banner design (22 styles, social/ads/web/print), icon design (15 styles, SVG, Gemini 3.1 Pro), social photos (HTML→screenshot, multi-platform). Actions: design logo, create CIP, generate mockups, build slides, design banner, generate icon, create social photos, social media images, brand identity, design system. Platforms: Facebook, Twitter, LinkedIn, YouTube, Instagram, Pinterest, TikTok, Threads, Google Ads."
+argument-hint: "[design-type] [context]"
+license: MIT
+metadata:
+  author: ORIRO.ai
+  version: "2.1.0"
+---
+
+# Design
+
+Unified design skill: brand, tokens, UI, logo, CIP, slides, banners, social photos, icons.
+
+## When to Use
+
+- Brand identity, voice, assets
+- Design system tokens and specs
+- UI styling with shadcn/ui + Tailwind
+- Logo design and AI generation
+- Corporate identity program (CIP) deliverables
+- Presentations and pitch decks
+- Banner design for social media, ads, web, print
+- Social photos for Instagram, Facebook, LinkedIn, Twitter, Pinterest, TikTok
+
+## Sub-skill Routing
+
+| Task                          | Sub-skill                | Details                                 |
+| ----------------------------- | ------------------------ | --------------------------------------- |
+| Brand identity, voice, assets | `brand`                  | External skill                          |
+| Tokens, specs, CSS vars       | `design-system`          | External skill                          |
+| shadcn/ui, Tailwind, code     | `ui-styling`             | External skill                          |
+| Logo creation, AI generation  | Logo (built-in)          | `references/logo-design.md`             |
+| CIP mockups, deliverables     | CIP (built-in)           | `references/cip-design.md`              |
+| Presentations, pitch decks    | Slides (built-in)        | `references/slides.md`                  |
+| Banners, covers, headers      | Banner (built-in)        | `references/banner-sizes-and-styles.md` |
+| Social media images/photos    | Social Photos (built-in) | `references/social-photos-design.md`    |
+| SVG icons, icon sets          | Icon (built-in)          | `references/icon-design.md`             |
+
+## Logo Design (Built-in)
+
+55+ styles, 30 color palettes, 25 industry guides. Gemini Nano Banana models.
+
+### Logo: Generate Design Brief
+
+```bash
+python3 ~/.claude/skills/design/scripts/logo/search.py "tech startup modern" --design-brief -p "BrandName"
+```
+
+### Logo: Search Styles/Colors/Industries
+
+```bash
+python3 ~/.claude/skills/design/scripts/logo/search.py "minimalist clean" --domain style
+python3 ~/.claude/skills/design/scripts/logo/search.py "tech professional" --domain color
+python3 ~/.claude/skills/design/scripts/logo/search.py "healthcare medical" --domain industry
+```
+
+### Logo: Generate with AI
+
+**ALWAYS** generate output logo images with white background.
+
+```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
+```
+
+**IMPORTANT:** When scripts fail, try to fix them directly.
+
+After generation, **ALWAYS** ask user about HTML preview via `AskUserQuestion`. If yes, invoke `/ui-ux-pro-max` for gallery.
+
+## CIP Design (Built-in)
+
+50+ deliverables, 20 styles, 20 industries. Gemini Nano Banana (Flash/Pro).
+
+### CIP: Generate Brief
+
+```bash
+python3 ~/.claude/skills/design/scripts/cip/search.py "tech startup" --cip-brief -b "BrandName"
+```
+
+### CIP: Search Domains
+
+```bash
+python3 ~/.claude/skills/design/scripts/cip/search.py "business card letterhead" --domain deliverable
+python3 ~/.claude/skills/design/scripts/cip/search.py "luxury premium elegant" --domain style
+python3 ~/.claude/skills/design/scripts/cip/search.py "hospitality hotel" --domain industry
+python3 ~/.claude/skills/design/scripts/cip/search.py "office reception" --domain mockup
+```
+
+### CIP: Generate Mockups
+
+```bash
+# With logo (RECOMMENDED)
+python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --deliverable "business card" --industry "consulting"
+
+# Full CIP set
+python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --industry "consulting" --set
+
+# Pro model (4K text)
+python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo logo.png --deliverable "business card" --model pro
+
+# Without logo
+python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TechFlow" --deliverable "business card" --no-logo-prompt
+```
+
+Models: `flash` (default, `gemini-2.5-flash-image`), `pro` (`gemini-3-pro-image-preview`)
+
+### CIP: Render HTML Presentation
+
+```bash
+python3 ~/.claude/skills/design/scripts/cip/render-html.py --brand "TopGroup" --industry "consulting" --images /path/to/cip-output
+```
+
+**Tip:** If no logo exists, use Logo Design section above first.
+
+## Slides (Built-in)
+
+Strategic HTML presentations with Chart.js, design tokens, copywriting formulas.
+
+Load `references/slides-create.md` for the creation workflow.
+
+### Slides: Knowledge Base
+
+| Topic           | File                                        |
+| --------------- | ------------------------------------------- |
+| Creation Guide  | `references/slides-create.md`               |
+| Layout Patterns | `references/slides-layout-patterns.md`      |
+| HTML Template   | `references/slides-html-template.md`        |
+| Copywriting     | `references/slides-copywriting-formulas.md` |
+| Strategies      | `references/slides-strategies.md`           |
+
+## Banner Design (Built-in)
+
+22 art direction styles across social, ads, web, print. Uses `frontend-design`, `ai-artist`, `ai-multimodal`, `chrome-devtools` skills.
+
+Load `references/banner-sizes-and-styles.md` for complete sizes and styles reference.
+
+### Banner: Workflow
+
+1. **Gather requirements** via `AskUserQuestion` — purpose, platform, content, brand, style, quantity
+2. **Research** — Activate `ui-ux-pro-max`, browse Pinterest for references
+3. **Design** — Create HTML/CSS banner with `frontend-design`, generate visuals with `ai-artist`/`ai-multimodal`
+4. **Export** — Screenshot to PNG at exact dimensions via `chrome-devtools`
+5. **Present** — Show all options side-by-side, iterate on feedback
+
+### Banner: Quick Size Reference
+
+| Platform   | Type          | Size (px)       |
+| ---------- | ------------- | --------------- |
+| Facebook   | Cover         | 820 x 312       |
+| Twitter/X  | Header        | 1500 x 500      |
+| LinkedIn   | Personal      | 1584 x 396      |
+| YouTube    | Channel art   | 2560 x 1440     |
+| Instagram  | Story         | 1080 x 1920     |
+| Instagram  | Post          | 1080 x 1080     |
+| Google Ads | Med Rectangle | 300 x 250       |
+| Website    | Hero          | 1920 x 600-1080 |
+
+### Banner: Top Art Styles
+
+| Style           | Best For         |
+| --------------- | ---------------- |
+| Minimalist      | SaaS, tech       |
+| Bold Typography | Announcements    |
+| Gradient        | Modern brands    |
+| Photo-Based     | Lifestyle, e-com |
+| Geometric       | Tech, fintech    |
+| Glassmorphism   | SaaS, apps       |
+| Neon/Cyberpunk  | Gaming, events   |
+
+### Banner: Design Rules
+
+- Safe zones: critical content in central 70-80%
+- One CTA per banner, bottom-right, min 44px height
+- Max 2 fonts, min 16px body, ≥32px headline
+- Text under 20% for ads (Meta penalizes)
+- Print: 300 DPI, CMYK, 3-5mm bleed
+
+## Icon Design (Built-in)
+
+15 styles, 12 categories. Gemini 3.1 Pro Preview generates SVG text output.
+
+### Icon: 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
+```
+
+### Icon: Generate Batch Variations
+
+```bash
+python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "cloud upload" --batch 4 --output-dir ./icons
+```
+
+### Icon: Multi-size Export
+
+```bash
+python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "user profile" --sizes "16,24,32,48" --output-dir ./icons
+```
+
+### Icon: Top Styles
+
+| Style    | Best For                      |
+| -------- | ----------------------------- |
+| outlined | UI interfaces, web apps       |
+| filled   | Mobile apps, nav bars         |
+| duotone  | Marketing, landing pages      |
+| rounded  | Friendly apps, health         |
+| sharp    | Tech, fintech, enterprise     |
+| flat     | Material design, Google-style |
+| gradient | Modern brands, SaaS           |
+
+**Model:** `gemini-3.1-pro-preview` — text-only output (SVG is XML text). No image generation API needed.
+
+## Social Photos (Built-in)
+
+Multi-platform social image design: HTML/CSS → screenshot export. Uses `ui-ux-pro-max`, `brand`, `design-system`, `chrome-devtools` skills.
+
+Load `references/social-photos-design.md` for sizes, templates, best practices.
+
+### Social Photos: Workflow
+
+1. **Orchestrate** — `project-management` skill for TODO tasks; parallel subagents for independent work
+2. **Analyze** — Parse prompt: subject, platforms, style, brand context, content elements
+3. **Ideate** — 3-5 concepts, present via `AskUserQuestion`
+4. **Design** — `/ckm:brand` → `/ckm:design-system` → randomly invoke `/ck:ui-ux-pro-max` OR `/ck:frontend-design`; HTML per idea × size
+5. **Export** — `chrome-devtools` or Playwright screenshot at exact px (2x deviceScaleFactor)
+6. **Verify** — Use Chrome MCP or `chrome-devtools` skill to visually inspect exported designs; fix layout/styling issues and re-export
+7. **Report** — Summary to `plans/reports/` with design decisions
+8. **Organize** — Invoke `assets-organizing` skill to sort output files and reports
+
+### Social Photos: Key Sizes
+
+| Platform    | Size (px) | Platform  | Size (px) |
+| ----------- | --------- | --------- | --------- |
+| IG Post     | 1080×1080 | FB Post   | 1200×630  |
+| IG Story    | 1080×1920 | X Post    | 1200×675  |
+| IG Carousel | 1080×1350 | LinkedIn  | 1200×627  |
+| YT Thumb    | 1280×720  | Pinterest | 1000×1500 |
+
+## Workflows
+
+### Complete Brand Package
+
+1. **Logo** → `scripts/logo/generate.py` → Generate logo variants
+2. **CIP** → `scripts/cip/generate.py --logo ...` → Create deliverable mockups
+3. **Presentation** → Load `references/slides-create.md` → Build pitch deck
+
+### New Design System
+
+1. **Brand** (brand skill) → Define colors, typography, voice
+2. **Tokens** (design-system skill) → Create semantic token layers
+3. **Implement** (ui-styling skill) → Configure Tailwind, shadcn/ui
+
+## References
+
+| Topic                 | File                                        |
+| --------------------- | ------------------------------------------- |
+| Design Routing        | `references/design-routing.md`              |
+| Logo Design Guide     | `references/logo-design.md`                 |
+| Logo Styles           | `references/logo-style-guide.md`            |
+| Logo Colors           | `references/logo-color-psychology.md`       |
+| Logo Prompts          | `references/logo-prompt-engineering.md`     |
+| CIP Design Guide      | `references/cip-design.md`                  |
+| CIP Deliverables      | `references/cip-deliverable-guide.md`       |
+| CIP Styles            | `references/cip-style-guide.md`             |
+| CIP Prompts           | `references/cip-prompt-engineering.md`      |
+| Slides Create         | `references/slides-create.md`               |
+| Slides Layouts        | `references/slides-layout-patterns.md`      |
+| Slides Template       | `references/slides-html-template.md`        |
+| Slides Copy           | `references/slides-copywriting-formulas.md` |
+| Slides Strategy       | `references/slides-strategies.md`           |
+| Banner Sizes & Styles | `references/banner-sizes-and-styles.md`     |
+| Social Photos Guide   | `references/social-photos-design.md`        |
+| Icon Design Guide     | `references/icon-design.md`                 |
+
+## Scripts
+
+| Script                       | Purpose                                     |
+| ---------------------------- | ------------------------------------------- |
+| `scripts/logo/search.py`     | Search logo styles, colors, industries      |
+| `scripts/logo/generate.py`   | Generate logos with Gemini AI               |
+| `scripts/logo/core.py`       | BM25 search engine for logo data            |
+| `scripts/cip/search.py`      | Search CIP deliverables, styles, industries |
+| `scripts/cip/generate.py`    | Generate CIP mockups with Gemini            |
+| `scripts/cip/render-html.py` | Render HTML presentation from CIP mockups   |
+| `scripts/cip/core.py`        | BM25 search engine for CIP data             |
+| `scripts/icon/generate.py`   | Generate SVG icons with Gemini 3.1 Pro      |
+
+## Setup
+
+```bash
+export GEMINI_API_KEY="your-key"  # https://aistudio.google.com/apikey
+pip install google-genai pillow
+```
+
+## Integration
+
+**External sub-skills:** brand, design-system, ui-styling
+**Related Skills:** frontend-design, ui-ux-pro-max, ai-multimodal, chrome-devtools