@oriro/orirocli 0.1.0

package/skills/craft/uipm-brand/references/asset-organization.md

@@ -0,0 +1,167 @@
+# 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/craft/uipm-brand/references/brand-guideline-template.md

@@ -0,0 +1,161 @@
+# 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/craft/uipm-brand/references/color-palette-management.md

@@ -0,0 +1,203 @@
+# 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/craft/uipm-brand/references/consistency-checklist.md

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