ui-pro-forge-cli 2.5.0

package/assets/skills/brand/references/typography-specifications.md

@@ -0,0 +1,214 @@
+# 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/assets/skills/brand/references/update.md

@@ -0,0 +1,118 @@
+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/assets/skills/brand/references/visual-identity.md

@@ -0,0 +1,96 @@
+# 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/assets/skills/brand/references/voice-framework.md

@@ -0,0 +1,88 @@
+# 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]
+```