cfsa-antigravity 1.0.0

package/template/.agent/skill-library/surface/web/dark-mode-theming/SKILL.md

@@ -0,0 +1,516 @@
+---
+name: dark-mode-theming
+description: "Implement dark mode and theming systems with CSS custom properties, system preference detection, FOUC prevention, Tailwind dark variants, and accessible contrast maintenance across themes. Use when adding dark mode, theme switching, or design token systems."
+version: 1.0.0
+---
+
+# Dark Mode & Theming
+
+Build a robust theming system that respects user preferences, avoids flash-of-unstyled-content, and maintains accessibility across all themes.
+
+## CSS Custom Properties as Theme Tokens
+
+Define your entire color system as CSS custom properties. Every color in your app should reference a token, never a hardcoded hex value.
+
+```css
+/* src/styles/tokens.css */
+
+/* Light theme (default) */
+:root {
+  /* Surfaces */
+  --color-bg-primary: #ffffff;
+  --color-bg-secondary: #f5f5f5;
+  --color-bg-tertiary: #e8e8e8;
+  --color-bg-elevated: #ffffff;
+
+  /* Text */
+  --color-text-primary: #111111;
+  --color-text-secondary: #555555;
+  --color-text-muted: #888888;
+  --color-text-inverse: #ffffff;
+
+  /* Interactive */
+  --color-accent: #0066cc;
+  --color-accent-hover: #0052a3;
+  --color-accent-text: #ffffff;
+
+  /* Borders */
+  --color-border: #d4d4d4;
+  --color-border-strong: #999999;
+
+  /* Status */
+  --color-success: #157a3e;
+  --color-warning: #9a6700;
+  --color-error: #cc1a1a;
+  --color-info: #0066cc;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
+  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
+}
+
+/* Dark theme */
+[data-theme="dark"] {
+  --color-bg-primary: #0d0d0d;
+  --color-bg-secondary: #1a1a1a;
+  --color-bg-tertiary: #262626;
+  --color-bg-elevated: #1f1f1f;
+
+  --color-text-primary: #eeeeee;
+  --color-text-secondary: #aaaaaa;
+  --color-text-muted: #777777;
+  --color-text-inverse: #111111;
+
+  --color-accent: #4da6ff;
+  --color-accent-hover: #80bfff;
+  --color-accent-text: #000000;
+
+  --color-border: #333333;
+  --color-border-strong: #555555;
+
+  --color-success: #3fb950;
+  --color-warning: #d29922;
+  --color-error: #f85149;
+  --color-info: #58a6ff;
+
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
+  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
+}
+```
+
+**Usage in components:**
+```css
+.card {
+  background: var(--color-bg-elevated);
+  color: var(--color-text-primary);
+  border: 1px solid var(--color-border);
+  box-shadow: var(--shadow-md);
+}
+
+.card-title {
+  color: var(--color-text-primary);
+}
+
+.card-description {
+  color: var(--color-text-secondary);
+}
+```
+
+---
+
+## System vs User Preference Detection
+
+### Detecting System Preference
+
+```typescript
+function getSystemTheme(): 'light' | 'dark' {
+  if (typeof window === 'undefined') return 'light';
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+}
+```
+
+### Three-Way Preference: System, Light, Dark
+
+```typescript
+type ThemePreference = 'system' | 'light' | 'dark';
+type ResolvedTheme = 'light' | 'dark';
+
+function resolveTheme(preference: ThemePreference): ResolvedTheme {
+  if (preference === 'system') return getSystemTheme();
+  return preference;
+}
+
+function saveThemePreference(preference: ThemePreference): void {
+  localStorage.setItem('theme-preference', preference);
+}
+
+function loadThemePreference(): ThemePreference {
+  const saved = localStorage.getItem('theme-preference');
+  if (saved === 'light' || saved === 'dark' || saved === 'system') return saved;
+  return 'system';
+}
+```
+
+### Listening for System Changes
+
+```typescript
+function watchSystemTheme(callback: (theme: ResolvedTheme) => void): () => void {
+  const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+  function handler(event: MediaQueryListEvent) {
+    const preference = loadThemePreference();
+    if (preference === 'system') {
+      callback(event.matches ? 'dark' : 'light');
+    }
+  }
+
+  mediaQuery.addEventListener('change', handler);
+  return () => mediaQuery.removeEventListener('change', handler);
+}
+```
+
+---
+
+## Avoiding FOUC (Flash of Unstyled Content)
+
+The theme must be applied **before** the page renders. This requires a blocking inline script in `<head>`.
+
+### Blocking Script Technique
+
+```html
+<!-- Place this in <head> BEFORE any stylesheets -->
+<script>
+  (function() {
+    var preference = 'system';
+    try { preference = localStorage.getItem('theme-preference') || 'system'; } catch(e) {}
+
+    var theme;
+    if (preference === 'system') {
+      theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    } else {
+      theme = preference;
+    }
+
+    document.documentElement.setAttribute('data-theme', theme);
+  })();
+</script>
+```
+
+**Why this works:** The script runs synchronously before the browser paints, so the `data-theme` attribute is set before CSS is applied.
+
+### Astro Implementation
+
+```astro
+---
+// src/layouts/BaseLayout.astro
+---
+<html lang="en">
+  <head>
+    <script is:inline>
+      (function() {
+        var p = 'system';
+        try { p = localStorage.getItem('theme-preference') || 'system'; } catch(e) {}
+        var t = p === 'system'
+          ? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
+          : p;
+        document.documentElement.setAttribute('data-theme', t);
+      })();
+    </script>
+    <!-- Stylesheets load AFTER theme attribute is set -->
+    <link rel="stylesheet" href="/styles/tokens.css" />
+  </head>
+  <body>
+    <slot />
+  </body>
+</html>
+```
+
+---
+
+## Image and SVG Adaptation
+
+### CSS Filter Approach (Quick)
+
+```css
+/* Invert images in dark mode (useful for diagrams, charts) */
+[data-theme="dark"] img.invertible {
+  filter: invert(1) hue-rotate(180deg);
+}
+```
+
+### Source Switching (Preferred for Quality)
+
+```html
+<picture>
+  <source srcset="/images/hero-dark.webp" media="(prefers-color-scheme: dark)" />
+  <img src="/images/hero-light.webp" alt="Hero illustration" />
+</picture>
+```
+
+### SVG with currentColor
+
+```html
+<!-- SVGs using currentColor automatically adapt to theme -->
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+  <path d="M12 2L2 7l10 5 10-5-10-5z" />
+</svg>
+```
+
+```css
+.icon { color: var(--color-text-primary); }
+.icon-muted { color: var(--color-text-muted); }
+```
+
+### Background Images
+
+```css
+.hero {
+  background-image: var(--hero-image);
+}
+
+:root {
+  --hero-image: url('/images/hero-light.jpg');
+}
+
+[data-theme="dark"] {
+  --hero-image: url('/images/hero-dark.jpg');
+}
+```
+
+---
+
+## Third-Party Widget Theming
+
+Many third-party widgets (embedded forms, maps, code blocks) do not follow your theme. Handle them explicitly.
+
+```css
+/* Syntax highlighting with theme tokens */
+[data-theme="dark"] .shiki {
+  background-color: var(--color-bg-secondary) !important;
+}
+
+/* Embedded iframes: some support color-scheme parameter */
+[data-theme="dark"] iframe.themeable {
+  filter: invert(1) hue-rotate(180deg);
+  /* Last resort --- use sparingly */
+}
+```
+
+**For widgets that support a theme parameter:**
+```typescript
+// Re-initialize widget when theme changes
+function onThemeChange(theme: ResolvedTheme): void {
+  // Recaptcha
+  grecaptcha.render('captcha', { theme });
+
+  // Stripe Elements
+  elements.update({ appearance: { theme: theme === 'dark' ? 'night' : 'stripe' } });
+}
+```
+
+---
+
+## Contrast Maintenance Across Themes
+
+Every color pairing must meet WCAG AA contrast ratios in both themes.
+
+| Pairing | Minimum Ratio | Verification |
+|---------|--------------|--------------|
+| `--color-text-primary` on `--color-bg-primary` | 7:1 (AAA) | Both themes |
+| `--color-text-secondary` on `--color-bg-primary` | 4.5:1 (AA) | Both themes |
+| `--color-text-muted` on `--color-bg-primary` | 4.5:1 (AA) | Both themes |
+| `--color-accent` on `--color-bg-primary` | 4.5:1 (AA) | Both themes |
+| `--color-accent-text` on `--color-accent` | 4.5:1 (AA) | Both themes |
+| Status colors on background | 4.5:1 (AA) | Both themes |
+
+**Testing contrast programmatically:**
+```typescript
+// Use a tool like `wcag-contrast` to verify at build time
+import { getContrastRatio } from 'wcag-contrast';
+
+const ratio = getContrastRatio('#eeeeee', '#0d0d0d');
+console.assert(ratio >= 4.5, `Contrast ratio ${ratio} is below 4.5:1`);
+```
+
+---
+
+## Theme Toggle Component
+
+```tsx
+function ThemeToggle() {
+  const [preference, setPreference] = useState<ThemePreference>(() => loadThemePreference());
+  const resolvedTheme = resolveTheme(preference);
+
+  function cycleTheme() {
+    const next: ThemePreference =
+      preference === 'system' ? 'light'
+      : preference === 'light' ? 'dark'
+      : 'system';
+
+    setPreference(next);
+    saveThemePreference(next);
+    document.documentElement.setAttribute('data-theme', resolveTheme(next));
+  }
+
+  const label =
+    preference === 'system' ? 'Theme: System'
+    : preference === 'light' ? 'Theme: Light'
+    : 'Theme: Dark';
+
+  return (
+    <button
+      onClick={cycleTheme}
+      aria-label={label}
+      title={label}
+      type="button"
+    >
+      {preference === 'system' && <MonitorIcon aria-hidden="true" />}
+      {preference === 'light' && <SunIcon aria-hidden="true" />}
+      {preference === 'dark' && <MoonIcon aria-hidden="true" />}
+    </button>
+  );
+}
+```
+
+**Alternative: dropdown select for clarity:**
+```tsx
+function ThemeSelect() {
+  const [preference, setPreference] = useState<ThemePreference>(loadThemePreference());
+
+  function handleChange(value: ThemePreference) {
+    setPreference(value);
+    saveThemePreference(value);
+    document.documentElement.setAttribute('data-theme', resolveTheme(value));
+  }
+
+  return (
+    <label>
+      Theme
+      <select value={preference} onChange={(e) => handleChange(e.target.value as ThemePreference)}>
+        <option value="system">System</option>
+        <option value="light">Light</option>
+        <option value="dark">Dark</option>
+      </select>
+    </label>
+  );
+}
+```
+
+---
+
+## Tailwind CSS Dark Mode
+
+### Class Strategy (Recommended for User Control)
+
+```javascript
+// tailwind.config.js
+export default {
+  darkMode: 'selector', // Tailwind v4: uses [data-theme="dark"] or .dark
+};
+```
+
+```html
+<!-- Usage in templates -->
+<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
+  <p class="text-gray-600 dark:text-gray-400">Secondary text</p>
+  <button class="bg-blue-600 dark:bg-blue-400 text-white dark:text-black">
+    Action
+  </button>
+</div>
+```
+
+### Combining Tailwind with CSS Custom Properties
+
+Use Tailwind for layout/spacing and custom properties for theme colors:
+
+```css
+/* In your Tailwind CSS */
+@theme {
+  --color-surface: var(--color-bg-primary);
+  --color-on-surface: var(--color-text-primary);
+}
+```
+
+```html
+<div class="bg-surface text-on-surface p-4 rounded-lg">
+  Theme-aware via tokens, layout via Tailwind
+</div>
+```
+
+---
+
+## Smooth Theme Transitions
+
+```css
+/* Apply transition only to theme-related properties */
+* {
+  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease,
+              box-shadow 0.2s ease;
+}
+
+/* Disable transitions during theme load to prevent FOUC */
+html.no-transitions * {
+  transition: none !important;
+}
+
+/* Respect reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  * {
+    transition: none !important;
+  }
+}
+```
+
+**Apply no-transitions class during theme switch:**
+```typescript
+function setTheme(theme: ResolvedTheme): void {
+  document.documentElement.classList.add('no-transitions');
+  document.documentElement.setAttribute('data-theme', theme);
+
+  // Re-enable transitions after a single frame
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      document.documentElement.classList.remove('no-transitions');
+    });
+  });
+}
+```
+
+---
+
+## Color Palette Design for Dual Themes
+
+### Design Principles
+
+1. **Do not just invert colors.** Dark mode needs its own palette with adjusted saturation and lightness.
+2. **Reduce saturation in dark mode.** Fully saturated colors on dark backgrounds cause eye strain.
+3. **Elevate with lighter surfaces, not shadows.** In dark mode, higher elevation = lighter surface (Material Design principle).
+4. **Test with real content.** A palette that looks good on a demo page may fail with actual text and images.
+
+### Common Mistakes
+
+| Mistake | Fix |
+|---------|-----|
+| Pure black (#000) background | Use very dark gray (#0d0d0d or #121212) |
+| White text on pure black (#fff on #000) | Use off-white (#eeeeee) for less harsh contrast |
+| Same border color in both themes | Borders need to be lighter in dark mode |
+| Colored backgrounds unchanged | Adjust saturation and lightness per theme |
+
+---
+
+## Testing Themes
+
+### Automated
+
+```typescript
+// Playwright test for both themes
+import { test, expect } from '@playwright/test';
+
+for (const theme of ['light', 'dark'] as const) {
+  test(`renders correctly in ${theme} mode`, async ({ page }) => {
+    await page.emulateMedia({ colorScheme: theme });
+    await page.goto('/');
+    await expect(page).toHaveScreenshot(`homepage-${theme}.png`);
+  });
+}
+```
+
+### Manual Checklist
+
+- [ ] Toggle between light, dark, and system --- no FOUC
+- [ ] All text meets contrast requirements in both themes
+- [ ] Images and icons are visible and appropriate in both themes
+- [ ] Form inputs, borders, and placeholders are visible in both themes
+- [ ] Status colors (error, success, warning) are distinguishable in both themes
+- [ ] Third-party widgets adapt or remain usable
+- [ ] Preference persists across page reloads and sessions
+- [ ] System preference change is reflected when set to "system"
+
+## References
+
+- [Material Design Dark Theme](https://m3.material.io/styles/color/dark-theme)
+- [Tailwind CSS Dark Mode](https://tailwindcss.com/docs/dark-mode)
+- [prefers-color-scheme on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme)
+- [A Complete Guide to Dark Mode on the Web](https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/)

package/template/.agent/skill-library/surface/web/design-reference-data/SKILL.md

@@ -0,0 +1,105 @@
+---
+name: design-reference-data
+description: "Searchable reference database of 58 design styles, color palettes, typography pairings, chart styles, and UX patterns. Use during /create-prd-design-system to provide data-backed design recommendations after the direction interview."
+---
+
+# Design Reference Database
+
+> **When to use:** During `/create-prd-design-system`, after the user has selected a design direction via the `design-direction` skill. Query this database to ground your design system recommendations in concrete, researched data rather than relying on training data defaults.
+
+## What This Skill Contains
+
+### Data Files (`data/`)
+
+| File | Records | What It Contains |
+|---|---|---|
+| `styles.csv` | 58 | Design styles with colors, effects, accessibility, framework compat, complexity, best-for/don't-use-for |
+| `colors.csv` | — | Color palettes organized by mood, industry, and design style |
+| `typography.csv` | — | Font pairings by style category with usage guidance |
+| `charts.csv` | — | Chart and data visualization style patterns |
+| `ux-guidelines.csv` | — | UX patterns and interaction design reference |
+| `landing.csv` | — | Landing page design patterns and conversion strategies |
+
+### Search Scripts (`scripts/`)
+
+| Script | Purpose |
+|---|---|
+| `search.py` | CLI entry point — accepts queries, routes to core |
+| `core.py` | BM25 search engine — loads CSVs, scores matches |
+| `design_system.py` | Generates complete design system recommendations from search results |
+
+## Pipeline Integration
+
+### When in the Pipeline
+
+```
+/create-prd-design-system
+  ├── Step 1: design-direction interview (5 questions)
+  ├── Step 2: User picks direction
+  ├── ★ Step 3: Query this database ← YOU ARE HERE
+  ├── Step 4: brand-guidelines locks with data-backed values
+  └── Step 5: design-system.md output
+```
+
+### How to Use
+
+After the user confirms their design direction, run these searches to get concrete reference data:
+
+#### 1. Find matching design styles
+
+```bash
+python .agent/skills/design-reference-data/scripts/search.py \
+  "<direction + project context>" \
+  --domain style --max-results 5
+```
+
+Example: `"modern dark mode SaaS dashboard"` or `"warm friendly wellness app"`
+
+#### 2. Find specific color palettes
+
+```bash
+python .agent/skills/design-reference-data/scripts/search.py \
+  "<mood + industry>" \
+  --domain color --max-results 3
+```
+
+Example: `"professional trust-building fintech"` or `"vibrant playful consumer"`
+
+#### 3. Find typography pairings
+
+```bash
+python .agent/skills/design-reference-data/scripts/search.py \
+  "<style + readability needs>" \
+  --domain typography --max-results 3
+```
+
+Example: `"clean serif editorial"` or `"modern sans-serif technical"`
+
+#### 4. Generate full design system recommendation
+
+```bash
+python .agent/skills/design-reference-data/scripts/search.py \
+  "<project description>" \
+  --design-system -p "ProjectName"
+```
+
+This returns a comprehensive recommendation covering style, colors, typography, and effects.
+
+### Using the Results
+
+Search results include:
+- **Primary/Secondary Colors** — exact hex values
+- **Effects & Animation** — specific CSS patterns and timing recommendations
+- **Best For / Don't Use For** — context-appropriate usage guidance
+- **Framework Compatibility** — scores for Tailwind, Bootstrap, MUI, etc.
+- **Accessibility Rating** — WCAG compliance level
+- **Performance Rating** — render cost assessment
+- **Complexity** — Low/Medium/High implementation effort
+
+Feed these results into the `brand-guidelines` skill to lock specific, researched values instead of AI-generated guesses.
+
+## Important Notes
+
+- **This is a reference, not a mandate.** The user's design direction (from `design-direction` skill) always takes priority. Use this data to provide concrete options within their chosen direction.
+- **Cross-reference with `design-anti-cliche`** — if search results return a style that matches a Safe Harbor forbidden default (e.g., glassmorphism), note the conflict and present alternatives.
+- **The database is curated, not exhaustive.** If the user's vision doesn't map to any style here, don't force-fit. Use the data as inspiration, not constraint.

package/template/.agent/skill-library/surface/web/design-reference-data/data/charts.csv

@@ -0,0 +1,26 @@
+No,Data Type,Keywords,Best Chart Type,Secondary Options,Color Guidance,Performance Impact,Accessibility Notes,Library Recommendation,Interactive Level
+1,Trend Over Time,"trend, time-series, line, growth, timeline, progress",Line Chart,"Area Chart, Smooth Area",Primary: #0080FF. Multiple series: use distinct colors. Fill: 20% opacity,⚡ Excellent (optimized),✓ Clear line patterns for colorblind users. Add pattern overlays.,"Chart.js, Recharts, ApexCharts",Hover + Zoom
+2,Compare Categories,"compare, categories, bar, comparison, ranking",Bar Chart (Horizontal or Vertical),"Column Chart, Grouped Bar",Each bar: distinct color. Category: grouped same color. Sorted: descending order,⚡ Excellent,✓ Easy to compare. Add value labels on bars for clarity.,"Chart.js, Recharts, D3.js",Hover + Sort
+3,Part-to-Whole,"part-to-whole, pie, donut, percentage, proportion, share",Pie Chart or Donut,"Stacked Bar, Treemap",Colors: 5-6 max. Contrasting palette. Large slices first. Use labels.,⚡ Good (limit 6 slices),⚠ Hard for accessibility. Better: Stacked bar with legend. Avoid pie if >5 items.,"Chart.js, Recharts, D3.js",Hover + Drill
+4,Correlation/Distribution,"correlation, distribution, scatter, relationship, pattern",Scatter Plot or Bubble Chart,"Heat Map, Matrix",Color axis: gradient (blue-red). Size: relative. Opacity: 0.6-0.8 to show density,⚠ Moderate (many points),⚠ Provide data table alternative. Use pattern + color distinction.,"D3.js, Plotly, Recharts",Hover + Brush
+5,Heatmap/Intensity,"heatmap, heat-map, intensity, density, matrix",Heat Map or Choropleth,"Grid Heat Map, Bubble Heat",Gradient: Cool (blue) to Hot (red). Scale: clear legend. Divergent for ±data,⚡ Excellent (color CSS),⚠ Colorblind: Use pattern overlay. Provide numerical legend.,"D3.js, Plotly, ApexCharts",Hover + Zoom
+6,Geographic Data,"geographic, map, location, region, geo, spatial","Choropleth Map, Bubble Map",Geographic Heat Map,Regional: single color gradient or categorized colors. Legend: clear scale,⚠ Moderate (rendering),⚠ Include text labels for regions. Provide data table alternative.,"D3.js, Mapbox, Leaflet",Pan + Zoom + Drill
+7,Funnel/Flow,funnel/flow,"Funnel Chart, Sankey",Waterfall (for flows),Stages: gradient (starting color → ending color). Show conversion %,⚡ Good,✓ Clear stage labels + percentages. Good for accessibility if labeled.,"D3.js, Recharts, Custom SVG",Hover + Drill
+8,Performance vs Target,performance-vs-target,Gauge Chart or Bullet Chart,"Dial, Thermometer",Performance: Red→Yellow→Green gradient. Target: marker line. Threshold colors,⚡ Good,✓ Add numerical value + percentage label beside gauge.,"D3.js, ApexCharts, Custom SVG",Hover
+9,Time-Series Forecast,time-series-forecast,Line with Confidence Band,Ribbon Chart,Actual: solid line #0080FF. Forecast: dashed #FF9500. Band: light shading,⚡ Good,✓ Clearly distinguish actual vs forecast. Add legend.,"Chart.js, ApexCharts, Plotly",Hover + Toggle
+10,Anomaly Detection,anomaly-detection,Line Chart with Highlights,Scatter with Alert,Normal: blue #0080FF. Anomaly: red #FF0000 circle/square marker + alert,⚡ Good,✓ Circle/marker for anomalies. Add text alert annotation.,"D3.js, Plotly, ApexCharts",Hover + Alert
+11,Hierarchical/Nested Data,hierarchical/nested-data,Treemap,"Sunburst, Nested Donut, Icicle",Parent: distinct hues. Children: lighter shades. White borders 2-3px.,⚠ Moderate,⚠ Poor - provide table alternative. Label large areas.,"D3.js, Recharts, ApexCharts",Hover + Drilldown
+12,Flow/Process Data,flow/process-data,Sankey Diagram,"Alluvial, Chord Diagram",Gradient from source to target. Opacity 0.4-0.6 for flows.,⚠ Moderate,⚠ Poor - provide flow table alternative.,"D3.js (d3-sankey), Plotly",Hover + Drilldown
+13,Cumulative Changes,cumulative-changes,Waterfall Chart,"Stacked Bar, Cascade",Increases: #4CAF50. Decreases: #F44336. Start: #2196F3. End: #0D47A1.,⚡ Good,✓ Good - clear directional colors with labels.,"ApexCharts, Highcharts, Plotly",Hover
+14,Multi-Variable Comparison,multi-variable-comparison,Radar/Spider Chart,"Parallel Coordinates, Grouped Bar",Single: #0080FF 20% fill. Multiple: distinct colors per dataset.,⚡ Good,⚠ Moderate - limit 5-8 axes. Add data table.,"Chart.js, Recharts, ApexCharts",Hover + Toggle
+15,Stock/Trading OHLC,stock/trading-ohlc,Candlestick Chart,"OHLC Bar, Heikin-Ashi",Bullish: #26A69A. Bearish: #EF5350. Volume: 40% opacity below.,⚡ Good,⚠ Moderate - provide OHLC data table.,"Lightweight Charts (TradingView), ApexCharts",Real-time + Hover + Zoom
+16,Relationship/Connection Data,relationship/connection-data,Network Graph,"Hierarchical Tree, Adjacency Matrix",Node types: categorical colors. Edges: #90A4AE 60% opacity.,❌ Poor (500+ nodes struggles),❌ Very Poor - provide adjacency list alternative.,"D3.js (d3-force), Vis.js, Cytoscape.js",Drilldown + Hover + Drag
+17,Distribution/Statistical,distribution/statistical,Box Plot,"Violin Plot, Beeswarm",Box: #BBDEFB. Border: #1976D2. Median: #D32F2F. Outliers: #F44336.,⚡ Excellent,"✓ Good - include stats table (min, Q1, median, Q3, max).","Plotly, D3.js, Chart.js (plugin)",Hover
+18,Performance vs Target (Compact),performance-vs-target-(compact),Bullet Chart,"Gauge, Progress Bar","Ranges: #FFCDD2, #FFF9C4, #C8E6C9. Performance: #1976D2. Target: black 3px.",⚡ Excellent,✓ Excellent - compact with clear values.,"D3.js, Plotly, Custom SVG",Hover
+19,Proportional/Percentage,proportional/percentage,Waffle Chart,"Pictogram, Stacked Bar 100%",10x10 grid. 3-5 categories max. 2-3px spacing between squares.,⚡ Good,✓ Good - better than pie for accessibility.,"D3.js, React-Waffle, Custom CSS Grid",Hover
+20,Hierarchical Proportional,hierarchical-proportional,Sunburst Chart,"Treemap, Icicle, Circle Packing",Center to outer: darker to lighter. 15-20% lighter per level.,⚠ Moderate,⚠ Poor - provide hierarchy table alternative.,"D3.js (d3-hierarchy), Recharts, ApexCharts",Drilldown + Hover
+21,Root Cause Analysis,"root cause, decomposition, tree, hierarchy, drill-down, ai-split",Decomposition Tree,"Decision Tree, Flow Chart",Nodes: #2563EB (Primary) vs #EF4444 (Negative impact). Connectors: Neutral grey.,⚠ Moderate (calculation heavy),✓ clear hierarchy. Allow keyboard navigation for nodes.,"Power BI (native), React-Flow, Custom D3.js",Drill + Expand
+22,3D Spatial Data,"3d, spatial, immersive, terrain, molecular, volumetric",3D Scatter/Surface Plot,"Volumetric Rendering, Point Cloud",Depth cues: lighting/shading. Z-axis: color gradient (cool to warm).,❌ Heavy (WebGL required),❌ Poor - requires alternative 2D view or data table.,"Three.js, Deck.gl, Plotly 3D",Rotate + Zoom + VR
+23,Real-Time Streaming,"streaming, real-time, ticker, live, velocity, pulse",Streaming Area Chart,"Ticker Tape, Moving Gauge",Current: Bright Pulse (#00FF00). History: Fading opacity. Grid: Dark.,⚡ Optimized (canvas/webgl),⚠ Flashing elements - provide pause button. High contrast.,Smoothed D3.js, CanvasJS, SciChart,Real-time + Pause
+24,Sentiment/Emotion,"sentiment, emotion, nlp, opinion, feeling",Word Cloud with Sentiment,"Sentiment Arc, Radar Chart",Positive: #22C55E. Negative: #EF4444. Neutral: #94A3B8. Size = Frequency.,⚡ Good,⚠ Word clouds poor for screen readers. Use list view.,"D3-cloud, Highcharts, Nivo",Hover + Filter
+25,Process Mining,"process, mining, variants, path, bottleneck, log",Process Map / Graph,"Directed Acyclic Graph (DAG), Petri Net",Happy path: #10B981 (Thick). Deviations: #F59E0B (Thin). Bottlenecks: #EF4444.,⚠ Moderate to Heavy,⚠ Complex graphs hard to navigate. Provide path summary.,"React-Flow, Cytoscape.js, Recharts",Drag + Node-Click