@oriro/orirocli 0.1.8 → 0.1.11

package/skills/craft/uipm-design-system/SKILL.md

@@ -1,255 +1,255 @@
----
-watermark: ORIRO
-name: uipm-design-system
-provider: ORIRO.ai
-copyright: Copyright (c) 2026 ORIRO.ai
-description: Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide creation. Use for design tokens, systematic design, brand-compliant presentations.
-argument-hint: "[component or token]"
-license: MIT
-metadata:
-  author: ORIRO.ai
-  version: "1.0.0"
----
-
-# Design System
-
-Token architecture, component specifications, systematic design, slide generation.
-
-## When to Use
-
-- Design token creation
-- Component state definitions
-- CSS variable systems
-- Spacing/typography scales
-- Design-to-code handoff
-- Tailwind theme configuration
-- **Slide/presentation generation**
-
-## Token Architecture
-
-Load: `references/token-architecture.md`
-
-### Three-Layer Structure
-
-```
-Primitive (raw values)
-       ↓
-Semantic (purpose aliases)
-       ↓
-Component (component-specific)
-```
-
-**Example:**
-
-```css
-/* Primitive */
---color-blue-600: #2563eb;
-
-/* Semantic */
---color-primary: var(--color-blue-600);
-
-/* Component */
---button-bg: var(--color-primary);
-```
-
-## Quick Start
-
-**Generate tokens:**
-
-```bash
-node scripts/generate-tokens.cjs --config tokens.json -o tokens.css
-```
-
-**Validate usage:**
-
-```bash
-node scripts/validate-tokens.cjs --dir src/
-```
-
-## References
-
-| Topic                | File                                 |
-| -------------------- | ------------------------------------ |
-| Token Architecture   | `references/token-architecture.md`   |
-| Primitive Tokens     | `references/primitive-tokens.md`     |
-| Semantic Tokens      | `references/semantic-tokens.md`      |
-| Component Tokens     | `references/component-tokens.md`     |
-| Component Specs      | `references/component-specs.md`      |
-| States & Variants    | `references/states-and-variants.md`  |
-| Tailwind Integration | `references/tailwind-integration.md` |
-
-## Component Spec Pattern
-
-| Property   | Default | Hover        | Active         | Disabled     |
-| ---------- | ------- | ------------ | -------------- | ------------ |
-| Background | primary | primary-dark | primary-darker | muted        |
-| Text       | white   | white        | white          | muted-fg     |
-| Border     | none    | none         | none           | muted-border |
-| Shadow     | sm      | md           | none           | none         |
-
-## Scripts
-
-| Script                     | Purpose                                  |
-| -------------------------- | ---------------------------------------- |
-| `generate-tokens.cjs`      | Generate CSS from JSON token config      |
-| `validate-tokens.cjs`      | Check for hardcoded values in code       |
-| `search-slides.py`         | BM25 search + contextual recommendations |
-| `slide-token-validator.py` | Validate slide HTML for token compliance |
-| `fetch-background.py`      | Fetch images from Pexels/Unsplash        |
-
-## Templates
-
-| Template                     | Purpose                                 |
-| ---------------------------- | --------------------------------------- |
-| `design-tokens-starter.json` | Starter JSON with three-layer structure |
-
-## Integration
-
-**With brand:** Extract primitives from brand colors/typography
-**With ui-styling:** Component tokens → Tailwind config
-
-**Skill Dependencies:** brand, ui-styling
-**Primary Agents:** ui-ux-designer, frontend-developer
-
-## Slide System
-
-Brand-compliant presentations using design tokens + Chart.js + contextual decision system.
-
-### Source of Truth
-
-| File                              | Purpose                                          |
-| --------------------------------- | ------------------------------------------------ |
-| `docs/brand-guidelines.md`        | Brand identity, voice, colors                    |
-| `assets/design-tokens.json`       | Token definitions (primitive→semantic→component) |
-| `assets/design-tokens.css`        | CSS variables (import in slides)                 |
-| `assets/css/slide-animations.css` | CSS animation library                            |
-
-### Slide Search (BM25)
-
-```bash
-# Basic search (auto-detect domain)
-python scripts/search-slides.py "investor pitch"
-
-# Domain-specific search
-python scripts/search-slides.py "problem agitation" -d copy
-python scripts/search-slides.py "revenue growth" -d chart
-
-# Contextual search (Premium System)
-python scripts/search-slides.py "problem slide" --context --position 2 --total 9
-python scripts/search-slides.py "cta" --context --position 9 --prev-emotion frustration
-```
-
-### Decision System CSVs
-
-| File                          | Purpose                                             |
-| ----------------------------- | --------------------------------------------------- |
-| `data/slide-strategies.csv`   | 15 deck structures + emotion arcs + sparkline beats |
-| `data/slide-layouts.csv`      | 25 layouts + component variants + animations        |
-| `data/slide-layout-logic.csv` | Goal → Layout + break_pattern flag                  |
-| `data/slide-typography.csv`   | Content type → Typography scale                     |
-| `data/slide-color-logic.csv`  | Emotion → Color treatment                           |
-| `data/slide-backgrounds.csv`  | Slide type → Image category (Pexels/Unsplash)       |
-| `data/slide-copy.csv`         | 25 copywriting formulas (PAS, AIDA, FAB)            |
-| `data/slide-charts.csv`       | 25 chart types with Chart.js config                 |
-
-### Contextual Decision Flow
-
-```
-1. Parse goal/context
-        ↓
-2. Search slide-strategies.csv → Get strategy + emotion beats
-        ↓
-3. For each slide:
-   a. Query slide-layout-logic.csv → layout + break_pattern
-   b. Query slide-typography.csv → type scale
-   c. Query slide-color-logic.csv → color treatment
-   d. Query slide-backgrounds.csv → image if needed
-   e. Apply animation class from slide-animations.css
-        ↓
-4. Generate HTML with design tokens
-        ↓
-5. Validate with slide-token-validator.py
-```
-
-### Pattern Breaking (Duarte Sparkline)
-
-Premium decks alternate between emotions for engagement:
-
-```
-"What Is" (frustration) ↔ "What Could Be" (hope)
-```
-
-System calculates pattern breaks at 1/3 and 2/3 positions.
-
-### Slide Requirements
-
-**ALL slides MUST:**
-
-1. Import `assets/design-tokens.css` - single source of truth
-2. Use CSS variables: `var(--color-primary)`, `var(--slide-bg)`, etc.
-3. Use Chart.js for charts (NOT CSS-only bars)
-4. Include navigation (keyboard arrows, click, progress bar)
-5. Center align content
-6. Focus on persuasion/conversion
-
-### Chart.js Integration
-
-```html
-<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
-
-<canvas id="revenueChart"></canvas>
-<script>
-  new Chart(document.getElementById("revenueChart"), {
-    type: "line",
-    data: {
-      labels: ["Sep", "Oct", "Nov", "Dec"],
-      datasets: [
-        {
-          data: [5, 12, 28, 45],
-          borderColor: "#FF6B6B", // Use brand coral
-          backgroundColor: "rgba(255, 107, 107, 0.1)",
-          fill: true,
-          tension: 0.4,
-        },
-      ],
-    },
-  });
-</script>
-```
-
-### Token Compliance
-
-```css
-/* CORRECT - uses token */
-background: var(--slide-bg);
-color: var(--color-primary);
-font-family: var(--typography-font-heading);
-
-/* WRONG - hardcoded */
-background: #0d0d0d;
-color: #ff6b6b;
-font-family: "Space Grotesk";
-```
-
-### Reference Implementation
-
-Working example with all features:
-
-```
-assets/designs/slides/ORIRO.ai-pitch-251223.html
-```
-
-### Command
-
-```bash
-/slides:create "10-slide investor pitch for ORIRO.ai"
-```
-
-## Best Practices
-
-1. Never use raw hex in components - always reference tokens
-2. Semantic layer enables theme switching (light/dark)
-3. Component tokens enable per-component customization
-4. Use HSL format for opacity control
-5. Document every token's purpose
-6. **Slides must import design-tokens.css and use var() exclusively**
+---
+watermark: ORIRO
+name: uipm-design-system
+provider: ORIRO.ai
+copyright: Copyright (c) 2026 ORIRO.ai
+description: Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide creation. Use for design tokens, systematic design, brand-compliant presentations.
+argument-hint: "[component or token]"
+license: MIT
+metadata:
+  author: ORIRO.ai
+  version: "1.0.0"
+---
+
+# Design System
+
+Token architecture, component specifications, systematic design, slide generation.
+
+## When to Use
+
+- Design token creation
+- Component state definitions
+- CSS variable systems
+- Spacing/typography scales
+- Design-to-code handoff
+- Tailwind theme configuration
+- **Slide/presentation generation**
+
+## Token Architecture
+
+Load: `references/token-architecture.md`
+
+### Three-Layer Structure
+
+```
+Primitive (raw values)
+       ↓
+Semantic (purpose aliases)
+       ↓
+Component (component-specific)
+```
+
+**Example:**
+
+```css
+/* Primitive */
+--color-blue-600: #2563eb;
+
+/* Semantic */
+--color-primary: var(--color-blue-600);
+
+/* Component */
+--button-bg: var(--color-primary);
+```
+
+## Quick Start
+
+**Generate tokens:**
+
+```bash
+node scripts/generate-tokens.cjs --config tokens.json -o tokens.css
+```
+
+**Validate usage:**
+
+```bash
+node scripts/validate-tokens.cjs --dir src/
+```
+
+## References
+
+| Topic                | File                                 |
+| -------------------- | ------------------------------------ |
+| Token Architecture   | `references/token-architecture.md`   |
+| Primitive Tokens     | `references/primitive-tokens.md`     |
+| Semantic Tokens      | `references/semantic-tokens.md`      |
+| Component Tokens     | `references/component-tokens.md`     |
+| Component Specs      | `references/component-specs.md`      |
+| States & Variants    | `references/states-and-variants.md`  |
+| Tailwind Integration | `references/tailwind-integration.md` |
+
+## Component Spec Pattern
+
+| Property   | Default | Hover        | Active         | Disabled     |
+| ---------- | ------- | ------------ | -------------- | ------------ |
+| Background | primary | primary-dark | primary-darker | muted        |
+| Text       | white   | white        | white          | muted-fg     |
+| Border     | none    | none         | none           | muted-border |
+| Shadow     | sm      | md           | none           | none         |
+
+## Scripts
+
+| Script                     | Purpose                                  |
+| -------------------------- | ---------------------------------------- |
+| `generate-tokens.cjs`      | Generate CSS from JSON token config      |
+| `validate-tokens.cjs`      | Check for hardcoded values in code       |
+| `search-slides.py`         | BM25 search + contextual recommendations |
+| `slide-token-validator.py` | Validate slide HTML for token compliance |
+| `fetch-background.py`      | Fetch images from Pexels/Unsplash        |
+
+## Templates
+
+| Template                     | Purpose                                 |
+| ---------------------------- | --------------------------------------- |
+| `design-tokens-starter.json` | Starter JSON with three-layer structure |
+
+## Integration
+
+**With brand:** Extract primitives from brand colors/typography
+**With ui-styling:** Component tokens → Tailwind config
+
+**Skill Dependencies:** brand, ui-styling
+**Primary Agents:** ui-ux-designer, frontend-developer
+
+## Slide System
+
+Brand-compliant presentations using design tokens + Chart.js + contextual decision system.
+
+### Source of Truth
+
+| File                              | Purpose                                          |
+| --------------------------------- | ------------------------------------------------ |
+| `docs/brand-guidelines.md`        | Brand identity, voice, colors                    |
+| `assets/design-tokens.json`       | Token definitions (primitive→semantic→component) |
+| `assets/design-tokens.css`        | CSS variables (import in slides)                 |
+| `assets/css/slide-animations.css` | CSS animation library                            |
+
+### Slide Search (BM25)
+
+```bash
+# Basic search (auto-detect domain)
+python scripts/search-slides.py "investor pitch"
+
+# Domain-specific search
+python scripts/search-slides.py "problem agitation" -d copy
+python scripts/search-slides.py "revenue growth" -d chart
+
+# Contextual search (Premium System)
+python scripts/search-slides.py "problem slide" --context --position 2 --total 9
+python scripts/search-slides.py "cta" --context --position 9 --prev-emotion frustration
+```
+
+### Decision System CSVs
+
+| File                          | Purpose                                             |
+| ----------------------------- | --------------------------------------------------- |
+| `data/slide-strategies.csv`   | 15 deck structures + emotion arcs + sparkline beats |
+| `data/slide-layouts.csv`      | 25 layouts + component variants + animations        |
+| `data/slide-layout-logic.csv` | Goal → Layout + break_pattern flag                  |
+| `data/slide-typography.csv`   | Content type → Typography scale                     |
+| `data/slide-color-logic.csv`  | Emotion → Color treatment                           |
+| `data/slide-backgrounds.csv`  | Slide type → Image category (Pexels/Unsplash)       |
+| `data/slide-copy.csv`         | 25 copywriting formulas (PAS, AIDA, FAB)            |
+| `data/slide-charts.csv`       | 25 chart types with Chart.js config                 |
+
+### Contextual Decision Flow
+
+```
+1. Parse goal/context
+        ↓
+2. Search slide-strategies.csv → Get strategy + emotion beats
+        ↓
+3. For each slide:
+   a. Query slide-layout-logic.csv → layout + break_pattern
+   b. Query slide-typography.csv → type scale
+   c. Query slide-color-logic.csv → color treatment
+   d. Query slide-backgrounds.csv → image if needed
+   e. Apply animation class from slide-animations.css
+        ↓
+4. Generate HTML with design tokens
+        ↓
+5. Validate with slide-token-validator.py
+```
+
+### Pattern Breaking (Duarte Sparkline)
+
+Premium decks alternate between emotions for engagement:
+
+```
+"What Is" (frustration) ↔ "What Could Be" (hope)
+```
+
+System calculates pattern breaks at 1/3 and 2/3 positions.
+
+### Slide Requirements
+
+**ALL slides MUST:**
+
+1. Import `assets/design-tokens.css` - single source of truth
+2. Use CSS variables: `var(--color-primary)`, `var(--slide-bg)`, etc.
+3. Use Chart.js for charts (NOT CSS-only bars)
+4. Include navigation (keyboard arrows, click, progress bar)
+5. Center align content
+6. Focus on persuasion/conversion
+
+### Chart.js Integration
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
+
+<canvas id="revenueChart"></canvas>
+<script>
+  new Chart(document.getElementById("revenueChart"), {
+    type: "line",
+    data: {
+      labels: ["Sep", "Oct", "Nov", "Dec"],
+      datasets: [
+        {
+          data: [5, 12, 28, 45],
+          borderColor: "#FF6B6B", // Use brand coral
+          backgroundColor: "rgba(255, 107, 107, 0.1)",
+          fill: true,
+          tension: 0.4,
+        },
+      ],
+    },
+  });
+</script>
+```
+
+### Token Compliance
+
+```css
+/* CORRECT - uses token */
+background: var(--slide-bg);
+color: var(--color-primary);
+font-family: var(--typography-font-heading);
+
+/* WRONG - hardcoded */
+background: #0d0d0d;
+color: #ff6b6b;
+font-family: "Space Grotesk";
+```
+
+### Reference Implementation
+
+Working example with all features:
+
+```
+assets/designs/slides/ORIRO.ai-pitch-251223.html
+```
+
+### Command
+
+```bash
+/slides:create "10-slide investor pitch for ORIRO.ai"
+```
+
+## Best Practices
+
+1. Never use raw hex in components - always reference tokens
+2. Semantic layer enables theme switching (light/dark)
+3. Component tokens enable per-component customization
+4. Use HSL format for opacity control
+5. Document every token's purpose
+6. **Slides must import design-tokens.css and use var() exclusively**

package/skills/craft/uipm-design-system/data/slide-backgrounds.csv

@@ -1,11 +1,11 @@
-slide_type,image_category,overlay_style,text_placement,image_sources,search_keywords
-hero,abstract-tech,gradient-dark,center,pexels:unsplash,technology abstract gradient dark
-vision,future-workspace,gradient-brand,left,pexels:unsplash,futuristic office modern workspace
-team,professional-people,gradient-dark,bottom,pexels:unsplash,business team professional diverse
-testimonial,office-environment,blur-dark,center,pexels:unsplash,modern office workspace bright
-cta,celebration-success,gradient-brand,center,pexels:unsplash,success celebration achievement
-problem,frustration-pain,desaturate-dark,center,pexels:unsplash,stress frustration problem dark
-solution,breakthrough-moment,gradient-accent,right,pexels:unsplash,breakthrough success innovation light
-hook,attention-grabbing,gradient-dark,center,pexels:unsplash,dramatic abstract attention bold
-social,community-connection,blur-dark,center,pexels:unsplash,community collaboration connection
-demo,product-showcase,gradient-dark,left,pexels:unsplash,technology product showcase clean
+slide_type,image_category,overlay_style,text_placement,image_sources,search_keywords
+hero,abstract-tech,gradient-dark,center,pexels:unsplash,technology abstract gradient dark
+vision,future-workspace,gradient-brand,left,pexels:unsplash,futuristic office modern workspace
+team,professional-people,gradient-dark,bottom,pexels:unsplash,business team professional diverse
+testimonial,office-environment,blur-dark,center,pexels:unsplash,modern office workspace bright
+cta,celebration-success,gradient-brand,center,pexels:unsplash,success celebration achievement
+problem,frustration-pain,desaturate-dark,center,pexels:unsplash,stress frustration problem dark
+solution,breakthrough-moment,gradient-accent,right,pexels:unsplash,breakthrough success innovation light
+hook,attention-grabbing,gradient-dark,center,pexels:unsplash,dramatic abstract attention bold
+social,community-connection,blur-dark,center,pexels:unsplash,community collaboration connection
+demo,product-showcase,gradient-dark,left,pexels:unsplash,technology product showcase clean

package/skills/craft/uipm-design-system/data/slide-charts.csv

@@ -1,26 +1,26 @@
-id,chart_type,keywords,best_for,data_type,when_to_use,when_to_avoid,max_categories,slide_context,css_implementation,accessibility_notes,sources
-1,Bar Chart Vertical,"bar, vertical, comparison, categories, ranking",Comparing values across categories,Categorical discrete,"Comparing 3-12 categories, showing ranking, highlighting differences",Continuous time data trends,12,Traction metrics feature comparison,"Chart.js or CSS flexbox with height percentage bars",Always label axes include values,Atlassian Data Charts
-2,Bar Chart Horizontal,"horizontal bar, ranking, long labels, categories",Categories with long names ranking,Categorical discrete,"Long category names, 5+ items, reading left-to-right natural",Few categories time series,15,Team performance competitor analysis,"CSS flexbox with width percentage bars",Natural reading direction for labels,Datylon Blog
-3,Line Chart,"line, trend, time series, growth, change over time",Showing trends over continuous time,Time series continuous,"Time-based data, showing growth trajectory, 10+ data points",Categorical comparisons,50+ points,Revenue growth MRR user growth,"Chart.js line or SVG path element",Include data point markers for screen readers,Tableau Best Practices
-4,Area Chart,"area, cumulative, volume, trend, filled line",Showing volume or magnitude over time,Time series cumulative,"Emphasizing magnitude, showing cumulative totals, comparing totals",Precise value comparison,3-4 series,Revenue breakdown market share over time,"Chart.js area or SVG path with fill",Use patterns not just colors for series,Data Visualization Guide
-5,Pie Chart,"pie, composition, percentage, parts, whole",Showing parts of a whole,Proportional percentage,"2-5 slices, showing simple composition, adds to 100%",More than 6 categories precise comparison,6 max,Market share budget allocation simple splits,"CSS conic-gradient or Chart.js pie",Never use 3D always include percentages,FusionCharts Blog
-6,Donut Chart,"donut, composition, percentage, center metric",Parts of whole with center highlight,Proportional percentage,"Like pie but need center space for key metric, 2-5 segments",Many categories,6 max,Composition with key stat in center,"CSS conic-gradient with inner circle",Same as pie include legend,Modern alternative to pie
-7,Stacked Bar,"stacked, composition, comparison, breakdown",Comparing composition across categories,Categorical + proportional,"Showing composition AND comparison, segment contribution",Too many segments precise values,5 segments,Revenue by segment across quarters,"Chart.js stacked bar or CSS nested divs",Order segments consistently use legend,Atlassian Data Charts
-8,Grouped Bar,"grouped, clustered, side by side, multi-series",Comparing multiple metrics per category,Multi-series categorical,"Direct comparison of 2-3 metrics per category",Too many groups (>4) or categories (>8),4 groups,Feature comparison pricing tiers,"Chart.js grouped bar CSS grid bars",Color code consistently across groups,Data Visualization Best Practices
-9,100% Stacked Bar,"100%, proportion, normalized, percentage",Comparing proportions across categories,Proportional comparative,"Comparing percentage breakdown across categories, not absolute values",Showing absolute values,5 segments,Market share comparison percentage breakdown,"CSS flexbox 100% width segments",Clearly indicate percentage scale,Proportional analysis
-10,Funnel Chart,"funnel, conversion, stages, drop-off, pipeline",Showing conversion or drop-off through stages,Sequential stage-based,"Sales funnel, conversion rates, sequential process with decreasing values",Non-sequential data equal stages,6-8 stages,User conversion sales pipeline,"CSS trapezoid shapes or SVG",Label each stage with count and percentage,Marketing/Sales standard
-11,Gauge Chart,"gauge, progress, goal, target, kpi",Showing progress toward a goal,Single metric vs target,"Single KPI progress, goal completion, health scores",Multiple metrics,1 metric,Goal progress health score,"CSS conic-gradient or arc SVG",Include numeric value not just visual,Dashboard widgets
-12,Sparkline,"sparkline, mini, inline, trend, compact",Showing trend in minimal space,Time series inline,"Inline metrics, table cells, compact trend indication",Detailed analysis,N/A,Metric cards with trend indicator,SVG path or canvas inline,Supplement with text for accessibility,Edward Tufte
-13,Scatter Plot,"scatter, correlation, relationship, distribution",Showing relationship between two variables,Bivariate continuous,"Correlation analysis, pattern detection, outlier identification",Categorical data simple comparisons,100+ points,Correlation analysis segmentation,Canvas or SVG circles positioned,Include trend line if meaningful,Statistical visualization
-14,Bubble Chart,"bubble, three variables, scatter, size",Showing three variables simultaneously,Trivariate continuous,"Three-variable comparison, population/size matters",Simple comparisons,30-50 bubbles,Market analysis with size dimension,"SVG circles with varying radius",Legend for size scale essential,Data Visualization Guide
-15,Heatmap,"heatmap, matrix, intensity, correlation, grid",Showing intensity across two dimensions,Matrix intensity,"Large data matrices, time-day patterns, correlation matrices",Few data points,Unlimited grid,Usage patterns correlation matrices,CSS grid with background-color intensity,Use colorblind-safe gradients,Datylon Blog
-16,Waterfall Chart,"waterfall, bridge, contribution, breakdown",Showing how values add to a total,Cumulative contribution,"Financial analysis, showing positive/negative contributions",Non-additive data,10-15 items,Revenue bridge profit breakdown,"CSS positioned bars with connectors",Clear positive/negative color coding,Financial reporting standard
-17,Treemap,"treemap, hierarchy, nested, proportion",Showing hierarchical proportional data,Hierarchical proportional,"Nested categories, space-efficient proportions, 2 levels max",Simple comparisons few items,50+ items,Budget breakdown category analysis,"CSS grid with calculated areas",Include text labels on larger segments,Ben Shneiderman
-18,Radar Chart,"radar, spider, multi-metric, profile",Comparing multiple metrics for single item,Multi-metric profile,"Comparing 5-8 metrics for one or two items, skill profiles",More than 3 items to compare,8 axes max,Feature profile skill assessment,SVG polygon on axes,Ensure scale is clear and consistent,Profile comparison
-19,Bullet Chart,"bullet, target, actual, performance",Showing actual vs target with ranges,KPI with target,"Progress against target with qualitative ranges",Simple goal tracking,1-3 per slide,KPI performance with targets,"CSS layered bars with markers",Clearly label target and actual,Stephen Few
-20,Timeline,"timeline, chronology, history, milestones",Showing events over time,Event-based temporal,"History roadmap milestones, showing progression",Quantitative comparison,10-15 events,Company history product roadmap,"CSS flexbox with positioned markers",Ensure logical reading order,Chronological visualization
-21,Sankey Diagram,"sankey, flow, distribution, connections",Showing flow or distribution between nodes,Flow distribution,"Showing how values flow from source to destination",Simple distributions,15-20 nodes,User flow budget flow,D3.js or dedicated library,Alternative text description essential,Complex flow visualization
-22,KPI Card,"kpi, metric, number, stat, scorecard",Highlighting single important metric,Single metric,"Dashboard hero metrics, emphasizing one key number",Showing trends or comparisons,1 number,Main KPI highlight,"Large font-size centered number",Include trend context if relevant,Dashboard design
-23,Progress Bar,"progress, completion, percentage, bar",Showing completion percentage,Single percentage,"Simple progress indication, goal completion",Multiple goals comparison,1 per context,Project completion goal progress,"CSS width with percentage gradient",Include numeric percentage,UI/UX standard
-24,Comparison Table,"table, comparison, matrix, features",Detailed feature or value comparison,Multi-attribute categorical,"Detailed comparison, many attributes, exact values matter",Visual impact storytelling,10-15 rows,Feature matrix pricing comparison,"HTML table with CSS styling",Proper table headers and scope,Information design
-25,Icon Array,"icon array, pictogram, proportion, visual",Showing proportions with visual metaphor,Proportional visual,"Making statistics tangible (e.g. 1 in 10 people), visual impact",Precise values large numbers,100 icons,Statistics visualization impact slides,"CSS grid or flexbox with icons",Describe proportion in text,ISOTYPE Otto Neurath
+id,chart_type,keywords,best_for,data_type,when_to_use,when_to_avoid,max_categories,slide_context,css_implementation,accessibility_notes,sources
+1,Bar Chart Vertical,"bar, vertical, comparison, categories, ranking",Comparing values across categories,Categorical discrete,"Comparing 3-12 categories, showing ranking, highlighting differences",Continuous time data trends,12,Traction metrics feature comparison,"Chart.js or CSS flexbox with height percentage bars",Always label axes include values,Atlassian Data Charts
+2,Bar Chart Horizontal,"horizontal bar, ranking, long labels, categories",Categories with long names ranking,Categorical discrete,"Long category names, 5+ items, reading left-to-right natural",Few categories time series,15,Team performance competitor analysis,"CSS flexbox with width percentage bars",Natural reading direction for labels,Datylon Blog
+3,Line Chart,"line, trend, time series, growth, change over time",Showing trends over continuous time,Time series continuous,"Time-based data, showing growth trajectory, 10+ data points",Categorical comparisons,50+ points,Revenue growth MRR user growth,"Chart.js line or SVG path element",Include data point markers for screen readers,Tableau Best Practices
+4,Area Chart,"area, cumulative, volume, trend, filled line",Showing volume or magnitude over time,Time series cumulative,"Emphasizing magnitude, showing cumulative totals, comparing totals",Precise value comparison,3-4 series,Revenue breakdown market share over time,"Chart.js area or SVG path with fill",Use patterns not just colors for series,Data Visualization Guide
+5,Pie Chart,"pie, composition, percentage, parts, whole",Showing parts of a whole,Proportional percentage,"2-5 slices, showing simple composition, adds to 100%",More than 6 categories precise comparison,6 max,Market share budget allocation simple splits,"CSS conic-gradient or Chart.js pie",Never use 3D always include percentages,FusionCharts Blog
+6,Donut Chart,"donut, composition, percentage, center metric",Parts of whole with center highlight,Proportional percentage,"Like pie but need center space for key metric, 2-5 segments",Many categories,6 max,Composition with key stat in center,"CSS conic-gradient with inner circle",Same as pie include legend,Modern alternative to pie
+7,Stacked Bar,"stacked, composition, comparison, breakdown",Comparing composition across categories,Categorical + proportional,"Showing composition AND comparison, segment contribution",Too many segments precise values,5 segments,Revenue by segment across quarters,"Chart.js stacked bar or CSS nested divs",Order segments consistently use legend,Atlassian Data Charts
+8,Grouped Bar,"grouped, clustered, side by side, multi-series",Comparing multiple metrics per category,Multi-series categorical,"Direct comparison of 2-3 metrics per category",Too many groups (>4) or categories (>8),4 groups,Feature comparison pricing tiers,"Chart.js grouped bar CSS grid bars",Color code consistently across groups,Data Visualization Best Practices
+9,100% Stacked Bar,"100%, proportion, normalized, percentage",Comparing proportions across categories,Proportional comparative,"Comparing percentage breakdown across categories, not absolute values",Showing absolute values,5 segments,Market share comparison percentage breakdown,"CSS flexbox 100% width segments",Clearly indicate percentage scale,Proportional analysis
+10,Funnel Chart,"funnel, conversion, stages, drop-off, pipeline",Showing conversion or drop-off through stages,Sequential stage-based,"Sales funnel, conversion rates, sequential process with decreasing values",Non-sequential data equal stages,6-8 stages,User conversion sales pipeline,"CSS trapezoid shapes or SVG",Label each stage with count and percentage,Marketing/Sales standard
+11,Gauge Chart,"gauge, progress, goal, target, kpi",Showing progress toward a goal,Single metric vs target,"Single KPI progress, goal completion, health scores",Multiple metrics,1 metric,Goal progress health score,"CSS conic-gradient or arc SVG",Include numeric value not just visual,Dashboard widgets
+12,Sparkline,"sparkline, mini, inline, trend, compact",Showing trend in minimal space,Time series inline,"Inline metrics, table cells, compact trend indication",Detailed analysis,N/A,Metric cards with trend indicator,SVG path or canvas inline,Supplement with text for accessibility,Edward Tufte
+13,Scatter Plot,"scatter, correlation, relationship, distribution",Showing relationship between two variables,Bivariate continuous,"Correlation analysis, pattern detection, outlier identification",Categorical data simple comparisons,100+ points,Correlation analysis segmentation,Canvas or SVG circles positioned,Include trend line if meaningful,Statistical visualization
+14,Bubble Chart,"bubble, three variables, scatter, size",Showing three variables simultaneously,Trivariate continuous,"Three-variable comparison, population/size matters",Simple comparisons,30-50 bubbles,Market analysis with size dimension,"SVG circles with varying radius",Legend for size scale essential,Data Visualization Guide
+15,Heatmap,"heatmap, matrix, intensity, correlation, grid",Showing intensity across two dimensions,Matrix intensity,"Large data matrices, time-day patterns, correlation matrices",Few data points,Unlimited grid,Usage patterns correlation matrices,CSS grid with background-color intensity,Use colorblind-safe gradients,Datylon Blog
+16,Waterfall Chart,"waterfall, bridge, contribution, breakdown",Showing how values add to a total,Cumulative contribution,"Financial analysis, showing positive/negative contributions",Non-additive data,10-15 items,Revenue bridge profit breakdown,"CSS positioned bars with connectors",Clear positive/negative color coding,Financial reporting standard
+17,Treemap,"treemap, hierarchy, nested, proportion",Showing hierarchical proportional data,Hierarchical proportional,"Nested categories, space-efficient proportions, 2 levels max",Simple comparisons few items,50+ items,Budget breakdown category analysis,"CSS grid with calculated areas",Include text labels on larger segments,Ben Shneiderman
+18,Radar Chart,"radar, spider, multi-metric, profile",Comparing multiple metrics for single item,Multi-metric profile,"Comparing 5-8 metrics for one or two items, skill profiles",More than 3 items to compare,8 axes max,Feature profile skill assessment,SVG polygon on axes,Ensure scale is clear and consistent,Profile comparison
+19,Bullet Chart,"bullet, target, actual, performance",Showing actual vs target with ranges,KPI with target,"Progress against target with qualitative ranges",Simple goal tracking,1-3 per slide,KPI performance with targets,"CSS layered bars with markers",Clearly label target and actual,Stephen Few
+20,Timeline,"timeline, chronology, history, milestones",Showing events over time,Event-based temporal,"History roadmap milestones, showing progression",Quantitative comparison,10-15 events,Company history product roadmap,"CSS flexbox with positioned markers",Ensure logical reading order,Chronological visualization
+21,Sankey Diagram,"sankey, flow, distribution, connections",Showing flow or distribution between nodes,Flow distribution,"Showing how values flow from source to destination",Simple distributions,15-20 nodes,User flow budget flow,D3.js or dedicated library,Alternative text description essential,Complex flow visualization
+22,KPI Card,"kpi, metric, number, stat, scorecard",Highlighting single important metric,Single metric,"Dashboard hero metrics, emphasizing one key number",Showing trends or comparisons,1 number,Main KPI highlight,"Large font-size centered number",Include trend context if relevant,Dashboard design
+23,Progress Bar,"progress, completion, percentage, bar",Showing completion percentage,Single percentage,"Simple progress indication, goal completion",Multiple goals comparison,1 per context,Project completion goal progress,"CSS width with percentage gradient",Include numeric percentage,UI/UX standard
+24,Comparison Table,"table, comparison, matrix, features",Detailed feature or value comparison,Multi-attribute categorical,"Detailed comparison, many attributes, exact values matter",Visual impact storytelling,10-15 rows,Feature matrix pricing comparison,"HTML table with CSS styling",Proper table headers and scope,Information design
+25,Icon Array,"icon array, pictogram, proportion, visual",Showing proportions with visual metaphor,Proportional visual,"Making statistics tangible (e.g. 1 in 10 people), visual impact",Precise values large numbers,100 icons,Statistics visualization impact slides,"CSS grid or flexbox with icons",Describe proportion in text,ISOTYPE Otto Neurath

package/skills/craft/uipm-design-system/data/slide-color-logic.csv

@@ -1,14 +1,14 @@
-emotion,background,text_color,accent_usage,use_full_bleed,gradient,card_style
-frustration,dark-surface,foreground,minimal,false,none,subtle-border
-hope,accent-bleed,dark,none,true,none,none
-fear,dark-background,primary,stats-only,false,none,glow-primary
-relief,surface,foreground,icons,false,none,accent-bar
-trust,surface-elevated,foreground,metrics,false,none,subtle-border
-urgency,gradient,white,cta-button,true,primary,none
-curiosity,dark-glow,gradient-text,badge,false,glow,glow-secondary
-confidence,surface,foreground,chart-accent,false,none,none
-warmth,dark-surface,foreground,avatar-ring,false,none,none
-evaluation,surface-elevated,foreground,highlight,false,none,comparison
-narrative,dark-background,foreground-secondary,timeline-dots,false,none,none
-clarity,surface,foreground,icons,false,none,feature-card
-interest,dark-glow,foreground,demo-highlight,false,glow,none
+emotion,background,text_color,accent_usage,use_full_bleed,gradient,card_style
+frustration,dark-surface,foreground,minimal,false,none,subtle-border
+hope,accent-bleed,dark,none,true,none,none
+fear,dark-background,primary,stats-only,false,none,glow-primary
+relief,surface,foreground,icons,false,none,accent-bar
+trust,surface-elevated,foreground,metrics,false,none,subtle-border
+urgency,gradient,white,cta-button,true,primary,none
+curiosity,dark-glow,gradient-text,badge,false,glow,glow-secondary
+confidence,surface,foreground,chart-accent,false,none,none
+warmth,dark-surface,foreground,avatar-ring,false,none,none
+evaluation,surface-elevated,foreground,highlight,false,none,comparison
+narrative,dark-background,foreground-secondary,timeline-dots,false,none,none
+clarity,surface,foreground,icons,false,none,feature-card
+interest,dark-glow,foreground,demo-highlight,false,glow,none