charting

Solid

Selects the right chart type and visualization library for React/Next.js (web) and Expo/React Native (mobile) data visualization tasks, then applies accessibility and anti-pattern guardrails. Maps data shape and intent (comparison, composition, distribution, relationship, evolution, flow, geographic, hierarchical) to a recommended chart, then to a recommended library based on platform, dataset size, and design system. Defers cross-cutting UI concerns (contrast, touch targets, typography, copy) to the `ux` skill rather than restating them. Triggers on: "what chart should I use", "visualize this data", "build a chart", "build a dashboard", "data visualization", "pick a chart library", "graph this", "/charting".

Web & Frontend 8 stars 2 forks Updated 2 days ago MIT

Install

View on GitHub

Quality Score: 81/100

Stars 20%
32
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
80
License 10%
100
Description 5%
100

Skill Content

# Charting Skill You are a data-visualization advisor for React/Next.js (web) and Expo/React Native (mobile) applications. Your job is to pick the right chart, the right library, and call out accessibility and anti-pattern risks — without re-implementing the visual-design rules covered by sibling skills: `ux` owns foundational mechanics (contrast minimums, touch targets, microcopy), `visual-design` owns generative direction (series-palette construction, style-direction match, type pairing). Defer to those skills rather than restating their rules. ## Invocation Run this workflow whenever the user invokes `/charting` or asks "what chart should I use", "visualize X", "build a dashboard chart", or "pick a chart library". ### Phase 1: Discover the intent and the data Ask — in **one** batched message — only the answers you cannot infer from context: 1. **Platform** — web (React/Next.js), mobile (Expo/React Native), or both? 2. **Intent** — what question must the chart answer? Map to one of: comparison, composition, distribution, relationship, evolution (over time), flow, geographic, hierarchical. See `rules/chart-type-selection.md`. 3. **Data shape** — number of categorical dimensions, number of numeric measures, approximate row count (≤ 50, 50–10k, > 10k). 4. **Audience and surface** — public marketing page, internal dashboard, embedded analytics, mobile widget? 5. **Constraints** — design system already in use (shadcn/ui, Tailwind, Tremor, Material, custom), bundle-size bud...

Details

Author
mthines
Repository
mthines/agent-skills
Created
3 months ago
Last Updated
2 days ago
Language
TypeScript
License
MIT

Integrates with

Similar Skills

Semantically similar based on skill content — not just same category

AI & Automation Listed

chart-chooser

Selects the most appropriate chart type for a given dataset and analytical question, then produces a clean, honest, well-labeled visualization spec. Use this skill when a user asks "what chart should I use", "how should I visualize this data", "which graph fits", "make a chart for X", "is a pie chart right here", "how do I show change over time / comparison / distribution / correlation / part-to-whole", or when reviewing an existing chart for clarity and honesty. Covers chart-type decision-making, encoding choices (axis, color, size), labeling, axis-truncation ethics, accessibility, and avoiding misleading visuals.

3 Updated 3 weeks ago
JayRHa
AI & Automation Featured

chart-clarity

Create, review, and restyle data visualizations using Edward Tufte principles: high data-ink ratio, direct labels, range-frame axes, small multiples, accessible color, responsive charts, and honest comparisons. Triggers on: "create a chart", "style this chart", "review this graph", "Tufte chart", "data visualization", "Recharts", "Plotly", "matplotlib", "Chart.js", "ECharts", "D3". Use when generating or critiquing charts, dashboards, sparklines, and data tables.

313 Updated 4 days ago
Mathews-Tom
Data & Documents Listed

chart-style

Transforms data and business narratives into strict consulting-style charts and visualizations. Use this skill whenever the user asks to: visualize data, make a chart, build a slide visual, create a waterfall, slope chart, Mekko, scatter, bar chart, or any business chart. Also triggers on phrases like "consulting style", "consulting chart", "slide visual", "deck visual", "make this presentation-ready", "show this as a chart", or any request involving data + visual output. Always apply this skill when producing charts — even casual requests like "chart this for me" or "show me this data visually". Produces inline SVG (renders in chat) and/or slide-ready PNG exports.

1 Updated 1 months ago
qiaoxuelin