ui-ux-pro-mcp 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,26 @@
+# Changelog
+
+All notable changes to UI/UX Pro MCP will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [1.0.0] - 2026-01-17
+
+### Added
+- Initial release with **1340+ curated design resources**
+- **11 specialized search tools** for UI/UX design
+- **UI Styles** (70 entries): Glassmorphism, Neumorphism, Brutalism, Bento Grid, Agentic Interface, Spatial UI, etc.
+- **Color Palettes** (112 entries): Industry-specific palettes for SaaS, Fintech, Healthcare, AI/ML, Climate Tech
+- **Typography** (72 entries): Modern font pairings including Geist, Satoshi, variable fonts
+- **Charts** (35 types): Candlestick, Confusion Matrix, KPI Sparkline, Waterfall, etc.
+- **UX Guidelines** (115 entries): Dashboard UX, AI Interface Design, WCAG 2.2, Voice UI
+- **Icons** (131 entries): Lucide icons for Fintech, AI, Healthcare, E-commerce, Developer
+- **Landing Pages** (40 patterns): AI Hero, Bento Grid, Pricing Calculator, Exit Intent
+- **Products** (114 types): AI Assistant, Crypto/DeFi, HealthTech, Creator Economy
+- **AI Prompts** (30 templates): Midjourney v7, DALL-E 3, Stable Diffusion, LLM code gen
+- **Framework Guidelines** (660+ entries): React 19, Next.js 15, Vue 3.5, Svelte 5, TailwindCSS v4
+- BM25 search algorithm with confidence-based domain detection
+- stdio transport for VS Code/Claude Desktop integration
+- HTTP/SSE transport for development and testing
+- CSV-based extensible data system

package/LICENSE

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

package/README.md

@@ -0,0 +1,375 @@
+# 🎨 UI/UX Pro MCP Server
+
+[![npm version](https://img.shields.io/npm/v/ui-ux-pro-mcp.svg?style=flat-square)](https://www.npmjs.com/package/ui-ux-pro-mcp)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square)](https://opensource.org/licenses/MIT)
+[![TypeScript](https://img.shields.io/badge/TypeScript-5.3-blue.svg?style=flat-square)](https://www.typescriptlang.org/)
+[![MCP Compatible](https://img.shields.io/badge/MCP-Compatible-green.svg?style=flat-square)](https://modelcontextprotocol.io/)
+[![GitHub stars](https://img.shields.io/github/stars/redf0x1/ui-ux-pro-mcp?style=flat-square)](https://github.com/redf0x1/ui-ux-pro-mcp/stargazers)
+
+> **AI-powered UI/UX design intelligence** — Instantly access 1340+ curated design resources through natural language search.
+
+---
+
+## ✨ Features
+
+| Feature | Details |
+|---------|---------|
+| 📚 **1340+ Documents** | Curated design knowledge across 11 domains |
+| 🔧 **11 Tools** | Specialized search for styles, colors, typography, charts, icons, and more |
+| ⚡ **BM25 Ranking** | Fast, relevant search results using industry-standard text ranking |
+| 🔗 **Universal** | Works with VS Code, Claude Desktop, Cursor, and any MCP-compatible client |
+| 🎯 **11 Frameworks** | Stack-specific guidelines for React, Vue, Next.js, Flutter, SwiftUI, and more |
+
+---
+
+## 🚀 Quick Start
+
+### Option 1: NPX (Coming Soon)
+
+```bash
+# Will be available after npm publish
+npx ui-ux-pro-mcp
+```
+
+### Option 2: From Source
+
+```bash
+# Clone the repository
+git clone https://github.com/redf0x1/ui-ux-pro-mcp.git
+cd ui-ux-pro-mcp
+
+# Install dependencies
+npm install
+
+# Build the project
+npm run build
+
+# Run the server
+npm start
+```
+
+---
+
+## ⚙️ MCP Configuration
+
+### VS Code / Cursor
+
+Add to your MCP settings (`settings.json` or `mcp.json`):
+
+```json
+{
+  "mcpServers": {
+    "ui-ux-pro": {
+      "command": "node",
+      "args": [
+        "/path/to/ui-ux-pro-mcp/dist/index.js",
+        "--stdio"
+      ]
+    }
+  }
+}
+```
+
+**Configuration file locations:**
+
+| Platform | Path |
+|----------|------|
+| macOS | `~/Library/Application Support/Code/User/mcp.json` |
+| Windows | `%APPDATA%\Code\User\mcp.json` |
+| Linux | `~/.config/Code/User/mcp.json` |
+
+### Claude Desktop
+
+Add to your Claude Desktop configuration:
+
+**macOS:** `~/Library/Application Support/Claude/claude_desktop_config.json`
+
+**Windows:** `%APPDATA%\Claude\claude_desktop_config.json`
+
+```json
+{
+  "mcpServers": {
+    "ui-ux-pro": {
+      "command": "node",
+      "args": [
+        "/path/to/ui-ux-pro-mcp/dist/index.js",
+        "--stdio"
+      ]
+    }
+  }
+}
+```
+
+---
+
+## 🔧 Available Tools
+
+| Tool | Documents | Description |
+|------|-----------|-------------|
+| `search_ui_styles` | 70 | UI design styles (Glassmorphism, Minimalism, Brutalism, etc.) with colors, effects, and use cases |
+| `search_colors` | 112 | Color palettes for industries (SaaS, Healthcare, Fintech) with hex codes |
+| `search_typography` | 72 | Font pairings with Google Fonts imports and Tailwind configs |
+| `search_charts` | 35 | Chart types with implementation recommendations for dashboards |
+| `search_ux_guidelines` | 115 | UX best practices, do's and don'ts, accessibility (WCAG) |
+| `search_icons` | 131 | Curated Lucide icons with import codes and use cases |
+| `search_landing` | 40 | Landing patterns, Bento Grids (Config & Maps), Responsive Strategy |
+| `search_products` | 114 | Product type design recommendations per industry |
+| `search_prompts` | 30 | AI prompt templates with CSS snippets and implementation checklists |
+| `search_stack` | 660 | Framework-specific guidelines (React, Vue, Next.js, Flutter, etc.) |
+| `search_all` | All | Unified search across all design domains |
+| `get_design_system` | — | Generate complete design system with colors, typography, UI style, and layout in one call |
+
+---
+
+## 💬 Example Prompts
+
+Use these with Claude, Cursor, or any MCP-compatible AI:
+
+```
+🎨 Design Systems
+"What UI style works best for a fintech dashboard?"
+"Give me a color palette for a healthcare app"
+"Find modern font pairings for a SaaS landing page"
+
+📊 Data Visualization
+"What chart type should I use for time-series data?"
+"How do I make charts accessible?"
+
+🖥️ Landing Pages
+"Show me landing page patterns for SaaS conversion"
+"What sections should a pricing page have?"
+
+📱 UX Guidelines
+"What are mobile touch target best practices?"
+"Show me accessibility guidelines for forms"
+
+⚛️ Framework-Specific
+"React hooks best practices"
+"Vue 3 composition API patterns"
+"Next.js App Router guidelines"
+"Flutter state management recommendations"
+```
+
+---
+
+## 📂 Data Sources
+
+This server aggregates curated design intelligence from multiple domains:
+
+| Domain | File | Count | Content |
+|--------|------|-------|---------|
+| Styles | `styles.csv` | 70 | UI design trends, effects, animations |
+| Colors | `colors.csv` | 112 | Industry-specific color palettes |
+| Typography | `typography.csv` | 72 | Font pairings and configurations |
+| Charts | `charts.csv` | 35 | Data visualization recommendations |
+| UX Guidelines | `ux-guidelines.csv` | 115 | Usability and accessibility best practices |
+| Icons | `icons.csv` | 131 | Lucide icon recommendations |
+| Landing | `landing.csv` | 40 | Patterns, Bento Layout Maps, Responsive Strategy |
+| Products | `products.csv` | 114 | Industry design recommendations |
+| Prompts | `prompts.csv` | 30 | AI prompt templates |
+| Stacks | `stacks/*.csv` | 660 | Framework-specific guidelines (11 stacks) |
+
+**Available Framework Stacks:**
+`flutter` · `html-tailwind` · `nextjs` · `nuxt-ui` · `nuxtjs` · `react-native` · `react` · `shadcn` · `svelte` · `swiftui` · `vue`
+
+---
+
+## 📖 API Reference
+
+### Common Input Parameters
+
+All search tools accept:
+
+| Parameter | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `query` | string | required | Natural language search query |
+| `max_results` | number | 3 | Maximum results to return (1-50) |
+
+### `search_stack` Additional Parameter
+
+| Parameter | Type | Description |
+|-----------|------|-------------|
+| `stack_name` | string | Framework name: `react`, `vue`, `nextjs`, `flutter`, `swiftui`, etc. |
+
+### Response Format
+
+All tools return results in this structure:
+
+```typescript
+{
+  results: Array<{
+    id: string;           // Document identifier
+    score: number;        // BM25 relevance score
+    type: string;         // Document type (style, color, etc.)
+    data: object;         // Full document data
+  }>;
+  total: number;          // Total results returned
+  query: string;          // Original search query
+}
+```
+
+### Error Response
+
+```typescript
+{
+  error: string;          // Error description
+}
+```
+
+---
+
+## 🛠️ Development
+
+### Build Commands
+
+```bash
+# Build TypeScript to JavaScript
+npm run build
+
+# Development mode with hot reload
+npm run dev
+
+# Start production server (stdio mode)
+npm start
+
+# Start HTTP server for testing
+npm run start:http
+```
+
+### Testing
+
+```bash
+# Run test suite
+npm test
+```
+
+### HTTP Mode for Testing
+
+The server can run in HTTP mode for testing without MCP clients:
+
+```bash
+# Start HTTP server on port 3456
+PORT=3456 npm run start:http
+```
+
+Then test with curl:
+
+```bash
+curl -X POST http://localhost:3456/mcp \
+  -H "Content-Type: application/json" \
+  -d '{"jsonrpc":"2.0","method":"tools/call","params":{"name":"search_colors","arguments":{"query":"fintech"}},"id":1}'
+```
+
+### Project Structure
+
+```
+ui-ux-pro-mcp/
+├── src/
+│   ├── index.ts          # MCP server entry point
+│   ├── data/
+│   │   └── loader.ts     # CSV data loading utilities
+│   ├── search/
+│   │   └── bm25.ts       # BM25 search implementation
+│   └── tools/
+│       ├── index.ts      # Tool exports
+│       └── handlers.ts   # Search handlers
+├── data/
+│   ├── *.csv             # Design domain data files
+│   └── stacks/           # Framework-specific guidelines
+└── dist/                 # Compiled JavaScript output
+```
+
+---
+
+## 🌐 Environment Variables
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `MCP_LOG_LEVEL` | `info` | Log level (debug, info, warn, error) |
+| `PORT` | `3000` | HTTP server port (when using HTTP transport) |
+| `MCP_HTTP_HOST` | `localhost` | HTTP server host |
+
+---
+
+## 🔌 HTTP Transport Mode
+
+For development and testing, you can run the server in HTTP mode:
+
+```bash
+# Start HTTP server
+npm run start:http
+
+# Server runs at http://localhost:3000
+# SSE endpoint: GET /sse
+# Message endpoint: POST /message
+```
+
+Test with curl:
+```bash
+curl -X POST http://localhost:3000/message \
+  -H "Content-Type: application/json" \
+  -d '{"jsonrpc":"2.0","id":1,"method":"tools/call","params":{"name":"search_colors","arguments":{"query":"fintech"}}}'
+```
+
+---
+
+## ❓ Troubleshooting
+
+### MCP Connection Issues
+
+**"Cannot find MCP server"**
+- Ensure `npm run build` completed successfully
+- Check the path in your MCP config points to `dist/index.js`
+- Verify Node.js is in your PATH
+
+**"No results returned"**
+- Try broader search terms
+- Use `search_all` for cross-domain queries
+- Check if the domain matches your query type
+
+**"Server not responding"**
+- Restart VS Code/Claude Desktop
+- Check terminal for error messages
+- Verify the server process is running
+
+### Common Queries
+
+| Need | Best Tool |
+|------|----------|
+| Color palettes | `search_colors` |
+| UI components | `search_ui_styles` |
+| Best practices | `search_ux_guidelines` |
+| Icons | `search_icons` |
+| Framework tips | `search_stack` |
+| Everything | `search_all` |
+
+---
+
+## � Contact
+
+- **Telegram**: [@redf0x1](https://t.me/redf0x1)
+- **GitHub**: [@redf0x1](https://github.com/redf0x1)
+
+---
+
+## �📄 License
+
+MIT License — see [LICENSE](LICENSE) for details.
+
+---
+
+## 🙏 Acknowledgments
+
+- **Original Data:** Based on [nextlevelbuilder/ui-ux-pro-max-skill](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill)
+- **MCP SDK:** Built with [@modelcontextprotocol/sdk](https://github.com/modelcontextprotocol/sdk)
+- **Search:** BM25 ranking algorithm for relevance scoring
+
+---
+
+<div align="center">
+
+**[⭐ Star this repo](https://github.com/redf0x1/ui-ux-pro-mcp)** if you find it useful!
+
+Made with ❤️ by [redf0x1](https://github.com/redf0x1)
+
+</div>

package/data/charts.csv

@@ -0,0 +1,36 @@
+No,Data Type,Keywords,Best Chart Type,Secondary Options,Color Guidance,Performance Impact,Accessibility Notes,Library Recommendation,Interactive Level,ChartJS_Config,Recharts_Config,Data_Schema,Mock_Data_Example
+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,"{ type: 'line', options: { responsive: true, plugins: { legend: { position: 'top' } }, scales: { x: { type: 'time' }, y: { beginAtZero: true } } } }",<LineChart><XAxis dataKey='time' /><YAxis /><Tooltip /><Legend /><Line type='monotone' dataKey='value' stroke='#0080FF' strokeWidth={2} /></LineChart>,interface DataPoint { time: string; value: number; category?: string; }[],"[{ ""time"": ""2026-01"", ""value"": 400 }, { ""time"": ""2026-02"", ""value"": 600 }]"
+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,"{ type: 'bar', options: { responsive: true, indexAxis: 'x', plugins: { legend: { display: true } }, scales: { y: { beginAtZero: true } } } }",<BarChart><XAxis dataKey='category' /><YAxis /><Tooltip /><Legend /><Bar dataKey='value' fill='#8884d8' /></BarChart>,interface DataPoint { category: string; value: number; color?: string; }[],"[{ ""category"": ""A"", ""value"": 100 }, { ""category"": ""B"", ""value"": 200 }]"
+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,"{ type: 'doughnut', options: { cutout: '60%', plugins: { legend: { position: 'right' }, tooltip: { enabled: true } } } }",<PieChart><Pie data={data} dataKey='value' nameKey='name' cx='50%' cy='50%' innerRadius={60} outerRadius={80} fill='#8884d8' label /></PieChart>,interface Slice { name: string; value: number; color?: string; }[],"[{ ""name"": ""Mobile"", ""value"": 60 }, { ""name"": ""Desktop"", ""value"": 40 }]"
+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,"{ type: 'scatter', options: { responsive: true, plugins: { legend: { display: true } }, scales: { x: { type: 'linear' }, y: { type: 'linear' } } } }",<ScatterChart><XAxis dataKey='x' type='number' /><YAxis dataKey='y' type='number' /><Tooltip /><Scatter data={data} fill='#8884d8' /></ScatterChart>,interface Point { x: number; y: number; z?: number; label?: string; }[],"[{ ""x"": 10, ""y"": 20 }, { ""x"": 15, ""y"": 35 }]"
+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,"{ type: 'matrix', options: { responsive: true, plugins: { legend: { display: true } }, scales: { x: { type: 'category' }, y: { type: 'category' } } } }",<ResponsiveContainer><ComposedChart><XAxis dataKey='x' /><YAxis dataKey='y' /><Tooltip /></ComposedChart></ResponsiveContainer>,interface Cell { x: string; y: string; value: number; }[],"[{ ""x"": ""Mon"", ""y"": ""Morning"", ""value"": 5 }, { ""x"": ""Mon"", ""y"": ""Evening"", ""value"": 8 }]"
+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,"{ type: 'choropleth', options: { responsive: true, showOutline: true, plugins: { legend: { position: 'bottom' } } } }",Use react-simple-maps: <ComposableMap><Geographies geography={geoUrl}>{geographies.map(geo => <Geography key={geo.rsmKey} geography={geo} />)}</Geographies></ComposableMap>,interface Region { id: string; value: number; name: string; }[],"[{ ""id"": ""US"", ""value"": 100, ""name"": ""United States"" }, { ""id"": ""DE"", ""value"": 50, ""name"": ""Germany"" }]"
+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,"{ type: 'bar', options: { indexAxis: 'y', responsive: true, plugins: { legend: { display: false } }, scales: { x: { stacked: true } } } }",<FunnelChart><Funnel dataKey='value' data={data} isAnimationActive><LabelList position='right' fill='#000' dataKey='name' /></Funnel></FunnelChart>,interface Stage { stage: string; value: number; conversionRate?: number; }[],"[{ ""stage"": ""Visits"", ""value"": 1000 }, { ""stage"": ""Signups"", ""value"": 200 }]"
+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,"{ type: 'doughnut', options: { circumference: 180, rotation: -90, cutout: '75%', plugins: { tooltip: { enabled: false } } } }",<RadialBarChart innerRadius='80%' outerRadius='100%' data={data} startAngle={180} endAngle={0}><RadialBar dataKey='value' fill='#22C55E' /><Legend /></RadialBarChart>,interface GaugeData { value: number; min: number; max: number; target?: number; },"{ ""value"": 75, ""min"": 0, ""max"": 100, ""target"": 80 }"
+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,"{ type: 'line', options: { responsive: true, plugins: { legend: { position: 'top' } }, scales: { x: { type: 'time' } } } }",<ComposedChart><XAxis dataKey='time' /><YAxis /><Area dataKey='confidence' fill='#8884d8' fillOpacity={0.3} /><Line type='monotone' dataKey='actual' stroke='#0080FF' /><Line type='monotone' dataKey='forecast' stroke='#FF9500' strokeDasharray='5 5' /></ComposedChart>,interface ForecastPoint { time: string; actual: number; forecast: number; confidenceLow: number; confidenceHigh: number; }[],"[{ ""time"": ""2026-Q1"", ""actual"": 100, ""forecast"": 100 }, { ""time"": ""2026-Q2"", ""actual"": null, ""forecast"": 120, ""confidenceLow"": 110, ""confidenceHigh"": 130 }]"
+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,"{ type: 'line', options: { responsive: true, plugins: { annotation: { annotations: { anomaly: { type: 'point', backgroundColor: '#FF0000' } } } } } }",<ComposedChart><XAxis dataKey='time' /><YAxis /><Line type='monotone' dataKey='value' stroke='#0080FF' /><Scatter data={anomalies} fill='#FF0000' /></ComposedChart>,interface DataPoint { time: string; value: number; isAnomaly: boolean; }[],"[{ ""time"": ""10:00"", ""value"": 50, ""isAnomaly"": false }, { ""time"": ""10:05"", ""value"": 150, ""isAnomaly"": true }]"
+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,"{ type: 'treemap', options: { responsive: true, plugins: { legend: { display: false } }, tree: { spacing: 2 } } }",<Treemap data={data} dataKey='size' aspectRatio={4/3} stroke='#fff' fill='#8884d8'><Tooltip /></Treemap>,interface TreeNode { name: string; size: number; children?: TreeNode[]; },"{ ""name"": ""Root"", ""children"": [{ ""name"": ""A"", ""size"": 100 }, { ""name"": ""B"", ""size"": 50 }] }"
+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,"{ type: 'sankey', options: { responsive: true, plugins: { tooltip: { enabled: true } } } }",<Sankey data={data} nodeWidth={10} nodePadding={20}><Tooltip /></Sankey>,interface Flow { source: string; target: string; value: number; }[],"[{ ""source"": ""Page A"", ""target"": ""Page B"", ""value"": 50 }, { ""source"": ""Page B"", ""target"": ""Checkout"", ""value"": 20 }]"
+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,"{ type: 'bar', options: { responsive: true, plugins: { legend: { display: false } } } }","<BarChart><XAxis dataKey='name' /><YAxis /><Bar dataKey='value'>{data.map((e, i) => <Cell key={i} fill={e.value > 0 ? '#4CAF50' : '#F44336'} />)}</Bar></BarChart>",interface WaterfallItem { category: string; value: number; type?: 'increase' | 'decrease' | 'total'; }[],"[{ ""category"": ""Start"", ""value"": 100 }, { ""category"": ""Sales"", ""value"": 50 }, { ""category"": ""Cost"", ""value"": -30 }]"
+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,"{ type: 'radar', options: { responsive: true, plugins: { legend: { position: 'top' } }, scales: { r: { beginAtZero: true } } } }",<RadarChart outerRadius={90} data={data}><PolarGrid /><PolarAngleAxis dataKey='subject' /><PolarRadiusAxis /><Radar dataKey='value' stroke='#0080FF' fill='#0080FF' fillOpacity={0.2} /></RadarChart>,interface RadarPoint { subject: string; A: number; B: number; fullMark: number; }[],"[{ ""subject"": ""Math"", ""A"": 120, ""B"": 110, ""fullMark"": 150 }, { ""subject"": ""History"", ""A"": 98, ""B"": 130, ""fullMark"": 150 }]"
+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,"{ type: 'candlestick', options: { responsive: true, plugins: { legend: { display: false } }, scales: { x: { type: 'time' } } } }",Use recharts-candlestick or custom ComposedChart with Bar and ErrorBar components,interface OHLC { time: string; open: number; high: number; low: number; close: number; }[],"[{ ""time"": ""2026-01-01"", ""open"": 100, ""high"": 110, ""low"": 90, ""close"": 105 }]"
+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,"{ type: 'networkGraph', options: { responsive: true, plugins: { legend: { display: true } }, force: { repulsion: 100 } } }",Use react-force-graph or visx for network graphs - not native to Recharts,interface Graph { nodes: { id: string; group: number }[]; links: { source: string; target: string; value: number }[]; },"{ ""nodes"": [{ ""id"": ""A"", ""group"": 1 }, { ""id"": ""B"", ""group"": 2 }], ""links"": [{ ""source"": ""A"", ""target"": ""B"", ""value"": 1 }] }"
+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,"{ type: 'boxplot', options: { responsive: true, plugins: { legend: { display: true } } } }",<ComposedChart><XAxis dataKey='category' /><YAxis /><Bar dataKey='range' fill='#BBDEFB' stroke='#1976D2' /><Scatter dataKey='outliers' fill='#F44336' /></ComposedChart>,interface BoxPlot { category: string; min: number; q1: number; median: number; q3: number; max: number; outliers?: number[]; }[],"[{ ""category"": ""Group A"", ""min"": 0, ""q1"": 25, ""median"": 50, ""q3"": 75, ""max"": 100 }]"
+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,"{ type: 'bar', options: { indexAxis: 'y', responsive: true, plugins: { annotation: { annotations: { target: { type: 'line', borderColor: 'black', borderWidth: 3 } } } } } }",<ComposedChart layout='vertical'><YAxis type='category' dataKey='name' /><XAxis type='number' /><Bar dataKey='ranges' stackId='a' fill='#C8E6C9' /><Bar dataKey='actual' fill='#1976D2' /><ReferenceLine x={target} stroke='black' strokeWidth={3} /></ComposedChart>,interface BulletData { title: string; ranges: number[]; measures: number[]; markers: number[]; }[],"[{ ""title"": ""Revenue"", ""ranges"": [150, 225, 300], ""measures"": [220], ""markers"": [250] }]"
+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,"{ type: 'bar', options: { indexAxis: 'y', responsive: true, scales: { x: { stacked: true, max: 100 } } } }",Use @nivo/waffle: <Waffle total={100} data={data} rows={10} columns={10} />,interface WaffleData { id: string; label: string; value: number; color?: string; }[],"[{ ""id"": ""men"", ""label"": ""Men"", ""value"": 30 }, { ""id"": ""women"", ""label"": ""Women"", ""value"": 70 }]"
+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,"{ type: 'doughnut', options: { cutout: '0%', plugins: { legend: { display: false } } } }",Use recharts-sunburst or visx for sunburst charts,interface SunburstNode { name: string; value?: number; children?: SunburstNode[]; },"{ ""name"": ""Topic"", ""children"": [{ ""name"": ""Subtopic A"", ""value"": 100 }, { ""name"": ""Subtopic B"", ""value"": 50 }] }"
+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,"{ type: 'tree', options: { responsive: true, tree: { orientation: 'horizontal' }, plugins: { legend: { display: false } } } }",Use react-flow: <ReactFlow nodes={nodes} edges={edges} fitView><Background /><Controls /></ReactFlow>,interface DecisionTree { id: string; label: string; parentId?: string; value?: string; }[],"[{ ""id"": ""1"", ""label"": ""Root"" }, { ""id"": ""2"", ""label"": ""Option A"", ""parentId"": ""1"" }]"
+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,"{ type: 'scatter3D', options: { responsive: true, scales: { x: { type: 'linear' }, y: { type: 'linear' }, z: { type: 'linear' } } } }",Not supported in Recharts - use @react-three/fiber with drei for 3D,interface Point3D { x: number; y: number; z: number; category?: string; }[],"[{ ""x"": 10, ""y"": 20, ""z"": 30 }, { ""x"": 15, ""y"": 25, ""z"": 10 }]"
+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,"{ type: 'line', options: { responsive: true, animation: { duration: 0 }, scales: { x: { type: 'realtime' } } } }",<AreaChart data={streamData} isAnimationActive={false}><XAxis dataKey='time' /><YAxis /><Area type='monotone' dataKey='value' stroke='#00FF00' fill='#00FF00' fillOpacity={0.3} /></AreaChart>,interface StreamData { time: string; value: number; }[],"[{ ""time"": ""12:00:00"", ""value"": 50 }, { ""time"": ""12:00:01"", ""value"": 55 }]"
+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,"{ type: 'wordCloud', options: { responsive: true, plugins: { legend: { display: false } } } }","Use react-wordcloud: <WordCloud words={words} options={{ colors: ['#22C55E', '#94A3B8', '#EF4444'] }} />",interface Word { text: string; value: number; sentiment?: 'pos' | 'neg' | 'neu'; }[],"[{ ""text"": ""Good"", ""value"": 100, ""sentiment"": ""pos"" }, { ""text"": ""Bad"", ""value"": 20, ""sentiment"": ""neg"" }]"
+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,"{ type: 'sankey', options: { responsive: true, plugins: { tooltip: { enabled: true } } } }",Use react-flow: <ReactFlow nodes={processNodes} edges={processEdges}><Background variant='dots' /><MiniMap /></ReactFlow>,interface ProcessNode { id: string; label: string; type: string; } interface ProcessEdge { source: string; target: string; label?: string; },"{ ""nodes"": [{ ""id"": ""1"", ""label"": ""Start"", ""type"": ""event"" }], ""edges"": [{ ""source"": ""1"", ""target"": ""2"" }] }"
+26,Candlestick Trading,"candlestick, ohlc, trading, stocks, financial, market",Candlestick Chart,"OHLC Bar, Heikin-Ashi, Line with range",Bullish: #22C55E. Bearish: #EF4444. Volume: 30% opacity. Grid: subtle #E5E7EB.,⚡ Good,⚠ Provide data table alternative. Color-blind friendly with icons.,"TradingView Lightweight Charts, ApexCharts, Recharts",Real-time + Zoom + Crosshair,"{ type: 'candlestick', options: { responsive: true, scales: { x: { type: 'time' }, y: { position: 'right' } } } }",Use lightweight-charts or custom ComposedChart with Bar components for OHLC,interface OHLCV { time: string; open: number; high: number; low: number; close: number; volume: number; }[],"[{ ""time"": ""2026-01-01"", ""open"": 100, ""high"": 110, ""low"": 90, ""close"": 105, ""volume"": 1000 }]"
+27,Confusion Matrix,"confusion, matrix, ml, classification, model, accuracy",Confusion Matrix Heatmap,"Normalized Matrix, Error Analysis Grid",True Positive/Negative: #22C55E gradient. False: #EF4444 gradient. Diagonal highlight.,⚡ Excellent,✓ Clear labels essential. Include precision/recall metrics.,"Plotly, D3.js, Custom SVG",Hover + Cell Details,"{ type: 'matrix', options: { responsive: true, plugins: { tooltip: { enabled: true } }, scales: { color: { type: 'color' } } } }","Use @nivo/heatmap: <HeatMap data={matrix} keys={labels} indexBy='actual' colors={{ type: 'diverging', scheme: 'red_yellow_green' }} />",interface ConfusionMatrix { actual: string; predicted: string; count: number; }[],"[{ ""actual"": ""True"", ""predicted"": ""True"", ""count"": 100 }, { ""actual"": ""True"", ""predicted"": ""False"", ""count"": 10 }]"
+28,KPI Sparkline,"kpi, sparkline, metric, indicator, trend, card",KPI Card with Sparkline,"Metric Card, Stat Box",KPI value: Large #0F172A. Sparkline: #3B82F6. Trend: Green up Red down.,⚡ Excellent,✓ Include numeric values. Trend direction with text.,"Recharts, Tremor, Custom SVG",Hover + Click Drill,"{ type: 'line', options: { responsive: true, plugins: { legend: { display: false } }, scales: { x: { display: false }, y: { display: false } }, elements: { point: { radius: 0 } } } }",<AreaChart width={100} height={40} data={sparkData}><Area type='monotone' dataKey='value' stroke='#3B82F6' fill='#3B82F6' fillOpacity={0.2} /></AreaChart>,interface SparkLine { time: string; value: number; }[],"[{ ""time"": ""1"", ""value"": 10 }, { ""time"": ""2"", ""value"": 15 }, { ""time"": ""3"", ""value"": 8 }]"
+29,Radial Gauge,"gauge, speedometer, progress, dial, radial, meter",Radial Gauge / Speedometer,"Bullet Chart, Progress Ring",Zones: Red #EF4444 Yellow #F59E0B Green #22C55E. Needle: #1E293B.,⚡ Good,✓ Add numeric value display. Clear zone labels.,"ApexCharts, D3.js, ECharts",Hover,"{ type: 'doughnut', options: { circumference: 270, rotation: 225, cutout: '80%', plugins: { tooltip: { enabled: false } } } }","<RadialBarChart innerRadius='60%' outerRadius='100%' data={gaugeData} startAngle={225} endAngle={-45}><PolarAngleAxis type='number' domain={[0, 100]} tick={false} /><RadialBar dataKey='value' cornerRadius={10} fill='#22C55E' /></RadialBarChart>",interface GaugeValue { value: number; max: number; unit: string; },"{ ""value"": 80, ""max"": 100, ""unit"": ""km/h"" }"
+30,Bullet Progress,"bullet, progress, target, performance, comparison",Bullet Chart,"Gauge, Progress Bar, Bar with Target",Ranges: Light to dark gray gradient. Actual: #3B82F6. Target: Black 2px line.,⚡ Excellent,✓ Excellent accessibility. Clear value labels.,"D3.js, Plotly, Custom SVG",Hover,"{ type: 'bar', options: { indexAxis: 'y', responsive: true, plugins: { annotation: { annotations: { target: { type: 'line', borderColor: '#000', borderWidth: 2 } } } } } }",<ComposedChart layout='vertical'><YAxis type='category' dataKey='name' hide /><XAxis type='number' /><Bar dataKey='poor' stackId='range' fill='#E5E7EB' /><Bar dataKey='ok' stackId='range' fill='#CBD5E1' /><Bar dataKey='good' stackId='range' fill='#94A3B8' /><Bar dataKey='actual' fill='#3B82F6' /><ReferenceLine x={target} stroke='#000' strokeWidth={2} /></ComposedChart>,interface BulletChart { target: number; actual: number; rangeLow: number; rangeMid: number; rangeHigh: number; },"{ ""target"": 90, ""actual"": 85, ""rangeLow"": 0, ""rangeMid"": 50, ""rangeHigh"": 100 }"
+31,Stream Flow,"stream, flow, volume, stacked, area, time",Stream Graph,"Stacked Area, ThemeRiver",Color per category. Center-aligned baseline. 60-80% opacity.,⚠ Moderate,⚠ Hard to read exact values. Provide data table.,"D3.js, Nivo, Recharts",Hover + Toggle Layers,"{ type: 'line', options: { responsive: true, scales: { y: { stacked: true } }, elements: { line: { tension: 0.4, fill: true } } } }",<AreaChart stackOffset='silhouette'><XAxis dataKey='time' /><YAxis />{categories.map(cat => <Area type='monotone' dataKey={cat} stackId='1' fill={colors[cat]} fillOpacity={0.7} />)}</AreaChart>,interface StreamLayer { id: string; data: { x: any; y: number }[]; }[],"[{ ""id"": ""Layer A"", ""data"": [{ ""x"": 1, ""y"": 10 }, { ""x"": 2, ""y"": 20 }] }, { ""id"": ""Layer B"", ""data"": [{ ""x"": 1, ""y"": 15 }, { ""x"": 2, ""y"": 25 }] }]"
+32,Waterfall Financial,"waterfall, financial, bridge, cumulative, change",Waterfall Chart,"Cascade Chart, Bridge Chart",Increase: #22C55E. Decrease: #EF4444. Total: #3B82F6. Connectors: #94A3B8.,⚡ Good,✓ Good accessibility with clear labels. Show running total.,"ApexCharts, Recharts, Plotly",Hover + Annotations,"{ type: 'bar', options: { responsive: true, plugins: { legend: { display: false } } } }","<BarChart><XAxis dataKey='name' /><YAxis /><Bar dataKey='start' stackId='a' fill='transparent' /><Bar dataKey='value' stackId='a'>{data.map((e, i) => <Cell key={i} fill={e.type === 'increase' ? '#22C55E' : '#EF4444'} />)}</Bar></BarChart>",interface FinancialWaterfall { label: string; amount: number; isTotal?: boolean; }[],"[{ ""label"": ""Product Revenue"", ""amount"": 100 }, { ""label"": ""Services Revenue"", ""amount"": 30 }, { ""label"": ""Total"", ""amount"": 130, ""isTotal"": true }]"
+33,Chord Relationships,"chord, relationships, flow, connections, matrix",Chord Diagram,"Sankey, Arc Diagram, Network",Color per group. Arc connections 40% opacity. Hover highlight 100%.,⚠ Moderate,⚠ Complex for screen readers. Provide matrix alternative.,"D3.js (d3-chord), Nivo, Plotly",Hover + Click Filter,"{ type: 'chord', options: { responsive: true, plugins: { tooltip: { enabled: true } }, arc: { borderWidth: 1 } } }",Use @nivo/chord: <Chord matrix={matrix} keys={keys} colors={{ scheme: 'nivo' }} arcOpacity={0.65} ribbonOpacity={0.4} />,interface ChordMatrix { keys: string[]; matrix: number[][]; },"{ ""keys"": [""A"", ""B""], ""matrix"": [[10, 20], [5, 15]] }"
+34,Parallel Coordinates,"parallel, coordinates, multivariate, dimensions, comparison",Parallel Coordinates Plot,"Radar Chart, Scatter Matrix",Lines: Category colors 40% opacity. Axes: #64748B. Selected: 100% bright.,⚠ Moderate,⚠ Complex visualization. Limit to 5-8 dimensions. Provide table.,"D3.js, Plotly, Vega-Lite",Brush + Select + Filter,"{ type: 'line', options: { responsive: true, plugins: { legend: { display: true } }, scales: { y: { display: false } } } }",Use @visx/shape ParallelCoordinates or D3.js - not native to Recharts,interface ParallelData { [dimension: string]: number | string; }[],"[{ ""dim1"": 10, ""dim2"": 5, ""category"": ""A"" }, { ""dim1"": 20, ""dim2"": 8, ""category"": ""B"" }]"
+35,Marimekko Market,"marimekko, mekko, market, composition, two-dimensional",Marimekko / Mekko Chart,"Treemap, Stacked Bar, Mosaic",Category colors. Width = market size. Height = share. Clear borders.,⚠ Moderate,⚠ Can be confusing. Clear labels essential. Provide breakdown table.,"D3.js, Plotly, ECharts",Hover + Drill,"{ type: 'bar', options: { responsive: true, scales: { x: { stacked: true }, y: { stacked: true, max: 100 } } } }",Use @nivo/marimekko: <Marimekko data={data} id='segment' value='population' dimensions={dimensions} innerPadding={3} />,interface MekkoData { x: string; y: string; value: number; }[],"[{ ""x"": ""Region A"", ""y"": ""Product X"", ""value"": 100 }, { ""x"": ""Region A"", ""y"": ""Product Y"", ""value"": 50 }]"