constellai 0.3.0

package/skills/design/uupm-brand/references/logo-usage-rules.md

@@ -0,0 +1,185 @@
+# 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/design/uupm-brand/references/messaging-framework.md

@@ -0,0 +1,85 @@
+# 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/design/uupm-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/skills/design/uupm-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/skills/design/uupm-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