@oriro/orirocli 0.1.9 → 0.1.11

package/skills/craft/uipm-brand/references/update.md

@@ -1,128 +1,128 @@
-Update brand colors, typography, and style - automatically syncs to all design system files.
-
-<args>$ARGUMENTS</args>
-
-## Overview
-
-This command systematically updates:
-
-1. `docs/brand-guidelines.md` - Human-readable brand doc
-2. `assets/design-tokens.json` - Token source of truth
-3. `assets/design-tokens.css` - Generated CSS variables
-
-## Workflow
-
-### Step 1: Gather Brand Input
-
-Use `AskUserQuestion` to collect:
-
-**Theme Selection:**
-
-- Theme name (e.g., "Ocean Professional", "Electric Creative", "Forest Calm")
-
-**Primary Color:**
-
-- Color name (e.g., "Ocean Blue", "Coral", "Forest Green")
-- Hex code (e.g., #3B82F6)
-
-**Secondary Color:**
-
-- Color name (e.g., "Golden Amber", "Electric Purple")
-- Hex code
-
-**Accent Color:**
-
-- Color name (e.g., "Emerald", "Neon Mint")
-- Hex code
-
-**Brand Mood (for AI image generation):**
-
-- Mood keywords (e.g., "professional, trustworthy, premium" or "bold, creative, energetic")
-
-### Step 2: Update Brand Guidelines
-
-Edit `docs/brand-guidelines.md`:
-
-1. **Quick Reference table** - Update color names and hex codes
-2. **Brand Concept section** - Update theme name and description
-3. **Color Palette section** - Update Primary, Secondary, Accent colors with shades
-4. **AI Image Generation section** - Update base prompt, keywords, mood descriptors
-
-### Step 3: Sync to Design Tokens
-
-Run the sync script:
-
-```bash
-node .claude/skills/brand/scripts/sync-brand-to-tokens.cjs
-```
-
-This will:
-
-- Update `assets/design-tokens.json` with new color names and values
-- Regenerate `assets/design-tokens.css` with correct CSS variables
-
-### Step 4: Verify Sync
-
-Confirm all files are updated:
-
-```bash
-# Check brand context extraction
-node .claude/skills/brand/scripts/inject-brand-context.cjs --json | head -30
-
-# Check CSS variables
-grep "primary" assets/design-tokens.css | head -5
-```
-
-### Step 5: Report
-
-Output summary:
-
-- Theme: [name]
-- Primary: [name] ([hex])
-- Secondary: [name] ([hex])
-- Accent: [name] ([hex])
-- Files updated: brand-guidelines.md, design-tokens.json, design-tokens.css
-
-## Files Modified
-
-| File                        | Purpose                                          |
-| --------------------------- | ------------------------------------------------ |
-| `docs/brand-guidelines.md`  | Human-readable brand documentation               |
-| `assets/design-tokens.json` | Token definitions (primitive→semantic→component) |
-| `assets/design-tokens.css`  | CSS variables for UI components                  |
-
-## Skills Used
-
-- `brand` - Brand context extraction and sync
-- `design-system` - Token generation
-
-## Examples
-
-```bash
-# Interactive mode
-/brand:update
-
-# With theme hint
-/brand:update "Ocean Professional"
-
-# Quick preset
-/brand:update "midnight purple"
-```
-
-## Color Presets
-
-If user specifies a preset name, use these defaults:
-
-| Preset             | Primary              | Secondary               | Accent            |
-| ------------------ | -------------------- | ----------------------- | ----------------- |
-| ocean-professional | #3B82F6 Ocean Blue   | #F59E0B Golden Amber    | #10B981 Emerald   |
-| electric-creative  | #FF6B6B Coral        | #9B5DE5 Electric Purple | #00F5D4 Neon Mint |
-| forest-calm        | #059669 Forest Green | #92400E Warm Brown      | #FBBF24 Sunlight  |
-| midnight-purple    | #7C3AED Violet       | #EC4899 Pink            | #06B6D4 Cyan      |
-| sunset-warm        | #F97316 Orange       | #DC2626 Red             | #FACC15 Yellow    |
-
-## Important
-
-- **Always sync all three files** - Never update just brand-guidelines.md alone
-- **Verify extraction** - Run inject-brand-context.cjs after update to confirm
-- **Test image generation** - Optionally generate a test image to verify brand application
+Update brand colors, typography, and style - automatically syncs to all design system files.
+
+<args>$ARGUMENTS</args>
+
+## Overview
+
+This command systematically updates:
+
+1. `docs/brand-guidelines.md` - Human-readable brand doc
+2. `assets/design-tokens.json` - Token source of truth
+3. `assets/design-tokens.css` - Generated CSS variables
+
+## Workflow
+
+### Step 1: Gather Brand Input
+
+Use `AskUserQuestion` to collect:
+
+**Theme Selection:**
+
+- Theme name (e.g., "Ocean Professional", "Electric Creative", "Forest Calm")
+
+**Primary Color:**
+
+- Color name (e.g., "Ocean Blue", "Coral", "Forest Green")
+- Hex code (e.g., #3B82F6)
+
+**Secondary Color:**
+
+- Color name (e.g., "Golden Amber", "Electric Purple")
+- Hex code
+
+**Accent Color:**
+
+- Color name (e.g., "Emerald", "Neon Mint")
+- Hex code
+
+**Brand Mood (for AI image generation):**
+
+- Mood keywords (e.g., "professional, trustworthy, premium" or "bold, creative, energetic")
+
+### Step 2: Update Brand Guidelines
+
+Edit `docs/brand-guidelines.md`:
+
+1. **Quick Reference table** - Update color names and hex codes
+2. **Brand Concept section** - Update theme name and description
+3. **Color Palette section** - Update Primary, Secondary, Accent colors with shades
+4. **AI Image Generation section** - Update base prompt, keywords, mood descriptors
+
+### Step 3: Sync to Design Tokens
+
+Run the sync script:
+
+```bash
+node .claude/skills/brand/scripts/sync-brand-to-tokens.cjs
+```
+
+This will:
+
+- Update `assets/design-tokens.json` with new color names and values
+- Regenerate `assets/design-tokens.css` with correct CSS variables
+
+### Step 4: Verify Sync
+
+Confirm all files are updated:
+
+```bash
+# Check brand context extraction
+node .claude/skills/brand/scripts/inject-brand-context.cjs --json | head -30
+
+# Check CSS variables
+grep "primary" assets/design-tokens.css | head -5
+```
+
+### Step 5: Report
+
+Output summary:
+
+- Theme: [name]
+- Primary: [name] ([hex])
+- Secondary: [name] ([hex])
+- Accent: [name] ([hex])
+- Files updated: brand-guidelines.md, design-tokens.json, design-tokens.css
+
+## Files Modified
+
+| File                        | Purpose                                          |
+| --------------------------- | ------------------------------------------------ |
+| `docs/brand-guidelines.md`  | Human-readable brand documentation               |
+| `assets/design-tokens.json` | Token definitions (primitive→semantic→component) |
+| `assets/design-tokens.css`  | CSS variables for UI components                  |
+
+## Skills Used
+
+- `brand` - Brand context extraction and sync
+- `design-system` - Token generation
+
+## Examples
+
+```bash
+# Interactive mode
+/brand:update
+
+# With theme hint
+/brand:update "Ocean Professional"
+
+# Quick preset
+/brand:update "midnight purple"
+```
+
+## Color Presets
+
+If user specifies a preset name, use these defaults:
+
+| Preset             | Primary              | Secondary               | Accent            |
+| ------------------ | -------------------- | ----------------------- | ----------------- |
+| ocean-professional | #3B82F6 Ocean Blue   | #F59E0B Golden Amber    | #10B981 Emerald   |
+| electric-creative  | #FF6B6B Coral        | #9B5DE5 Electric Purple | #00F5D4 Neon Mint |
+| forest-calm        | #059669 Forest Green | #92400E Warm Brown      | #FBBF24 Sunlight  |
+| midnight-purple    | #7C3AED Violet       | #EC4899 Pink            | #06B6D4 Cyan      |
+| sunset-warm        | #F97316 Orange       | #DC2626 Red             | #FACC15 Yellow    |
+
+## Important
+
+- **Always sync all three files** - Never update just brand-guidelines.md alone
+- **Verify extraction** - Run inject-brand-context.cjs after update to confirm
+- **Test image generation** - Optionally generate a test image to verify brand application

package/skills/craft/uipm-brand/references/visual-identity.md

@@ -1,109 +1,109 @@
-# Visual Identity Basics
-
-## Core Visual Elements
-
-### Logo
-
-- **Primary:** Full logo (horizontal/stacked)
-- **Secondary:** Abbreviated version
-- **Icon/Mark:** Symbol only
-- **Clear space:** Minimum padding around logo
-- **Minimum size:** Smallest readable size
-
-### Color Palette
-
-```
-Primary Colors (1-2)
-├── Main brand color
-└── Supporting primary
-
-Secondary Colors (2-3)
-├── Accent colors
-└── Supporting visuals
-
-Neutrals (3-4)
-├── Text colors
-├── Background colors
-└── UI elements
-```
-
-### Typography
-
-| Usage   | Font   | Weight   | Size    |
-| ------- | ------ | -------- | ------- |
-| H1      | [Font] | Bold     | 32-48px |
-| H2      | [Font] | Semibold | 24-32px |
-| Body    | [Font] | Regular  | 16-18px |
-| Caption | [Font] | Regular  | 12-14px |
-
-## Visual Guidelines Template
-
-```markdown
-## Logo Usage
-
-### Correct Usage
-
-- [Guidelines for proper logo use]
-
-### Incorrect Usage
-
-- Don't stretch or distort
-- Don't change colors (unless approved)
-- Don't add effects
-- Don't place on busy backgrounds
-
-## Color Specifications
-
-### Primary Palette
-
-| Color  | Hex     | RGB   | Usage          |
-| ------ | ------- | ----- | -------------- |
-| [Name] | #XXXXXX | r,g,b | [Where to use] |
-
-### Accessibility
-
-- Text contrast ratio: 4.5:1 minimum
-- Button contrast: WCAG AA compliant
-
-## Imagery Style
-
-### Photography
-
-- [Lighting preferences]
-- [Subject guidelines]
-- [Composition rules]
-- [Editing style]
-
-### Illustrations
-
-- [Style description]
-- [Color usage]
-- [Complexity level]
-
-### Icons
-
-- [Style: outlined/filled/duotone]
-- [Stroke weight]
-- [Corner radius]
-```
-
-## Quick Checks
-
-### Logo
-
-- [ ] Correct version for context
-- [ ] Sufficient clear space
-- [ ] Legible at size used
-- [ ] Correct color for background
-
-### Colors
-
-- [ ] From approved palette
-- [ ] Accessible contrast
-- [ ] Consistent across materials
-
-### Typography
-
-- [ ] Correct fonts
-- [ ] Appropriate hierarchy
-- [ ] Readable size
+# Visual Identity Basics
+
+## Core Visual Elements
+
+### Logo
+
+- **Primary:** Full logo (horizontal/stacked)
+- **Secondary:** Abbreviated version
+- **Icon/Mark:** Symbol only
+- **Clear space:** Minimum padding around logo
+- **Minimum size:** Smallest readable size
+
+### Color Palette
+
+```
+Primary Colors (1-2)
+├── Main brand color
+└── Supporting primary
+
+Secondary Colors (2-3)
+├── Accent colors
+└── Supporting visuals
+
+Neutrals (3-4)
+├── Text colors
+├── Background colors
+└── UI elements
+```
+
+### Typography
+
+| Usage   | Font   | Weight   | Size    |
+| ------- | ------ | -------- | ------- |
+| H1      | [Font] | Bold     | 32-48px |
+| H2      | [Font] | Semibold | 24-32px |
+| Body    | [Font] | Regular  | 16-18px |
+| Caption | [Font] | Regular  | 12-14px |
+
+## Visual Guidelines Template
+
+```markdown
+## Logo Usage
+
+### Correct Usage
+
+- [Guidelines for proper logo use]
+
+### Incorrect Usage
+
+- Don't stretch or distort
+- Don't change colors (unless approved)
+- Don't add effects
+- Don't place on busy backgrounds
+
+## Color Specifications
+
+### Primary Palette
+
+| Color  | Hex     | RGB   | Usage          |
+| ------ | ------- | ----- | -------------- |
+| [Name] | #XXXXXX | r,g,b | [Where to use] |
+
+### Accessibility
+
+- Text contrast ratio: 4.5:1 minimum
+- Button contrast: WCAG AA compliant
+
+## Imagery Style
+
+### Photography
+
+- [Lighting preferences]
+- [Subject guidelines]
+- [Composition rules]
+- [Editing style]
+
+### Illustrations
+
+- [Style description]
+- [Color usage]
+- [Complexity level]
+
+### Icons
+
+- [Style: outlined/filled/duotone]
+- [Stroke weight]
+- [Corner radius]
+```
+
+## Quick Checks
+
+### Logo
+
+- [ ] Correct version for context
+- [ ] Sufficient clear space
+- [ ] Legible at size used
+- [ ] Correct color for background
+
+### Colors
+
+- [ ] From approved palette
+- [ ] Accessible contrast
+- [ ] Consistent across materials
+
+### Typography
+
+- [ ] Correct fonts
+- [ ] Appropriate hierarchy
+- [ ] Readable size

package/skills/craft/uipm-brand/references/voice-framework.md

@@ -1,99 +1,99 @@
-# Brand Voice Framework
-
-## Voice vs. Tone
-
-**Voice** = Brand's personality (consistent)
-**Tone** = How voice adapts to context (variable)
-
-Example: A friendly brand (voice) might be celebratory in a win announcement but empathetic in a support response (tone).
-
-## Voice Dimensions
-
-### Tone Spectrum
-
-```
-Formal ←――――――――――――――→ Casual
-[Legal docs]     [Social media]
-```
-
-### Language Spectrum
-
-```
-Simple ←――――――――――――――→ Complex
-[Consumer]       [Technical B2B]
-```
-
-### Character Spectrum
-
-```
-Serious ←――――――――――――――→ Playful
-[Finance]        [Entertainment]
-```
-
-### Emotion Spectrum
-
-```
-Reserved ←――――――――――――――→ Expressive
-[Corporate]      [Lifestyle brand]
-```
-
-## Voice Development Process
-
-### Step 1: Define Personality Traits
-
-Choose 3-5 traits that describe your brand:
-
-- Confident, not arrogant
-- Friendly, not unprofessional
-- Knowledgeable, not condescending
-- Innovative, not gimmicky
-- Authentic, not casual
-
-### Step 2: Create Voice Chart
-
-| Trait   | Description | Do        | Don't     |
-| ------- | ----------- | --------- | --------- |
-| [Trait] | [Meaning]   | [Example] | [Example] |
-
-### Step 3: Context Adaptation
-
-| Context      | Tone Shift      | Example                 |
-| ------------ | --------------- | ----------------------- |
-| Social media | More casual     | "Hey there!"            |
-| Support      | More empathetic | "We understand..."      |
-| Legal        | More formal     | "In accordance with..." |
-| Sales        | More confident  | "You'll see results..." |
-
-## Voice Testing
-
-Ask these questions:
-
-1. Does this sound like our brand?
-2. Would a competitor say this?
-3. Does it resonate with our audience?
-4. Is it consistent with our values?
-
-## Voice Guide Template
-
-```markdown
-## [Brand] Voice Guide
-
-### We Are
-
-- [Trait 1]: [Description]
-- [Trait 2]: [Description]
-- [Trait 3]: [Description]
-
-### We Sound Like
-
-[Example phrases]
-
-### We Don't Sound Like
-
-[Anti-examples]
-
-### Sample Rewrites
-
-Before: [Generic copy]
-After: [Branded copy]
-```
+# Brand Voice Framework
+
+## Voice vs. Tone
+
+**Voice** = Brand's personality (consistent)
+**Tone** = How voice adapts to context (variable)
+
+Example: A friendly brand (voice) might be celebratory in a win announcement but empathetic in a support response (tone).
+
+## Voice Dimensions
+
+### Tone Spectrum
+
+```
+Formal ←――――――――――――――→ Casual
+[Legal docs]     [Social media]
+```
+
+### Language Spectrum
+
+```
+Simple ←――――――――――――――→ Complex
+[Consumer]       [Technical B2B]
+```
+
+### Character Spectrum
+
+```
+Serious ←――――――――――――――→ Playful
+[Finance]        [Entertainment]
+```
+
+### Emotion Spectrum
+
+```
+Reserved ←――――――――――――――→ Expressive
+[Corporate]      [Lifestyle brand]
+```
+
+## Voice Development Process
+
+### Step 1: Define Personality Traits
+
+Choose 3-5 traits that describe your brand:
+
+- Confident, not arrogant
+- Friendly, not unprofessional
+- Knowledgeable, not condescending
+- Innovative, not gimmicky
+- Authentic, not casual
+
+### Step 2: Create Voice Chart
+
+| Trait   | Description | Do        | Don't     |
+| ------- | ----------- | --------- | --------- |
+| [Trait] | [Meaning]   | [Example] | [Example] |
+
+### Step 3: Context Adaptation
+
+| Context      | Tone Shift      | Example                 |
+| ------------ | --------------- | ----------------------- |
+| Social media | More casual     | "Hey there!"            |
+| Support      | More empathetic | "We understand..."      |
+| Legal        | More formal     | "In accordance with..." |
+| Sales        | More confident  | "You'll see results..." |
+
+## Voice Testing
+
+Ask these questions:
+
+1. Does this sound like our brand?
+2. Would a competitor say this?
+3. Does it resonate with our audience?
+4. Is it consistent with our values?
+
+## Voice Guide Template
+
+```markdown
+## [Brand] Voice Guide
+
+### We Are
+
+- [Trait 1]: [Description]
+- [Trait 2]: [Description]
+- [Trait 3]: [Description]
+
+### We Sound Like
+
+[Example phrases]
+
+### We Don't Sound Like
+
+[Anti-examples]
+
+### Sample Rewrites
+
+Before: [Generic copy]
+After: [Branded copy]
+```