Ui Ux Pro Max
Pick chart types, colors, libraries, and accessibility patterns when solo builders ship dashboards or data-heavy UIs.
Overview
ui-ux-pro-max is an agent skill most often used in Build (also Grow, Validate) that maps data-visualization goals to chart types, colors, libraries, and accessibility guidance for dashboard UIs.
Install
npx skills add https://github.com/sickn33/antigravity-awesome-skills --skill ui-ux-pro-maxWhat is this skill?
- Maps data intent keywords (trend, compare, part-to-whole, correlation, heatmap) to primary and secondary chart types
- Per-chart color guidance, performance notes, and accessibility warnings including colorblind-friendly patterns
- Library recommendations across Chart.js, Recharts, ApexCharts, D3.js, and Plotly with suggested interaction levels
- Structured CSV taxonomy for solo builders choosing visuals without guessing from generic design blogs
- Five primary data-intent categories with chart-type mappings in the reference taxonomy
- Per-row guidance covers performance impact and accessibility notes for each chart pattern
Adoption & trust: 2.6k installs on skills.sh; 40.1k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You know what data to show but keep picking the wrong chart, colors, or library and shipping confusing or inaccessible dashboards.
Who is it for?
Solo builders implementing admin dashboards, analytics pages, or MVP reporting UIs who want agent-ready chart selection rules.
Skip if: Teams that need full brand systems, user interviews, or motion design—this is data-viz pattern reference, not a complete design process.
When should I use this skill?
You are designing or implementing dashboards, reports, or any UI that must display trends, comparisons, proportions, correlations, or heatmaps.
What do I get? / Deliverables
You get a consistent chart-type and styling decision tied to your data intent, with clearer accessibility and performance tradeoffs before you implement components.
- Chart type and library recommendation aligned to data intent
- Color and accessibility constraints for the chosen visualization
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Canonical shelf is Build because the skill encodes UI and visualization decisions for product surfaces, not distribution or ops. Frontend is where chart selection, color guidance, and component-level accessibility land in shipped interfaces.
Where it fits
Choose a line vs bar chart for a fake-door metrics mock on a landing prototype.
Align agent-generated React dashboard code with recommended chart types and color opacity rules.
Refactor a crowded pie chart into a stacked bar per accessibility notes on the grow analytics page.
Cross-check shipped reporting UI against documented accessibility warnings before release.
How it compares
Use as a structured chart cheat sheet instead of asking the model to invent visualization advice from scratch each sprint.
Common Questions / FAQ
Who is ui-ux-pro-max for?
Indie and solo builders shipping web apps with charts, KPIs, or analytics who want fast, repeatable UI/UX guidance for visualization choices.
When should I use ui-ux-pro-max?
During Build when wiring dashboard frontend; during Validate when prototyping metrics on a landing page; during Grow when refining lifecycle or analytics screens that need clearer charts.
Is ui-ux-pro-max safe to install?
Review the Security Audits panel on this Prism page and the upstream repo before trusting it in your agent; the skill content is reference data, not executable infrastructure.
SKILL.md
READMESKILL.md - Ui Ux Pro Max
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-varia