@hienlh/ppm 0.9.81 → 0.9.82

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

@@ -1,207 +0,0 @@
-# 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 .opencode/skills/brand/scripts/inject-brand-context.cjs
-node .opencode/skills/brand/scripts/validate-asset.cjs <path>
-```
-
-**Tokens:**
-```bash
-node .opencode/skills/design-system/scripts/generate-tokens.cjs -c tokens.json
-node .opencode/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/.opencode/skills/design/references/icon-design.md

@@ -1,122 +0,0 @@
-# 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 ~/.opencode/skills/design/scripts/icon/generate.py --prompt "settings gear" --style outlined
-python3 ~/.opencode/skills/design/scripts/icon/generate.py --prompt "shopping cart" --style filled --color "#6366F1"
-python3 ~/.opencode/skills/design/scripts/icon/generate.py --name "dashboard" --category navigation --style duotone
-```
-
-### Generate Batch Variations
-
-```bash
-python3 ~/.opencode/skills/design/scripts/icon/generate.py --prompt "cloud upload" --batch 4 --output-dir ./icons
-python3 ~/.opencode/skills/design/scripts/icon/generate.py --prompt "notification bell" --batch 6 --style outlined --output-dir ./icons
-```
-
-### Generate Multiple Sizes
-
-```bash
-python3 ~/.opencode/skills/design/scripts/icon/generate.py --prompt "user profile" --sizes "16,24,32,48" --output-dir ./icons
-```
-
-### List Styles/Categories
-
-```bash
-python3 ~/.opencode/skills/design/scripts/icon/generate.py --list-styles
-python3 ~/.opencode/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/.opencode/skills/design/references/logo-color-psychology.md

@@ -1,101 +0,0 @@
-# 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/.opencode/skills/design/references/logo-design.md

@@ -1,92 +0,0 @@
-# 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 ~/.opencode/skills/design/scripts/logo/search.py "tech startup modern" --design-brief -p "BrandName"
-```
-
-### Search Domains
-
-```bash
-# Styles
-python3 ~/.opencode/skills/design/scripts/logo/search.py "minimalist clean" --domain style
-
-# Color palettes
-python3 ~/.opencode/skills/design/scripts/logo/search.py "tech professional" --domain color
-
-# Industry guidelines
-python3 ~/.opencode/skills/design/scripts/logo/search.py "healthcare medical" --domain industry
-```
-
-### Generate Logo
-
-**ALWAYS** use white background for output logos.
-
-```bash
-python3 ~/.opencode/skills/design/scripts/logo/generate.py --brand "TechFlow" --style minimalist --industry tech
-python3 ~/.opencode/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/.opencode/skills/design/references/logo-prompt-engineering.md

@@ -1,158 +0,0 @@
-# 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"