@oriro/orirocli 0.1.0

package/skills/craft/uipm-brand/references/logo-usage-rules.md

@@ -0,0 +1,204 @@
+# Logo Usage Rules
+
+Guidelines for proper logo implementation across all marketing materials.
+
+## Logo Variants
+
+### Primary Variants
+
+| Variant         | File Name                  | Use Case                          |
+| --------------- | -------------------------- | --------------------------------- |
+| Full Horizontal | logo-full-horizontal.{ext} | Website headers, documents        |
+| Stacked         | logo-stacked.{ext}         | Square spaces, social avatars     |
+| Icon Only       | logo-icon.{ext}            | Favicons, app icons, small spaces |
+| Wordmark Only   | logo-wordmark.{ext}        | When icon already present         |
+
+### Color Variants
+
+| Variant          | Use Case                                     |
+| ---------------- | -------------------------------------------- |
+| Full Color       | Default on white/light backgrounds           |
+| Reversed         | On dark backgrounds                          |
+| Monochrome Dark  | On light backgrounds when color not possible |
+| Monochrome Light | On dark backgrounds when color not possible  |
+
+## Clear Space
+
+### Minimum Clear Space
+
+The clear space around the logo should equal the height of the logo mark (icon portion).
+
+```
+    ┌─────────────────────────────┐
+    │           [x]               │
+    │   ┌───────────────────┐     │
+    │   │                   │     │
+[x] │   │    [LOGO]         │ [x] │
+    │   │                   │     │
+    │   └───────────────────┘     │
+    │           [x]               │
+    └─────────────────────────────┘
+```
+
+Where [x] = height of logo mark
+
+## Minimum Size
+
+### Digital
+
+| Format    | Minimum Width | Notes                |
+| --------- | ------------- | -------------------- |
+| Full Logo | 120px         | All elements legible |
+| Icon Only | 24px          | Favicon/small icons  |
+| Icon Only | 32px          | UI elements          |
+
+### Print
+
+| Format    | Minimum Width | Notes                      |
+| --------- | ------------- | -------------------------- |
+| Full Logo | 35mm          | Business cards, letterhead |
+| Icon Only | 10mm          | Small print items          |
+
+## Color Usage
+
+### Approved Backgrounds
+
+| Background            | Logo Version               |
+| --------------------- | -------------------------- |
+| White                 | Full color or dark mono    |
+| Light gray (#F5F5F5+) | Full color or dark mono    |
+| Brand primary         | Reversed (white)           |
+| Dark (#333 or darker) | Reversed (white)           |
+| Photography           | Ensure sufficient contrast |
+
+### Color Rules
+
+1. Never change logo colors outside approved palette
+2. Don't use gradients on the logo
+3. Don't apply transparency to logo elements
+4. Don't add shadows or effects
+
+## Incorrect Usage
+
+### Absolute Don'ts
+
+- ❌ Stretch or compress logo
+- ❌ Rotate at angles
+- ❌ Add drop shadows
+- ❌ Apply gradient fills
+- ❌ Use unapproved colors
+- ❌ Add strokes or outlines
+- ❌ Place on busy backgrounds
+- ❌ Crop any portion
+- ❌ Rearrange elements
+- ❌ Add additional elements
+
+### Visual Examples
+
+```
+WRONG: Stretched      WRONG: Rotated       WRONG: Wrong color
+┌──────────────┐      ┌────────┐          ┌────────┐
+│   L O G O    │      │  /    │          │ LOGO   │ <- wrong color
+└──────────────┘      │ /LOGO │          └────────┘
+                      └───────/
+```
+
+## Co-branding
+
+### Partner Logo Guidelines
+
+1. Equal visual weight (same height)
+2. Adequate separation between logos
+3. Use divider line if needed
+4. Both logos in their approved colors
+5. Clear space applies to both
+
+### Layout Options
+
+```
+Option A: Side by side with divider
+[OUR LOGO] | [PARTNER LOGO]
+
+Option B: Stacked
+    [OUR LOGO]
+        +
+  [PARTNER LOGO]
+```
+
+## File Formats
+
+### Recommended Formats
+
+| Usage        | Format | Notes                |
+| ------------ | ------ | -------------------- |
+| Web          | SVG    | Preferred, scalable  |
+| Web fallback | PNG    | With transparency    |
+| Print        | PDF    | Vector, high quality |
+| Print alt    | EPS    | Legacy systems       |
+| Documents    | PNG    | High res (300dpi)    |
+
+### File Organization
+
+```
+assets/logos/
+├── full-horizontal/
+│   ├── logo-full-color.svg
+│   ├── logo-full-color.png
+│   ├── logo-reversed.svg
+│   ├── logo-mono-dark.svg
+│   └── logo-mono-light.svg
+├── icon-only/
+│   ├── icon-full-color.svg
+│   ├── icon-reversed.svg
+│   └── favicon.ico
+└── monochrome/
+    ├── logo-black.svg
+    └── logo-white.svg
+```
+
+## Platform-Specific Guidelines
+
+### Social Media
+
+| Platform  | Format | Size      | Notes     |
+| --------- | ------ | --------- | --------- |
+| LinkedIn  | PNG    | 300x300px | Icon only |
+| Twitter/X | PNG    | 400x400px | Icon only |
+| Facebook  | PNG    | 180x180px | Icon only |
+| Instagram | PNG    | 320x320px | Icon only |
+
+### Website
+
+| Location    | Variant         | Size            |
+| ----------- | --------------- | --------------- |
+| Header      | Full horizontal | 120-200px width |
+| Footer      | Full horizontal | 100-150px width |
+| Favicon     | Icon only       | 32x32px         |
+| Apple Touch | Icon only       | 180x180px       |
+
+### Documents
+
+| Document     | Variant         | Placement      |
+| ------------ | --------------- | -------------- |
+| Letterhead   | Full horizontal | Top left       |
+| Presentation | Icon + wordmark | Title slide    |
+| Report       | Full horizontal | Cover + footer |
+
+## Logo Approval Process
+
+### Before Using Logo
+
+1. Verify you have the correct version
+2. Check background compatibility
+3. Ensure minimum size requirements
+4. Confirm clear space allocation
+5. Review against these guidelines
+
+### Requesting Approval
+
+For non-standard uses:
+
+1. Submit mockup showing proposed usage
+2. Include context (medium, audience)
+3. Wait for brand team approval
+4. Document approved exceptions

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

@@ -0,0 +1,91 @@
+# Messaging Framework
+
+## Framework Structure
+
+```
+Mission (Why we exist)
+    ↓
+Vision (Where we're going)
+    ↓
+Value Proposition (What we offer)
+    ↓
+Positioning Statement (How we're different)
+    ↓
+Key Messages (What we say)
+    ↓
+Proof Points (Why to believe)
+```
+
+## Core Statements
+
+### Mission Statement
+
+```
+We [action] for [audience] by [method] so they can [outcome].
+```
+
+### Vision Statement
+
+```
+A world where [aspiration/change we want to see].
+```
+
+### Value Proposition
+
+```
+For [target customer] who [need/problem],
+[Product/Brand] is a [category]
+that [key benefit].
+Unlike [competitors],
+we [unique differentiator].
+```
+
+### Positioning Statement
+
+```
+[Brand] is the [category] for [audience]
+who want [desired outcome]
+because [reason to believe].
+```
+
+## Message Architecture
+
+### Primary Message
+
+One sentence that captures your core value.
+
+### Supporting Messages (3-5)
+
+Each addresses a different benefit or audience need.
+
+| Message     | Audience Need | Proof Point |
+| ----------- | ------------- | ----------- |
+| [Message 1] | [Need]        | [Evidence]  |
+| [Message 2] | [Need]        | [Evidence]  |
+| [Message 3] | [Need]        | [Evidence]  |
+
+### Elevator Pitches
+
+**10-second:**
+[One sentence that sparks interest]
+
+**30-second:**
+[Problem + solution + differentiation]
+
+**60-second:**
+[Full pitch with proof points]
+
+## Message by Audience
+
+| Audience    | Pain Point | Key Message | CTA      |
+| ----------- | ---------- | ----------- | -------- |
+| [Segment 1] | [Pain]     | [Message]   | [Action] |
+| [Segment 2] | [Pain]     | [Message]   | [Action] |
+
+## Message Testing
+
+1. Is it clear? (No jargon)
+2. Is it differentiated? (Competitors can't say it)
+3. Is it credible? (Can we prove it)
+4. Is it compelling? (Does audience care)
+5. Is it consistent? (Aligns with brand)

package/skills/craft/uipm-brand/references/typography-specifications.md

@@ -0,0 +1,265 @@
+# Typography Specifications
+
+Guidelines for defining and implementing brand typography.
+
+## Font Stack Structure
+
+### Primary Fonts
+
+```css
+/* Headings - Display font for impact */
+--font-heading: "Inter", system-ui, -apple-system, sans-serif;
+
+/* Body - Readable for long-form content */
+--font-body: "Inter", system-ui, -apple-system, sans-serif;
+
+/* Monospace - Code, technical content */
+--font-mono: "JetBrains Mono", "Fira Code", monospace;
+```
+
+### Font Loading
+
+```html
+<!-- Google Fonts (recommended) -->
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link
+  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
+  rel="stylesheet"
+/>
+```
+
+## Type Scale
+
+### Base System
+
+- Base size: 16px (1rem)
+- Scale ratio: 1.25 (Major Third)
+
+### Scale Definition
+
+| Element    | Size (rem) | Size (px) | Weight | Line Height |
+| ---------- | ---------- | --------- | ------ | ----------- |
+| Display    | 3.815rem   | 61px      | 700    | 1.1         |
+| H1         | 3.052rem   | 49px      | 700    | 1.2         |
+| H2         | 2.441rem   | 39px      | 600    | 1.25        |
+| H3         | 1.953rem   | 31px      | 600    | 1.3         |
+| H4         | 1.563rem   | 25px      | 600    | 1.35        |
+| H5         | 1.25rem    | 20px      | 600    | 1.4         |
+| Body Large | 1.125rem   | 18px      | 400    | 1.6         |
+| Body       | 1rem       | 16px      | 400    | 1.5         |
+| Small      | 0.875rem   | 14px      | 400    | 1.5         |
+| Caption    | 0.75rem    | 12px      | 400    | 1.4         |
+
+### Responsive Adjustments
+
+```css
+/* Mobile (< 768px) */
+h1 {
+  font-size: 2rem;
+} /* 32px */
+h2 {
+  font-size: 1.5rem;
+} /* 24px */
+h3 {
+  font-size: 1.25rem;
+} /* 20px */
+body {
+  font-size: 1rem;
+} /* 16px */
+
+/* Desktop (>= 768px) */
+h1 {
+  font-size: 3rem;
+} /* 48px */
+h2 {
+  font-size: 2.25rem;
+} /* 36px */
+h3 {
+  font-size: 1.75rem;
+} /* 28px */
+body {
+  font-size: 1rem;
+} /* 16px */
+```
+
+## Font Weights
+
+### Weight Scale
+
+| Name     | Value | Usage                 |
+| -------- | ----- | --------------------- |
+| Regular  | 400   | Body text, paragraphs |
+| Medium   | 500   | Buttons, nav items    |
+| Semibold | 600   | Subheadings, emphasis |
+| Bold     | 700   | Headings, CTAs        |
+
+### Weight Pairing
+
+- Headings: 600-700
+- Body: 400
+- Links: 500
+- Buttons: 600
+
+## Line Height Guidelines
+
+### Rules
+
+| Content Type | Line Height | Notes                     |
+| ------------ | ----------- | ------------------------- |
+| Headings     | 1.1-1.3     | Tighter for visual impact |
+| Body text    | 1.5-1.6     | Optimal readability       |
+| Small text   | 1.4-1.5     | Slightly tighter          |
+| Long-form    | 1.6-1.75    | Extra comfortable         |
+
+## Letter Spacing
+
+### Guidelines
+
+| Element    | Tracking | Value   |
+| ---------- | -------- | ------- |
+| Display    | Tighter  | -0.02em |
+| Headings   | Normal   | 0       |
+| Body       | Normal   | 0       |
+| All caps   | Wider    | 0.05em  |
+| Small caps | Wider    | 0.1em   |
+
+## Paragraph Spacing
+
+### Margins
+
+```css
+/* Heading spacing */
+h1,
+h2 {
+  margin-top: 2rem;
+  margin-bottom: 1rem;
+}
+h3,
+h4 {
+  margin-top: 1.5rem;
+  margin-bottom: 0.75rem;
+}
+
+/* Paragraph spacing */
+p {
+  margin-bottom: 1rem;
+}
+p + p {
+  margin-top: 0;
+}
+```
+
+### Maximum Line Length
+
+- Body text: 65-75 characters (optimal)
+- Headings: Can be wider
+- Code blocks: 80-100 characters
+
+```css
+.prose {
+  max-width: 65ch;
+}
+```
+
+## CSS Implementation
+
+### Full Variables
+
+```css
+:root {
+  /* Font Families */
+  --font-heading: "Inter", system-ui, sans-serif;
+  --font-body: "Inter", system-ui, sans-serif;
+  --font-mono: "JetBrains Mono", monospace;
+
+  /* Font Sizes */
+  --text-xs: 0.75rem;
+  --text-sm: 0.875rem;
+  --text-base: 1rem;
+  --text-lg: 1.125rem;
+  --text-xl: 1.25rem;
+  --text-2xl: 1.5rem;
+  --text-3xl: 1.875rem;
+  --text-4xl: 2.25rem;
+  --text-5xl: 3rem;
+
+  /* Font Weights */
+  --font-normal: 400;
+  --font-medium: 500;
+  --font-semibold: 600;
+  --font-bold: 700;
+
+  /* Line Heights */
+  --leading-none: 1;
+  --leading-tight: 1.25;
+  --leading-snug: 1.375;
+  --leading-normal: 1.5;
+  --leading-relaxed: 1.625;
+  --leading-loose: 2;
+}
+```
+
+### Tailwind Config
+
+```javascript
+theme: {
+  fontFamily: {
+    heading: ['Inter', 'system-ui', 'sans-serif'],
+    body: ['Inter', 'system-ui', 'sans-serif'],
+    mono: ['JetBrains Mono', 'monospace'],
+  },
+  fontSize: {
+    xs: ['0.75rem', { lineHeight: '1rem' }],
+    sm: ['0.875rem', { lineHeight: '1.25rem' }],
+    base: ['1rem', { lineHeight: '1.5rem' }],
+    lg: ['1.125rem', { lineHeight: '1.75rem' }],
+    xl: ['1.25rem', { lineHeight: '1.75rem' }],
+    '2xl': ['1.5rem', { lineHeight: '2rem' }],
+    '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
+    '4xl': ['2.25rem', { lineHeight: '2.5rem' }],
+    '5xl': ['3rem', { lineHeight: '1.1' }],
+  }
+}
+```
+
+## Common Font Pairings
+
+### Clean & Modern
+
+- Heading: Inter
+- Body: Inter
+
+### Professional
+
+- Heading: Playfair Display
+- Body: Source Sans Pro
+
+### Startup/Tech
+
+- Heading: Poppins
+- Body: Open Sans
+
+### Editorial
+
+- Heading: Merriweather
+- Body: Lato
+
+## Accessibility
+
+### Minimum Sizes
+
+- Body text: 16px minimum
+- Small text: 14px minimum, not for long content
+- Caption: 12px minimum, use sparingly
+
+### Contrast Requirements
+
+- Text on background: 4.5:1 minimum (AA)
+- Large text (18px+): 3:1 minimum
+
+### Best Practices
+
+- Don't use all caps for long text
+- Avoid justified text (use left-align)
+- Ensure adequate line spacing
+- Don't use thin weights (<400) at small sizes

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

@@ -0,0 +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