@vudovn/antigravity-kit 1.0.1

package/README.md

@@ -0,0 +1,311 @@
+# 🚀 Antigravity Kit
+
+> **AI Agent Capability Expansion Toolkit** - A comprehensive collection of skills, rules, and workflows to supercharge AI coding assistants.
+
+[![Skills](https://img.shields.io/badge/Skills-35+-blue)](#-skills)
+[![Rules](https://img.shields.io/badge/Rules-10-green)](#-rules)
+[![Workflows](https://img.shields.io/badge/Workflows-2-orange)](#-workflows)
+
+---
+
+## 📋 Table of Contents
+
+- [Introduction](#-introduction)
+- [Project Structure](#-project-structure)
+- [Skills](#-skills)
+- [Rules](#-rules)
+- [Workflows](#-workflows)
+- [Installation](#-installation)
+- [Usage](#-usage)
+- [Credits](#-credits)
+- [Contributing](#-contributing)
+
+---
+
+## 🎯 Introduction
+
+**Antigravity Kit** is a comprehensive collection of:
+
+- **Skills** - Domain-specific expertise (React, Node.js, Database, Testing, UI/UX...)
+- **Rules** - Guidelines and constraints for agent behavior
+- **Workflows** - Step-by-step procedures for common tasks
+
+This toolkit combines the best of:
+- 🎨 **[UI UX Pro Max](https://ui-ux-pro-max-skill.nextlevelbuilder.io/)** - Design Intelligence with 50 styles, 21 palettes, 50 font pairings
+- 🛠️ **[ClaudeKit](https://claudekit.cc/)** - Production-ready AI subagents, workflows, and integrations
+
+Designed to integrate with AI agents supporting the **Agent Skills** standard.
+
+---
+
+## 📁 Project Structure
+
+```
+antigravity-kit-cli/
+├── .agent/
+│   ├── rules/              # 10 rule files
+│   │   ├── 01-identity.md
+│   │   ├── 02-task-classification.md
+│   │   ├── 03-mode-consulting.md
+│   │   ├── 04-mode-build.md
+│   │   ├── 05-mode-debug.md
+│   │   ├── 06-mode-optimize.md
+│   │   ├── 07-technical-standards.md
+│   │   ├── 08-communication.md
+│   │   ├── 09-checklist.md
+│   │   └── 10-special-situations.md
+│   │
+│   ├── skills/             # 35+ domain expertise
+│   │   ├── react-expert/
+│   │   ├── nextjs-expert/
+│   │   ├── typescript-expert/
+│   │   ├── prisma-expert/
+│   │   ├── auth-expert/
+│   │   ├── ui-ux-pro-max/
+│   │   └── ...
+│   │
+│   ├── .shared/            # Shared resources
+│   │   └── ui-ux-pro-max/  # UI/UX search database
+│   │       ├── data/       # CSV databases
+│   │       └── scripts/    # Python search tools
+│   │
+│   └── workflows/          # Step-by-step procedures
+│       ├── request.md
+│       └── ui-ux-pro-max.md
+│
+└── README.md               # This file
+```
+
+---
+
+## 🧠 Skills
+
+Skills are domain-specific expertise modules. The agent automatically identifies and uses the appropriate skill for each task.
+
+### Frontend
+
+| Skill | Description |
+|-------|-------------|
+| `react-expert` | React 18/19, hooks, patterns, performance |
+| `nextjs-expert` | App Router, Server Components, SSR |
+| `css-expert` | CSS architecture, responsive, design systems |
+| `state-management-expert` | Redux, Zustand, React Query |
+| `ui-ux-pro-max` | 50 styles, 21 palettes, 50 font pairings |
+
+### Backend
+
+| Skill | Description |
+|-------|-------------|
+| `nodejs-expert` | Async patterns, modules, performance |
+| `nestjs-expert` | Module architecture, DI, testing |
+| `rest-api-expert` | RESTful design, HTTP semantics |
+| `auth-expert` | JWT, OAuth 2.0, RBAC, security |
+
+### Database
+
+| Skill | Description |
+|-------|-------------|
+| `prisma-expert` | Schema design, migrations, queries |
+| `database-expert` | General database optimization |
+| `postgres-expert` | PostgreSQL-specific patterns |
+| `mongodb-expert` | MongoDB document modeling |
+
+### Testing
+
+| Skill | Description |
+|-------|-------------|
+| `testing-expert` | General testing strategies |
+| `jest-expert` | Jest framework, mocking |
+| `vitest-expert` | Vitest, Vite integration |
+| `playwright-expert` | E2E testing, browser automation |
+
+### DevOps & Tools
+
+| Skill | Description |
+|-------|-------------|
+| `devops-expert` | CI/CD, infrastructure |
+| `docker-expert` | Containerization, Compose |
+| `github-actions-expert` | GitHub Actions workflows |
+| `git-expert` | Git workflows, conflicts |
+
+### Code Quality
+
+| Skill | Description |
+|-------|-------------|
+| `code-review` | Comprehensive code review |
+| `refactoring-expert` | Code smell detection, refactoring |
+| `typescript-expert` | TypeScript patterns, type system |
+| `accessibility-expert` | WCAG compliance, a11y |
+
+---
+
+## 📏 Rules
+
+Rules are guidelines that direct agent behavior. There are 3 activation types:
+
+- **always_on** - Always applied
+- **model_decision** - Agent decides when to apply
+- **glob** - Applied based on file pattern
+
+### Rules List
+
+| # | File | Activation | Description |
+|---|------|------------|-------------|
+| 1 | `01-identity.md` | Always On | Role & working principles |
+| 2 | `02-task-classification.md` | Always On | 4 task types classification |
+| 3 | `03-mode-consulting.md` | Model Decision | Consulting process |
+| 4 | `04-mode-build.md` | Model Decision | Build process |
+| 5 | `05-mode-debug.md` | Model Decision | Debug process |
+| 6 | `06-mode-optimize.md` | Model Decision | Optimization process |
+| 7 | `07-technical-standards.md` | Always On | Coding standards |
+| 8 | `08-communication.md` | Always On | Communication style |
+| 9 | `09-checklist.md` | Always On | Pre-delivery checklist |
+| 10 | `10-special-situations.md` | Always On | Special situation handling |
+
+---
+
+## 🔄 Workflows
+
+Workflows are step-by-step procedures. Invoke with slash command `/workflow-name`.
+
+| Workflow | Command | Description |
+|----------|---------|-------------|
+| Request Handler | `/request` | Full-stack engineer task handling |
+| UI/UX Pro Max | `/ui-ux-pro-max` | Design UI with 50 styles, 21 palettes |
+
+---
+
+## 📦 Installation
+
+### Using CLI (Recommended)
+
+Install the `.agent` folder directly into your project using `npx`:
+
+```bash
+# Navigate to your project
+cd your-project
+
+# Install .agent folder
+npx antigravity-kit-cli init
+```
+
+#### CLI Commands
+
+| Command | Description |
+|---------|-------------|
+| `npx antigravity-kit-cli init` | Install `.agent` folder into current directory |
+| `npx antigravity-kit-cli update` | Update `.agent` to the latest version |
+| `npx antigravity-kit-cli status` | Check installation status |
+
+---
+
+## 🚀 Usage
+
+### Skills
+
+Skills are automatically applied. The agent reads the skill when it identifies a related task:
+
+```
+User: "Fix bug in this React component"
+Agent: (automatically uses react-expert skill)
+```
+
+### Rules
+
+Rules apply based on activation type:
+- **always_on**: Always active
+- **model_decision**: Agent decides when to apply
+- **glob**: Applied when working with files matching pattern
+
+### Workflows
+
+Invoke workflows with slash commands:
+
+```
+User: /ui-ux-pro-max
+Agent: (follows the workflow)
+```
+
+---
+
+## 🙏 Credits
+
+This project is built upon and inspired by:
+
+| Project | Description | Link |
+|---------|-------------|------|
+| **UI UX Pro Max** | Design Intelligence for Claude Code - 50 styles, 21 color palettes, 50 font pairings, 20 chart types | [ui-ux-pro-max-skill.nextlevelbuilder.io](https://ui-ux-pro-max-skill.nextlevelbuilder.io/) |
+| **ClaudeKit** | Production-ready AI subagents, workflows, and integrations for software development | [claudekit.cc](https://claudekit.cc/) |
+
+Special thanks to the creators of these amazing tools for making AI-assisted development more powerful and accessible.
+
+---
+
+## 🤝 Contributing
+
+### Adding a New Skill
+
+1. Create folder: `.agent/skills/your-skill/`
+2. Create `SKILL.md` with format:
+
+```markdown
+---
+name: your-skill
+description: Skill description. Use when X or Y.
+---
+
+# Your Skill
+
+Instructions for the agent...
+```
+
+### Adding a New Rule
+
+1. Create file: `.agent/rules/your-rule.md`
+2. Add frontmatter:
+
+```markdown
+---
+activation: always_on | model_decision | glob
+glob: "**/*.tsx"  # if using glob
+description: When to apply  # if using model_decision
+---
+
+# Your Rule
+
+Content...
+```
+
+### Adding a New Workflow
+
+1. Create file: `.agent/workflows/your-workflow.md`
+2. Format:
+
+```markdown
+---
+description: Workflow description
+---
+
+# Your Workflow
+
+## Step 1: ...
+## Step 2: ...
+```
+
+---
+
+## 📄 License
+
+MIT License - See [LICENSE](LICENSE) for details.
+
+---
+
+<p align="center">
+  Made with ❤️ by <a href="https://github.com/vudovn">VudoVN</a>
+</p>
+
+<p align="center">
+  <a href="https://img.vietqr.io/image/mbbank-0779330918-compact2.jpg">
+    <img src="https://img.shields.io/badge/Buy%20Me%20a%20Coffee-ffdd00?style=for-the-badge&logo=buy-me-a-coffee&logoColor=black" alt="Buy Me a Coffee" />
+  </a>
+</p>

package/bin/index.js

@@ -0,0 +1,240 @@
+#!/usr/bin/env node
+
+import { Command } from 'commander';
+import chalk from 'chalk';
+import ora from 'ora';
+import { downloadTemplate } from 'giget';
+import path from 'path';
+import fs from 'fs';
+import readline from 'readline';
+
+// ============================================================================
+// CONSTANTS
+// ============================================================================
+
+const REPO = 'github:vudovn/antigravity-kit';
+const TEMPLATES_FOLDER = 'templates';
+const AGENT_FOLDER = '.agent';
+const TEMP_FOLDER = '.temp_ag_kit';
+
+// ============================================================================
+// UTILITIES
+// ============================================================================
+
+/**
+ * Display ASCII banner
+ */
+const showBanner = () => {
+    console.log(chalk.blueBright(`
+    ╔══════════════════════════════════════╗
+    ║      🚀 ANTIGRAVITY KIT CLI 🚀       ║
+    ╚══════════════════════════════════════╝
+    `));
+};
+
+/**
+ * Ask user for confirmation
+ * @param {string} question - Question to ask
+ * @returns {Promise<boolean>}
+ */
+const confirm = (question) => {
+    const rl = readline.createInterface({
+        input: process.stdin,
+        output: process.stdout,
+    });
+
+    return new Promise((resolve) => {
+        rl.question(chalk.yellow(`${question} (y/N): `), (answer) => {
+            rl.close();
+            resolve(answer.toLowerCase() === 'y' || answer.toLowerCase() === 'yes');
+        });
+    });
+};
+
+/**
+ * Clean up temporary directory
+ * @param {string} tempDir - Temp directory path
+ */
+const cleanup = (tempDir) => {
+    if (fs.existsSync(tempDir)) {
+        fs.rmSync(tempDir, { recursive: true, force: true });
+    }
+};
+
+/**
+ * Copy .agent folder from temp to destination
+ * @param {string} tempDir - Temp directory
+ * @param {string} destDir - Destination directory
+ */
+const copyAgentFolder = (tempDir, destDir) => {
+    const sourceAgent = path.join(tempDir, TEMPLATES_FOLDER, AGENT_FOLDER);
+
+    if (!fs.existsSync(sourceAgent)) {
+        throw new Error(`Could not find ${TEMPLATES_FOLDER}/${AGENT_FOLDER} folder in source repository!`);
+    }
+
+    fs.cpSync(sourceAgent, destDir, { recursive: true });
+};
+
+// ============================================================================
+// COMMANDS
+// ============================================================================
+
+/**
+ * Initialize .agent folder in project
+ */
+const initCommand = async (options) => {
+    showBanner();
+
+    const targetDir = path.resolve(options.path || process.cwd());
+    const tempDir = path.join(targetDir, TEMP_FOLDER);
+    const agentDir = path.join(targetDir, AGENT_FOLDER);
+
+    // Check if .agent already exists
+    if (fs.existsSync(agentDir)) {
+        if (!options.force) {
+            console.log(chalk.yellow(`⚠️  Folder ${AGENT_FOLDER} already exists at: ${agentDir}`));
+            const shouldOverwrite = await confirm('Do you want to overwrite it?');
+
+            if (!shouldOverwrite) {
+                console.log(chalk.gray('Operation cancelled.'));
+                process.exit(0);
+            }
+        }
+        console.log(chalk.gray(`Overwriting ${AGENT_FOLDER} folder...`));
+    }
+
+    const spinner = ora({
+        text: 'Downloading...',
+        color: 'cyan',
+    }).start();
+
+    try {
+        // Download repository using giget
+        const repoSource = options.branch ? `${REPO}#${options.branch}` : REPO;
+        await downloadTemplate(repoSource, {
+            dir: tempDir,
+            force: true,
+        });
+
+        spinner.text = 'Installing...';
+
+        // Copy .agent folder
+        copyAgentFolder(tempDir, agentDir);
+
+        // Cleanup
+        cleanup(tempDir);
+
+        spinner.succeed(chalk.green('✅ Installation successful!'));
+
+        // Success message
+        console.log(chalk.gray('\n────────────────────────────────────────'));
+        console.log(chalk.white('📁 Result:'));
+        console.log(`   ${chalk.cyan(AGENT_FOLDER)} → ${chalk.gray(agentDir)}`);
+        console.log(chalk.gray('────────────────────────────────────────'));
+        console.log(chalk.green('\n🎉 Happy coding!\n'));
+    } catch (error) {
+        spinner.fail(chalk.red(`❌ Error: ${error.message}`));
+        cleanup(tempDir);
+        process.exit(1);
+    }
+};
+
+/**
+ * Update existing .agent folder
+ */
+const updateCommand = async (options) => {
+    showBanner();
+
+    const targetDir = path.resolve(options.path || process.cwd());
+    const agentDir = path.join(targetDir, AGENT_FOLDER);
+
+    // Check if .agent exists
+    if (!fs.existsSync(agentDir)) {
+        console.log(chalk.red(`❌ Could not find ${AGENT_FOLDER} folder at: ${targetDir}`));
+        console.log(chalk.yellow(`💡 Tip: Run ${chalk.cyan('ag-kit init')} to install first.`));
+        process.exit(1);
+    }
+
+    if (!options.force) {
+        console.log(chalk.yellow(`⚠️  Update will overwrite the entire ${AGENT_FOLDER} folder`));
+        const shouldUpdate = await confirm('Are you sure you want to continue?');
+
+        if (!shouldUpdate) {
+            console.log(chalk.gray('Operation cancelled.'));
+            process.exit(0);
+        }
+    }
+
+    // Call init with force option
+    await initCommand({ ...options, force: true });
+};
+
+/**
+ * Show status of .agent folder
+ */
+const statusCommand = (options) => {
+    const targetDir = path.resolve(options.path || process.cwd());
+    const agentDir = path.join(targetDir, AGENT_FOLDER);
+
+    console.log(chalk.blueBright('\n📊 Antigravity Kit Status\n'));
+
+    if (fs.existsSync(agentDir)) {
+        const stats = fs.statSync(agentDir);
+        const files = fs.readdirSync(agentDir, { recursive: true });
+
+        console.log(chalk.green('✅ Installed'));
+        console.log(chalk.gray('────────────────────────────────────────'));
+        console.log(`📁 Path:     ${chalk.cyan(agentDir)}`);
+        console.log(`📅 Modified: ${chalk.gray(stats.mtime.toLocaleString('en-US'))}`);
+        console.log(`📄 Files:    ${chalk.yellow(files.length)} items`);
+        console.log(chalk.gray('────────────────────────────────────────\n'));
+    } else {
+        console.log(chalk.red('❌ Not installed'));
+        console.log(chalk.yellow(`💡 Run ${chalk.cyan('ag-kit init')} to install.\n`));
+    }
+};
+
+// ============================================================================
+// CLI DEFINITION
+// ============================================================================
+
+const program = new Command();
+
+program
+    .name('ag-kit')
+    .description('CLI tool to install and manage Antigravity Kit')
+    .version('1.0.0', '-v, --version', 'Display version number');
+
+// Command: init
+program
+    .command('init')
+    .description('Install .agent folder into your project')
+    .option('-f, --force', 'Overwrite if folder already exists', false)
+    .option('-p, --path <dir>', 'Path to the project directory', process.cwd())
+    .option('-b, --branch <name>', 'Select repository branch')
+    .action(initCommand);
+
+// Command: update
+program
+    .command('update')
+    .description('Update .agent folder to the latest version')
+    .option('-f, --force', 'Skip confirmation prompt', false)
+    .option('-p, --path <dir>', 'Path to the project directory', process.cwd())
+    .option('-b, --branch <name>', 'Select repository branch')
+    .action(updateCommand);
+
+// Command: status
+program
+    .command('status')
+    .description('Check installation status')
+    .option('-p, --path <dir>', 'Path to the project directory', process.cwd())
+    .action(statusCommand);
+
+// Parse arguments
+program.parse(process.argv);
+
+// Show help if no command provided
+if (!process.argv.slice(2).length) {
+    program.outputHelp();
+}

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@vudovn/antigravity-kit",
+  "version": "1.0.1",
+  "description": "CLI tool to setup Antigravity Kit skills and MCPs",
+  "main": "bin/index.js",
+  "type": "module",
+  "bin": {
+    "ag-kit": "./bin/index.js"
+  },
+  "files": [
+    "bin",
+    "templates"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vudovn/antigravity-kit.git"
+  },
+  "homepage": "https://github.com/vudovn/antigravity-kit#readme",
+  "bugs": {
+    "url": "https://github.com/vudovn/antigravity-kit/issues"
+  },
+  "keywords": [
+    "antigravity",
+    "cli",
+    "ai",
+    "agent",
+    "gemini",
+    "skills"
+  ],
+  "author": "Do Van Vu",
+  "license": "MIT",
+  "dependencies": {
+    "chalk": "^5.6.2",
+    "commander": "^12.1.0",
+    "fs-extra": "^11.3.3",
+    "giget": "^2.0.0",
+    "ora": "^8.2.0"
+  }
+}

package/templates/.agent/.shared/ui-ux-pro-max/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