constellai 0.3.0

package/skills/design/uupm-brand/references/asset-organization.md

@@ -0,0 +1,157 @@
+# Asset Organization Guide
+
+Guidelines for organizing marketing assets in a structured, searchable system.
+
+## Directory Structure
+
+```
+project-root/
+├── .assets/                          # Git-tracked metadata
+│   ├── manifest.json                 # Central asset registry
+│   ├── tags.json                     # Tagging system
+│   ├── versions/                     # Version history
+│   │   └── {asset-id}/
+│   │       └── v{n}.json
+│   └── metadata/                     # Type-specific metadata
+│       ├── designs.json
+│       ├── banners.json
+│       ├── logos.json
+│       └── videos.json
+├── assets/                           # Raw files
+│   ├── designs/
+│   │   ├── campaigns/                # Campaign-specific designs
+│   │   ├── web/                      # Website graphics
+│   │   └── print/                    # Print materials
+│   ├── banners/
+│   │   ├── social-media/             # Platform banners
+│   │   ├── email-headers/            # Email template headers
+│   │   └── landing-pages/            # Hero/section images
+│   ├── logos/
+│   │   ├── full-horizontal/          # Full logo with wordmark
+│   │   ├── icon-only/                # Symbol only
+│   │   ├── monochrome/               # Single color versions
+│   │   └── variations/               # Special versions
+│   ├── videos/
+│   │   ├── ads/                      # Promotional videos
+│   │   ├── tutorials/                # How-to content
+│   │   └── testimonials/             # Customer videos
+│   ├── infographics/                 # Data visualizations
+│   └── generated/                    # AI-generated assets
+│       └── {YYYYMMDD}/               # Date-organized
+```
+
+## Naming Convention
+
+### Format
+```
+{type}_{campaign}_{description}_{timestamp}_{variant}.{ext}
+```
+
+### Components
+| Component | Format | Required | Examples |
+|-----------|--------|----------|----------|
+| type | lowercase | Yes | banner, logo, design, video |
+| campaign | kebab-case | Yes* | claude-launch, q1-promo, evergreen |
+| description | kebab-case | Yes | hero-image, email-header |
+| timestamp | YYYYMMDD | Yes | 20251209 |
+| variant | kebab-case | No | dark-mode, 1x1, mobile |
+
+*Use "evergreen" for non-campaign assets
+
+### Examples
+```
+banner_claude-launch_hero-image_20251209_16-9.png
+logo_brand-refresh_horizontal-full-color_20251209.svg
+design_holiday-campaign_email-hero_20251209_dark-mode.psd
+video_product-demo_feature-walkthrough_20251209.mp4
+infographic_evergreen_pricing-comparison_20251209.png
+```
+
+## Metadata Schema
+
+### Asset Entry (manifest.json)
+```json
+{
+  "id": "uuid-v4",
+  "name": "Campaign Hero Banner",
+  "type": "banner",
+  "path": "assets/banners/landing-pages/banner_claude-launch_hero-image_20251209.png",
+  "dimensions": { "width": 1920, "height": 1080 },
+  "fileSize": 245760,
+  "mimeType": "image/png",
+  "tags": ["campaign", "hero", "launch"],
+  "status": "approved",
+  "source": {
+    "model": "imagen-4",
+    "prompt": "...",
+    "createdAt": "2025-12-09T10:30:00Z"
+  },
+  "version": 2,
+  "createdBy": "agent:content-creator",
+  "approvedBy": "user:john",
+  "approvedAt": "2025-12-09T14:00:00Z"
+}
+```
+
+### Version Entry (versions/{id}/v{n}.json)
+```json
+{
+  "version": 2,
+  "previousVersion": 1,
+  "path": "assets/banners/landing-pages/banner_claude-launch_hero-image_20251209_v2.png",
+  "changes": "Updated CTA button color to match brand refresh",
+  "createdAt": "2025-12-09T12:00:00Z",
+  "createdBy": "agent:ui-designer"
+}
+```
+
+## Tagging System
+
+### Standard Tags
+| Category | Values |
+|----------|--------|
+| status | draft, review, approved, archived |
+| platform | instagram, twitter, linkedin, facebook, youtube, email, web |
+| content-type | promotional, educational, brand, product, testimonial |
+| format | 1x1, 4x5, 9x16, 16x9, story, reel, banner |
+| source | imagen-4, veo-3, user-upload, canva, figma |
+
+### Tag Usage
+- Each asset should have: status + platform + content-type
+- Optional: format, source, campaign
+
+## File Organization Best Practices
+
+1. **One file per variant** - Don't combine dark/light in one file
+2. **Source files separate** - Keep .psd/.fig in same structure
+3. **AI assets timestamped** - Auto-organize by generation date
+4. **Archive don't delete** - Move to `archived/` with date prefix
+5. **Large files external** - Videos > 100MB use cloud storage links
+
+## Search Patterns
+
+### By Type
+```bash
+# Find all banners
+ls assets/banners/**/*
+```
+
+### By Campaign
+```bash
+# Find all assets for specific campaign
+grep -l "claude-launch" .assets/manifest.json
+```
+
+### By Status
+```bash
+# Find approved assets only
+jq '.assets[] | select(.status == "approved")' .assets/manifest.json
+```
+
+## Cleanup Workflow
+
+1. Run `extract-colors.cjs` on new assets
+2. Validate against brand guidelines
+3. Update manifest.json with new entries
+4. Tag appropriately
+5. Remove duplicates/outdated versions

package/skills/design/uupm-brand/references/brand-guideline-template.md

@@ -0,0 +1,140 @@
+# Brand Guidelines Template
+
+Use this template to create comprehensive brand guidelines for any project.
+
+## Document Structure
+
+```markdown
+# Brand Guidelines v{X.Y}
+
+## Quick Reference
+- **Primary Color:** #XXXXXX
+- **Secondary Color:** #XXXXXX
+- **Primary Font:** {font-family}
+- **Voice:** {3 key traits}
+
+## 1. Color Palette
+
+### Primary Colors
+| Name | Hex | RGB | Usage |
+|------|-----|-----|-------|
+| {Name} | #{hex} | rgb({r},{g},{b}) | Primary brand color, CTAs, headers |
+| {Name} | #{hex} | rgb({r},{g},{b}) | Supporting accent |
+
+### Secondary Colors
+| Name | Hex | RGB | Usage |
+|------|-----|-----|-------|
+| {Name} | #{hex} | rgb({r},{g},{b}) | Secondary elements |
+| {Name} | #{hex} | rgb({r},{g},{b}) | Highlights |
+
+### Neutral Palette
+| Name | Hex | RGB | Usage |
+|------|-----|-----|-------|
+| Background | #{hex} | rgb({r},{g},{b}) | Page backgrounds |
+| Text Primary | #{hex} | rgb({r},{g},{b}) | Body text |
+| Text Secondary | #{hex} | rgb({r},{g},{b}) | Captions, muted text |
+| Border | #{hex} | rgb({r},{g},{b}) | Dividers, borders |
+
+### Accessibility
+- Text/Background Contrast: {ratio}:1 (WCAG {level})
+- CTA Contrast: {ratio}:1
+- All interactive elements meet WCAG 2.1 AA
+
+## 2. Typography
+
+### Font Stack
+```css
+--font-heading: '{Font}', sans-serif;
+--font-body: '{Font}', sans-serif;
+--font-mono: '{Font}', monospace;
+```
+
+### Type Scale
+| Element | Font | Weight | Size (Desktop/Mobile) | Line Height |
+|---------|------|--------|----------------------|-------------|
+| H1 | {font} | 700 | 48px / 32px | 1.2 |
+| H2 | {font} | 600 | 36px / 28px | 1.25 |
+| H3 | {font} | 600 | 28px / 24px | 1.3 |
+| H4 | {font} | 600 | 24px / 20px | 1.35 |
+| Body | {font} | 400 | 16px / 16px | 1.5 |
+| Small | {font} | 400 | 14px / 14px | 1.5 |
+| Caption | {font} | 400 | 12px / 12px | 1.4 |
+
+## 3. Logo Usage
+
+### Variants
+- **Primary:** Full horizontal logo with wordmark
+- **Stacked:** Vertical arrangement for square spaces
+- **Icon:** Symbol only for favicons, app icons
+- **Monochrome:** Single color for limited palettes
+
+### Clear Space
+Minimum clear space = height of logo mark
+
+### Minimum Size
+- Digital: 80px width minimum
+- Print: 25mm width minimum
+
+### Don'ts
+- Don't rotate or skew
+- Don't change colors outside approved palette
+- Don't add effects (shadows, gradients)
+- Don't crop or modify proportions
+- Don't place on busy backgrounds
+
+## 4. Voice & Tone
+
+### Brand Personality
+{Trait 1}: {Description}
+{Trait 2}: {Description}
+{Trait 3}: {Description}
+
+### Voice Chart
+| Trait | We Are | We Are Not |
+|-------|--------|------------|
+| {Trait} | {Description} | {Anti-description} |
+
+### Tone by Context
+| Context | Tone | Example |
+|---------|------|---------|
+| Marketing | {tone} | "{example}" |
+| Support | {tone} | "{example}" |
+| Error Messages | {tone} | "{example}" |
+| Success | {tone} | "{example}" |
+
+### Prohibited Terms
+- {term 1} (reason)
+- {term 2} (reason)
+
+## 5. Imagery Guidelines
+
+### Photography Style
+- {Lighting preference}
+- {Subject guidelines}
+- {Color treatment}
+
+### Illustrations
+- Style: {description}
+- Colors: Brand palette only
+- Stroke: {weight}px
+
+### Icons
+- Style: {outlined/filled/duotone}
+- Size: 24px base grid
+- Corner radius: {value}px
+```
+
+## Usage
+
+1. Copy template above
+2. Fill in brand-specific values
+3. Save as `docs/brand-guidelines.md`
+4. Reference in content workflows
+
+## Extractable Fields
+
+Scripts can extract:
+- `colors.primary`, `colors.secondary`, `colors.neutral`
+- `typography.heading`, `typography.body`
+- `voice.traits`, `voice.prohibited`
+- `logo.variants`, `logo.minSize`

package/skills/design/uupm-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/skills/design/uupm-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 |