admin/SuperCharged-Claude-Code-Upgrade
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reorganize: Move all skills to skills/ folder

Browse Source 
- Created skills/ directory
- Moved 272 skills to skills/ subfolder
- Kept agents/ at root level
- Kept installation scripts and docs at root level

Repository structure:
- skills/           - All 272 skills from skills.sh
- agents/           - Agent definitions
- *.sh, *.ps1       - Installation scripts
- README.md, etc.   - Documentation

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
admin
2026-01-23 18:05:17 +00:00
Unverified
parent 2b4e974878
commit b723e2bd7d
4083 changed files with 1056 additions and 1098063 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
skills/ui-ux-pro-max/data/charts.csv
View File

@@ -1,26 +0,0 @@
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
1 No Data Type Keywords Best Chart Type Secondary Options Color Guidance Performance Impact Accessibility Notes Library Recommendation Interactive Level
2 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
3 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
4 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
5 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
6 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
7 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
8 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
9 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
10 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
11 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
12 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
13 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
14 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
15 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
16 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
17 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
18 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
19 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
20 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
21 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
22 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
23 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
24 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
25 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
26 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