@oriro/orirocli 0.1.8 → 0.1.11

package/skills/craft/uipm-banner-design/references/banner-sizes-and-styles.md

@@ -1,129 +1,129 @@
-# Banner Sizes & Art Direction Styles Reference
-
-## Complete Banner Sizes
-
-### Social Media
-
-| Platform  | Type            | Size (px)   | Aspect Ratio |
-| --------- | --------------- | ----------- | ------------ |
-| Facebook  | Cover (desktop) | 820 × 312   | ~2.6:1       |
-| Facebook  | Cover (mobile)  | 640 × 360   | ~16:9        |
-| Facebook  | Event cover     | 1920 × 1080 | 16:9         |
-| Twitter/X | Header          | 1500 × 500  | 3:1          |
-| Twitter/X | Ad banner       | 800 × 418   | ~2:1         |
-| LinkedIn  | Company cover   | 1128 × 191  | ~6:1         |
-| LinkedIn  | Personal banner | 1584 × 396  | 4:1          |
-| YouTube   | Channel art     | 2560 × 1440 | 16:9         |
-| YouTube   | Safe area       | 1546 × 423  | ~3.7:1       |
-| Instagram | Stories         | 1080 × 1920 | 9:16         |
-| Instagram | Post            | 1080 × 1080 | 1:1          |
-| Pinterest | Pin             | 1000 × 1500 | 2:3          |
-
-### Web / Display Ads (Google Display Network)
-
-| Name             | Size (px) | Notes          |
-| ---------------- | --------- | -------------- |
-| Medium Rectangle | 300 × 250 | Highest CTR    |
-| Leaderboard      | 728 × 90  | Top of page    |
-| Wide Skyscraper  | 160 × 600 | Sidebar        |
-| Half Page        | 300 × 600 | Premium        |
-| Large Rectangle  | 336 × 280 | High performer |
-| Mobile Banner    | 320 × 50  | Mobile default |
-| Large Mobile     | 320 × 100 | Mobile hero    |
-| Billboard        | 970 × 250 | Desktop hero   |
-
-### Website
-
-| Type            | Size (px)       |
-| --------------- | --------------- |
-| Full-width hero | 1920 × 600–1080 |
-| Section banner  | 1200 × 400      |
-| Blog header     | 1200 × 628      |
-| Email header    | 600 × 200       |
-
-### Print
-
-| Type            | Size           |
-| --------------- | -------------- |
-| Roll-up         | 850mm × 2000mm |
-| Step-and-repeat | 8ft × 8ft      |
-| Vinyl outdoor   | 6ft × 3ft      |
-| Trade show      | 33in × 78in    |
-
-## 22 Art Direction Styles
-
-1. **Minimalist** — White space dominant, single focal element, 1-2 colors, clean sans-serif
-2. **Bold Typography** — Type IS the design; oversized, expressive letterforms fill canvas
-3. **Gradient / Color Wash** — Smooth transitions, mesh gradients, chromatic blends
-4. **Photo-Based** — Full-bleed photography with text overlay; hero lifestyle imagery
-5. **Illustrated / Hand-Drawn** — Custom illustrations, bespoke icons, artisan feel
-6. **Geometric / Abstract** — Shapes, lines, grids as primary visual elements
-7. **Retro / Vintage** — Distressed textures, muted palettes, serif type, halftone dots
-8. **Glassmorphism** — Frosted glass panels, blur backdrop, subtle border glow
-9. **3D / Sculptural** — Rendered objects, depth, shadows; product-centric
-10. **Neon / Cyberpunk** — Dark backgrounds, glowing neon accents, high contrast
-11. **Duotone** — Two-color photo treatment; bold brand color overlay on image
-12. **Editorial / Magazine** — Grid-heavy layouts, pull quotes, journalistic composition
-13. **Collage / Mixed Media** — Cut-paper textures, photo cutouts, layered elements
-14. **Retro Futurism** — Space-age nostalgia, chrome, gradients, optimism
-15. **Expressive / Anti-Design** — Chaotic layouts, mixed fonts, deliberate "wrong" composition
-16. **Digi-Cute / Kawaii** — Rounded shapes, pastel gradients, pixel art, playful characters
-17. **Tactile / Sensory** — Puffy/squishy textures, hyper-real materials, embossed feel
-18. **Data / Infographic** — Stats front-and-center, charts, numbers as heroes
-19. **Dark Mode / Moody** — Near-black backgrounds, rich jewel tones, high contrast
-20. **Flat / Solid Color** — Single background color, clean icons, no gradients
-21. **Nature / Organic** — Earthy tones, botanical motifs, sustainable brand feel
-22. **Motion-Ready / Kinetic** — Designed for animation; layered elements, loopable
-
-## Design Principles
-
-### Visual Hierarchy (3-Zone Rule)
-
-- **Top**: Logo or main value prop
-- **Middle**: Supporting message + visuals
-- **Bottom**: CTA (button/QR/URL)
-
-### Safe Zones
-
-- Critical content in central 70-80% of canvas
-- Avoid text/CTA within 50-100px of edges
-- YouTube: 1546 × 423px safe area inside 2560 × 1440
-- Meta/Instagram: central 80% to avoid UI chrome
-
-### CTA Rules
-
-- One CTA per banner
-- High contrast vs background
-- Bottom-right placement (terminal area)
-- Min 44px height for mobile tap targets
-- Action verbs: "Get", "Start", "Download", "Claim"
-
-### Typography
-
-- Max 2 typefaces per banner
-- Min 16px body, ≥32px headline (digital)
-- Min 4.5:1 contrast ratio
-- Max 7 words/line, 3 lines for ads
-
-### Text-to-Image Ratio
-
-- Ads: under 20% text (Meta penalizes)
-- Social covers: 60/40 image-to-text
-- Print: 70pt+ headlines for 3-5m viewing distance
-
-### Print Specs
-
-- 300 DPI minimum (150 DPI for large format)
-- 3-5mm bleed all sides
-- CMYK color mode
-- 1pt per foot viewing distance rule
-
-## Pinterest Research Queries
-
-Use these search queries on Pinterest for art direction references:
-
-- `[purpose] banner design [style]` (e.g., "social media banner minimalist")
-- `[platform] cover design inspiration` (e.g., "youtube channel art design")
-- `creative banner layout [industry]` (e.g., "creative banner layout tech startup")
-- `[style] graphic design 2026` (e.g., "gradient graphic design 2026")
-- `banner ad design [product type]` (e.g., "banner ad design saas")
+# Banner Sizes & Art Direction Styles Reference
+
+## Complete Banner Sizes
+
+### Social Media
+
+| Platform  | Type            | Size (px)   | Aspect Ratio |
+| --------- | --------------- | ----------- | ------------ |
+| Facebook  | Cover (desktop) | 820 × 312   | ~2.6:1       |
+| Facebook  | Cover (mobile)  | 640 × 360   | ~16:9        |
+| Facebook  | Event cover     | 1920 × 1080 | 16:9         |
+| Twitter/X | Header          | 1500 × 500  | 3:1          |
+| Twitter/X | Ad banner       | 800 × 418   | ~2:1         |
+| LinkedIn  | Company cover   | 1128 × 191  | ~6:1         |
+| LinkedIn  | Personal banner | 1584 × 396  | 4:1          |
+| YouTube   | Channel art     | 2560 × 1440 | 16:9         |
+| YouTube   | Safe area       | 1546 × 423  | ~3.7:1       |
+| Instagram | Stories         | 1080 × 1920 | 9:16         |
+| Instagram | Post            | 1080 × 1080 | 1:1          |
+| Pinterest | Pin             | 1000 × 1500 | 2:3          |
+
+### Web / Display Ads (Google Display Network)
+
+| Name             | Size (px) | Notes          |
+| ---------------- | --------- | -------------- |
+| Medium Rectangle | 300 × 250 | Highest CTR    |
+| Leaderboard      | 728 × 90  | Top of page    |
+| Wide Skyscraper  | 160 × 600 | Sidebar        |
+| Half Page        | 300 × 600 | Premium        |
+| Large Rectangle  | 336 × 280 | High performer |
+| Mobile Banner    | 320 × 50  | Mobile default |
+| Large Mobile     | 320 × 100 | Mobile hero    |
+| Billboard        | 970 × 250 | Desktop hero   |
+
+### Website
+
+| Type            | Size (px)       |
+| --------------- | --------------- |
+| Full-width hero | 1920 × 600–1080 |
+| Section banner  | 1200 × 400      |
+| Blog header     | 1200 × 628      |
+| Email header    | 600 × 200       |
+
+### Print
+
+| Type            | Size           |
+| --------------- | -------------- |
+| Roll-up         | 850mm × 2000mm |
+| Step-and-repeat | 8ft × 8ft      |
+| Vinyl outdoor   | 6ft × 3ft      |
+| Trade show      | 33in × 78in    |
+
+## 22 Art Direction Styles
+
+1. **Minimalist** — White space dominant, single focal element, 1-2 colors, clean sans-serif
+2. **Bold Typography** — Type IS the design; oversized, expressive letterforms fill canvas
+3. **Gradient / Color Wash** — Smooth transitions, mesh gradients, chromatic blends
+4. **Photo-Based** — Full-bleed photography with text overlay; hero lifestyle imagery
+5. **Illustrated / Hand-Drawn** — Custom illustrations, bespoke icons, artisan feel
+6. **Geometric / Abstract** — Shapes, lines, grids as primary visual elements
+7. **Retro / Vintage** — Distressed textures, muted palettes, serif type, halftone dots
+8. **Glassmorphism** — Frosted glass panels, blur backdrop, subtle border glow
+9. **3D / Sculptural** — Rendered objects, depth, shadows; product-centric
+10. **Neon / Cyberpunk** — Dark backgrounds, glowing neon accents, high contrast
+11. **Duotone** — Two-color photo treatment; bold brand color overlay on image
+12. **Editorial / Magazine** — Grid-heavy layouts, pull quotes, journalistic composition
+13. **Collage / Mixed Media** — Cut-paper textures, photo cutouts, layered elements
+14. **Retro Futurism** — Space-age nostalgia, chrome, gradients, optimism
+15. **Expressive / Anti-Design** — Chaotic layouts, mixed fonts, deliberate "wrong" composition
+16. **Digi-Cute / Kawaii** — Rounded shapes, pastel gradients, pixel art, playful characters
+17. **Tactile / Sensory** — Puffy/squishy textures, hyper-real materials, embossed feel
+18. **Data / Infographic** — Stats front-and-center, charts, numbers as heroes
+19. **Dark Mode / Moody** — Near-black backgrounds, rich jewel tones, high contrast
+20. **Flat / Solid Color** — Single background color, clean icons, no gradients
+21. **Nature / Organic** — Earthy tones, botanical motifs, sustainable brand feel
+22. **Motion-Ready / Kinetic** — Designed for animation; layered elements, loopable
+
+## Design Principles
+
+### Visual Hierarchy (3-Zone Rule)
+
+- **Top**: Logo or main value prop
+- **Middle**: Supporting message + visuals
+- **Bottom**: CTA (button/QR/URL)
+
+### Safe Zones
+
+- Critical content in central 70-80% of canvas
+- Avoid text/CTA within 50-100px of edges
+- YouTube: 1546 × 423px safe area inside 2560 × 1440
+- Meta/Instagram: central 80% to avoid UI chrome
+
+### CTA Rules
+
+- One CTA per banner
+- High contrast vs background
+- Bottom-right placement (terminal area)
+- Min 44px height for mobile tap targets
+- Action verbs: "Get", "Start", "Download", "Claim"
+
+### Typography
+
+- Max 2 typefaces per banner
+- Min 16px body, ≥32px headline (digital)
+- Min 4.5:1 contrast ratio
+- Max 7 words/line, 3 lines for ads
+
+### Text-to-Image Ratio
+
+- Ads: under 20% text (Meta penalizes)
+- Social covers: 60/40 image-to-text
+- Print: 70pt+ headlines for 3-5m viewing distance
+
+### Print Specs
+
+- 300 DPI minimum (150 DPI for large format)
+- 3-5mm bleed all sides
+- CMYK color mode
+- 1pt per foot viewing distance rule
+
+## Pinterest Research Queries
+
+Use these search queries on Pinterest for art direction references:
+
+- `[purpose] banner design [style]` (e.g., "social media banner minimalist")
+- `[platform] cover design inspiration` (e.g., "youtube channel art design")
+- `creative banner layout [industry]` (e.g., "creative banner layout tech startup")
+- `[style] graphic design 2026` (e.g., "gradient graphic design 2026")
+- `banner ad design [product type]` (e.g., "banner ad design saas")

package/skills/craft/uipm-brand/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2026 ORIRO.ai
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2026 ORIRO.ai
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/skills/craft/uipm-brand/SKILL.md

@@ -1,104 +1,104 @@
----
-watermark: ORIRO
-name: uipm-brand
-provider: ORIRO.ai
-copyright: Copyright (c) 2026 ORIRO.ai
-description: Brand voice, visual identity, messaging frameworks, asset management, brand consistency. Activate for branded content, tone of voice, marketing assets, brand compliance, style guides.
-argument-hint: "[update|review|create] [args]"
-metadata:
-  author: ORIRO.ai
-  version: "1.0.0"
----
-
-# Brand
-
-Brand identity, voice, messaging, asset management, and consistency frameworks.
-
-## When to Use
-
-- Brand voice definition and content tone guidance
-- Visual identity standards and style guide development
-- Messaging framework creation
-- Brand consistency review and audit
-- Asset organization, naming, and approval
-- Color palette management and typography specs
-
-## Quick Start
-
-**Inject brand context into prompts:**
-
-```bash
-node scripts/inject-brand-context.cjs
-node scripts/inject-brand-context.cjs --json
-```
-
-**Validate an asset:**
-
-```bash
-node scripts/validate-asset.cjs <asset-path>
-```
-
-**Extract/compare colors:**
-
-```bash
-node scripts/extract-colors.cjs --palette
-node scripts/extract-colors.cjs <image-path>
-```
-
-## Brand Sync Workflow
-
-```bash
-# 1. Edit docs/brand-guidelines.md (or use /brand update)
-# 2. Sync to design tokens
-node scripts/sync-brand-to-tokens.cjs
-# 3. Verify
-node scripts/inject-brand-context.cjs --json | head -20
-```
-
-**Files synced:**
-
-- `docs/brand-guidelines.md` → Source of truth
-- `assets/design-tokens.json` → Token definitions
-- `assets/design-tokens.css` → CSS variables
-
-## Subcommands
-
-| Subcommand | Description                                          | Reference              |
-| ---------- | ---------------------------------------------------- | ---------------------- |
-| `update`   | Update brand identity and sync to all design systems | `references/update.md` |
-
-## References
-
-| Topic               | File                                      |
-| ------------------- | ----------------------------------------- |
-| Voice Framework     | `references/voice-framework.md`           |
-| Visual Identity     | `references/visual-identity.md`           |
-| Messaging           | `references/messaging-framework.md`       |
-| Consistency         | `references/consistency-checklist.md`     |
-| Guidelines Template | `references/brand-guideline-template.md`  |
-| Asset Organization  | `references/asset-organization.md`        |
-| Color Management    | `references/color-palette-management.md`  |
-| Typography          | `references/typography-specifications.md` |
-| Logo Usage          | `references/logo-usage-rules.md`          |
-| Approval Checklist  | `references/approval-checklist.md`        |
-
-## Scripts
-
-| Script                             | Purpose                                           |
-| ---------------------------------- | ------------------------------------------------- |
-| `scripts/inject-brand-context.cjs` | Extract brand context for prompt injection        |
-| `scripts/sync-brand-to-tokens.cjs` | Sync brand-guidelines.md → design-tokens.json/css |
-| `scripts/validate-asset.cjs`       | Validate asset naming, size, format               |
-| `scripts/extract-colors.cjs`       | Extract and compare colors against palette        |
-
-## Templates
-
-| Template                                | Purpose                                  |
-| --------------------------------------- | ---------------------------------------- |
-| `templates/brand-guidelines-starter.md` | Complete starter template for new brands |
-
-## Routing
-
-1. Parse subcommand from `$ARGUMENTS` (first word)
-2. Load corresponding `references/{subcommand}.md`
-3. Execute with remaining arguments
+---
+watermark: ORIRO
+name: uipm-brand
+provider: ORIRO.ai
+copyright: Copyright (c) 2026 ORIRO.ai
+description: Brand voice, visual identity, messaging frameworks, asset management, brand consistency. Activate for branded content, tone of voice, marketing assets, brand compliance, style guides.
+argument-hint: "[update|review|create] [args]"
+metadata:
+  author: ORIRO.ai
+  version: "1.0.0"
+---
+
+# Brand
+
+Brand identity, voice, messaging, asset management, and consistency frameworks.
+
+## When to Use
+
+- Brand voice definition and content tone guidance
+- Visual identity standards and style guide development
+- Messaging framework creation
+- Brand consistency review and audit
+- Asset organization, naming, and approval
+- Color palette management and typography specs
+
+## Quick Start
+
+**Inject brand context into prompts:**
+
+```bash
+node scripts/inject-brand-context.cjs
+node scripts/inject-brand-context.cjs --json
+```
+
+**Validate an asset:**
+
+```bash
+node scripts/validate-asset.cjs <asset-path>
+```
+
+**Extract/compare colors:**
+
+```bash
+node scripts/extract-colors.cjs --palette
+node scripts/extract-colors.cjs <image-path>
+```
+
+## Brand Sync Workflow
+
+```bash
+# 1. Edit docs/brand-guidelines.md (or use /brand update)
+# 2. Sync to design tokens
+node scripts/sync-brand-to-tokens.cjs
+# 3. Verify
+node scripts/inject-brand-context.cjs --json | head -20
+```
+
+**Files synced:**
+
+- `docs/brand-guidelines.md` → Source of truth
+- `assets/design-tokens.json` → Token definitions
+- `assets/design-tokens.css` → CSS variables
+
+## Subcommands
+
+| Subcommand | Description                                          | Reference              |
+| ---------- | ---------------------------------------------------- | ---------------------- |
+| `update`   | Update brand identity and sync to all design systems | `references/update.md` |
+
+## References
+
+| Topic               | File                                      |
+| ------------------- | ----------------------------------------- |
+| Voice Framework     | `references/voice-framework.md`           |
+| Visual Identity     | `references/visual-identity.md`           |
+| Messaging           | `references/messaging-framework.md`       |
+| Consistency         | `references/consistency-checklist.md`     |
+| Guidelines Template | `references/brand-guideline-template.md`  |
+| Asset Organization  | `references/asset-organization.md`        |
+| Color Management    | `references/color-palette-management.md`  |
+| Typography          | `references/typography-specifications.md` |
+| Logo Usage          | `references/logo-usage-rules.md`          |
+| Approval Checklist  | `references/approval-checklist.md`        |
+
+## Scripts
+
+| Script                             | Purpose                                           |
+| ---------------------------------- | ------------------------------------------------- |
+| `scripts/inject-brand-context.cjs` | Extract brand context for prompt injection        |
+| `scripts/sync-brand-to-tokens.cjs` | Sync brand-guidelines.md → design-tokens.json/css |
+| `scripts/validate-asset.cjs`       | Validate asset naming, size, format               |
+| `scripts/extract-colors.cjs`       | Extract and compare colors against palette        |
+
+## Templates
+
+| Template                                | Purpose                                  |
+| --------------------------------------- | ---------------------------------------- |
+| `templates/brand-guidelines-starter.md` | Complete starter template for new brands |
+
+## Routing
+
+1. Parse subcommand from `$ARGUMENTS` (first word)
+2. Load corresponding `references/{subcommand}.md`
+3. Execute with remaining arguments