@oriro/orirocli 0.1.11 → 0.1.12

package/skills/craft/uipm-brand/references/color-palette-management.md

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

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