thomas/ui-ux-pro-max-skill
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Restructure plugin for Claude Code skill discovery (#94)

Browse Source 
- Move .claude/skills/ui-ux-pro-max to skills/ui-ux-pro-max
- Update marketplace.json source from specific path to root ("./")
- Update script paths in SKILL.md to match new location
- Bump version to 2.0.1

Claude Code auto-discovers skills from the skills/ subdirectory relative
to the source path. The previous structure placed SKILL.md at the source
path directly, which prevented skill discovery.

Tested locally and confirmed the skill now loads correctly.
This commit is contained in:
Shehab Tarek
2026-01-18 17:04:31 +02:00
committed by GitHub
parent ee852c3f56
commit fef14a0f33
29 changed files with 1236 additions and 1236 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
.claude/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