visualizing-data

77 / 100 · Review before installing

Check before installing.

By ancoleman/ai-design-components (GitHub) · design · 530 stars · scanned at commit 76551b7

Builds dashboards, reports, and data-driven interfaces requiring charts, graphs, or visual analytics. Provides systematic framework for selecting appropriate visualizations based on data characteristics and analytical purpose. Includes 24+ visualization types organized by purpose (trends, comparisons, distributions, relationships, flows, hierarchies, geospatial), accessibility patterns (WCAG 2.1 AA compliance), colorblind-safe palettes, and performance optimization strategies. Use when creating…

Works with any agent that supports SKILL.md skills.

What this skill can do

Runs commands on your computer

The author does not mention this.

Found in 5 places.

skills/visualizing-data/SKILL.md, line 160npm install recharts
skills/visualizing-data/SKILL.md, line 190npm install d3
skills/visualizing-data/SKILL.md, line 197npm install react-plotly.js plotly.js

Show 2 more

skills/visualizing-data/SKILL.md, line 312cd examples/javascript && npm install && npm start
skills/visualizing-data/SKILL.md, line 321scripts/validate_accessibility.py <chart-html>

Connects to the internet

This is disclosed by the author in the skill's SKILL.md or README.

Found in 3 places.

skills/visualizing-data/references/performance.md, line 88const largeDataset = fetch('/api/data').then(r => r.json()); // 5000 points
skills/visualizing-data/references/performance.md, line 217const data = await fetch('/api/chart-data?granularity=day&metric=sum')
skills/visualizing-data/references/performance.md, line 240const response = await fetch(`${endpoint}?offset=${offset}&limit=${chunkSize}`);

Downloads and installs other software

The author does not mention this.

Found in 2 places.

skills/visualizing-data/references/python/matplotlib-examples.md, line 8pip install matplotlib numpy pandas
skills/visualizing-data/references/python/plotly-examples.md, line 8pip install plotly pandas

Safer alternatives

Low-risk skills in the same category (design) that look related. Check that one does what you need.

Install

Paste this into your terminal. It downloads exactly the version we scanned, not whatever is newest.

if [ -e ~/.agents/skills/'visualizing-data' ] || [ -L ~/.agents/skills/'visualizing-data' ]; then echo 'A skill folder named visualizing-data already exists — not replacing it' >&2; false; else d=$(mktemp -d) && git clone --quiet --filter=blob:none --no-checkout 'https://github.com/ancoleman/ai-design-components' "$d" && git -C "$d" checkout --quiet '76551b7b19ebc667764ec75da14990d0aef8b6e5' -- 'skills/visualizing-data' && mkdir -p ~/.agents/skills && cp -R "$d"/'skills/visualizing-data' ~/.agents/skills/'visualizing-data' && rm -rf "$d"; fi

Codex reads ~/.agents/skills directly. For Claude Code, Cursor, Copilot, Gemini CLI, Antigravity or OpenCode, also link it. For Claude Code: ln -s ~/.agents/skills/'visualizing-data' ~/.claude/skills/'visualizing-data' (other agents: ~/.cursor/skills, ~/.copilot/skills, ~/.gemini/skills, ~/.gemini/config/skills, ~/.config/opencode/skills). Or install through the finder skill, which does both.

Badge for your README

The badge for ancoleman/ai-design-components shows the score of its lowest-scoring skill.

SkillTrust badge for ancoleman/ai-design-components

[![SkillTrust](https://zalavijaysinh.github.io/skilltrust/badges/ancoleman/ai-design-components.svg)](https://zalavijaysinh.github.io/skilltrust/repos/ancoleman/ai-design-components/)

Score history

Date	Version	Score
2026-11-08	`76551b7`	100
2026-11-07	`76551b7`	77