ui-pro-forge-cli 2.5.0

package/assets/skills/brand/references/color-palette-management.md

@@ -0,0 +1,186 @@
+# Color Palette Management
+
+Guidelines for defining, extracting, and enforcing brand colors.
+
+## Color System Structure
+
+### Hierarchy
+```
+Primary Colors (1-2)
+├── Main brand color - Used for CTAs, headers, key elements
+└── Supporting primary - Secondary emphasis
+
+Secondary Colors (2-3)
+├── Accent colors - Highlights, interactive states
+└── Supporting visuals - Icons, illustrations
+
+Neutral Palette (3-5)
+├── Background colors - Page, card, modal backgrounds
+├── Text colors - Headings, body, muted text
+└── UI elements - Borders, dividers, shadows
+
+Semantic Colors (4)
+├── Success - #22C55E (green)
+├── Warning - #F59E0B (amber)
+├── Error - #EF4444 (red)
+└── Info - #3B82F6 (blue)
+```
+
+## Color Documentation Format
+
+### Markdown Table
+```markdown
+| Name | Hex | RGB | HSL | Usage |
+|------|-----|-----|-----|-------|
+| Primary Blue | #2563EB | rgb(37,99,235) | hsl(217,91%,53%) | CTAs, links |
+```
+
+### CSS Variables
+```css
+:root {
+  /* Primary */
+  --color-primary: #2563EB;
+  --color-primary-light: #3B82F6;
+  --color-primary-dark: #1D4ED8;
+
+  /* Secondary */
+  --color-secondary: #8B5CF6;
+  --color-accent: #F59E0B;
+
+  /* Neutral */
+  --color-background: #FFFFFF;
+  --color-surface: #F9FAFB;
+  --color-text-primary: #111827;
+  --color-text-secondary: #6B7280;
+  --color-border: #E5E7EB;
+}
+```
+
+### Tailwind Config
+```javascript
+colors: {
+  primary: {
+    DEFAULT: '#2563EB',
+    50: '#EFF6FF',
+    100: '#DBEAFE',
+    500: '#3B82F6',
+    600: '#2563EB',
+    700: '#1D4ED8',
+  }
+}
+```
+
+## Accessibility Requirements
+
+### Contrast Ratios (WCAG 2.1)
+| Level | Normal Text | Large Text | UI Components |
+|-------|-------------|------------|---------------|
+| AA | 4.5:1 | 3:1 | 3:1 |
+| AAA | 7:1 | 4.5:1 | 4.5:1 |
+
+### Checking Contrast
+```javascript
+// Formula for relative luminance
+function luminance(r, g, b) {
+  const [rs, gs, bs] = [r, g, b].map(v => {
+    v /= 255;
+    return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+  });
+  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
+}
+
+function contrastRatio(l1, l2) {
+  const lighter = Math.max(l1, l2);
+  const darker = Math.min(l1, l2);
+  return (lighter + 0.05) / (darker + 0.05);
+}
+```
+
+## Color Extraction
+
+### From Images
+Use `extract-colors.cjs` script to:
+1. Load image file
+2. Extract dominant colors using k-means clustering
+3. Map to nearest brand colors
+4. Report compliance percentage
+
+### From Brand Guidelines
+Parse markdown to extract:
+- Hex values from tables
+- CSS variable definitions
+- Color names and usage descriptions
+
+## Brand Compliance Validation
+
+### Rules
+1. **Primary color ratio**: 60-70% of design
+2. **Secondary color ratio**: 20-30% of design
+3. **Accent color ratio**: 5-10% of design
+4. **Off-brand tolerance**: Max 20% non-palette colors
+
+### Validation Output
+```json
+{
+  "compliance": 85,
+  "colors": {
+    "brand": ["#2563EB", "#8B5CF6", "#FFFFFF"],
+    "offBrand": ["#FF5500"],
+    "dominant": "#2563EB"
+  },
+  "issues": [
+    "Off-brand color #FF5500 detected (15% coverage)",
+    "Primary color underused (45% vs 60% target)"
+  ]
+}
+```
+
+## Color Usage Guidelines
+
+### Do's
+- Use primary for main CTAs and key elements
+- Maintain consistent hover/active states
+- Test all combinations for accessibility
+- Document color decisions
+
+### Don'ts
+- Use more than 2-3 colors in single component
+- Mix warm and cool tones without intent
+- Use pure black (#000) for text (use #111 or similar)
+- Rely solely on color for meaning (use icons/text too)
+
+## Color Palette Examples
+
+### Tech/SaaS
+```
+Primary: #2563EB (Blue)
+Secondary: #8B5CF6 (Purple)
+Accent: #10B981 (Emerald)
+Background: #F9FAFB
+Text: #111827
+```
+
+### Marketing/Creative
+```
+Primary: #F97316 (Orange)
+Secondary: #EC4899 (Pink)
+Accent: #14B8A6 (Teal)
+Background: #FFFFFF
+Text: #1F2937
+```
+
+### Professional/Corporate
+```
+Primary: #1E40AF (Navy)
+Secondary: #475569 (Slate)
+Accent: #0EA5E9 (Sky)
+Background: #F8FAFC
+Text: #0F172A
+```
+
+## Tools & Resources
+
+- [Coolors](https://coolors.co) - Palette generation
+- [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/)
+- [Tailwind Color Reference](https://tailwindcss.com/docs/customizing-colors)
+- [Color Hunt](https://colorhunt.co) - Curated palettes

package/assets/skills/brand/references/consistency-checklist.md

@@ -0,0 +1,94 @@
+# Brand Consistency Checklist
+
+## Visual Consistency
+
+### Logo
+- [ ] Correct logo version used
+- [ ] Proper clear space maintained
+- [ ] Approved colors only
+- [ ] Legible at all sizes
+- [ ] No unauthorized modifications
+
+### Colors
+- [ ] Only brand palette colors
+- [ ] Consistent color application
+- [ ] Proper contrast for accessibility
+- [ ] Color ratios maintained
+
+### Typography
+- [ ] Brand fonts used
+- [ ] Correct weights/styles
+- [ ] Proper hierarchy
+- [ ] Consistent formatting
+
+### Imagery
+- [ ] Matches brand style
+- [ ] Consistent editing/filters
+- [ ] Appropriate subjects
+- [ ] Quality standards met
+
+## Voice Consistency
+
+### Tone
+- [ ] Matches brand personality
+- [ ] Appropriate for context
+- [ ] Consistent across channels
+- [ ] No conflicting messages
+
+### Language
+- [ ] Brand terminology used
+- [ ] Consistent capitalization
+- [ ] Proper abbreviations
+- [ ] Jargon level appropriate
+
+### Messaging
+- [ ] Aligns with key messages
+- [ ] Value prop clear
+- [ ] Differentiators highlighted
+- [ ] CTAs consistent
+
+## Channel Audit
+
+### Website
+- [ ] Homepage
+- [ ] Product pages
+- [ ] Blog/content
+- [ ] Footer/navigation
+
+### Social Media
+- [ ] Profile images
+- [ ] Cover images
+- [ ] Bio/about sections
+- [ ] Post templates
+
+### Email
+- [ ] Header/footer
+- [ ] Templates
+- [ ] Signatures
+- [ ] Automated messages
+
+### Collateral
+- [ ] Presentations
+- [ ] One-pagers
+- [ ] Business cards
+- [ ] Promotional materials
+
+## Common Issues
+
+| Issue | Fix |
+|-------|-----|
+| Outdated logo | Replace with current version |
+| Off-brand colors | Update to palette |
+| Wrong font | Replace with brand font |
+| Inconsistent voice | Apply style guide |
+| Mixed messaging | Align to framework |
+
+## Audit Frequency
+
+| Asset Type | Frequency |
+|------------|-----------|
+| Website | Monthly |
+| Social profiles | Quarterly |
+| Email templates | Quarterly |
+| Sales materials | Quarterly |
+| Full brand audit | Annually |

package/assets/skills/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/assets/skills/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)