Ui Ux Pro Max
Pick the right chart type, color guidance, accessibility tradeoffs, and JS chart library for each dashboard or analytics UI your agent is building.
Overview
ui-ux-pro-max is an agent skill for the Build phase that recommends chart types, colors, accessibility notes, and chart libraries for dashboard and analytics UI.
Install
npx skills add https://github.com/davila7/claude-code-templates --skill ui-ux-pro-maxWhat is this skill?
- Row-indexed chart playbook covering trend, category compare, part-to-whole, correlation, and heatmap intents
- Per-intent guidance: primary and secondary chart types with performance and accessibility notes
- Library recommendations (Chart.js, Recharts, ApexCharts, D3.js, Plotly) tied to each data story
- Color and interaction hints—e.g. line trends at 20% fill opacity, pie slices capped around 5–6 with stacked-bar alternat
- CSV-structured reference agents can scan quickly during UI generation tasks
- Multi-row chart decision table indexed from trend through heatmap/intensity patterns
- Explicit pie/donut guidance to limit roughly 5–6 slices with stacked-bar alternative
Adoption & trust: 1.2k installs on skills.sh; 27.8k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your agent keeps defaulting to pie charts and line graphs that mismatch the data story, hurt accessibility, or perform poorly at scale.
Who is it for?
Solo SaaS builders adding analytics pages, admin metrics, or onboarding progress visuals who want fast, defensible chart picks.
Skip if: Products with no quantitative UI, or teams that already standardized on one chart design system and only need implementation snippets.
When should I use this skill?
Building dashboards, analytics screens, or any UI that needs keyword-matched chart type and library recommendations.
What do I get? / Deliverables
You get a keyword-matched chart specification—type, colors, library, and interaction level—ready to implement in your frontend stack.
- Chart type and fallback recommendation
- Color and interaction specification
- Suggested chart library list per use case
Recommended Skills
Journey fit
Canonical shelf is Build because the artifact is a decision matrix for implementing data visualization UI in product screens. Frontend is where chart components, interaction level (hover, zoom, brush), and accessibility alternatives get chosen in code.
How it compares
Data-viz decision matrix for charts—not a typography skill and not a full component library like shadcn charts wrappers alone.
Common Questions / FAQ
Who is ui-ux-pro-max for?
Indie developers and agent users implementing dashboards or in-app analytics who need structured chart guidance without a dedicated data-viz designer.
When should I use ui-ux-pro-max?
During Build/frontend when designing metrics screens, growth charts, or comparison views before you commit to a chart library and color palette.
Is ui-ux-pro-max safe to install?
It is reference data with no inherent network calls—still review the Security Audits panel on this Prism page for the parent template package.
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