@oriro/orirocli 0.1.11 → 0.1.12

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

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

@@ -1,161 +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`
-```
+# 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`
+```