data-viz-2025
OfficialCreate stunning, Tufte-approved data visualizations.
Authorcuriositech
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill empowers you to build production-ready, accessible, and performant data visualizations in React/Next.js/TypeScript, adhering to the highest standards of clarity, beauty, and truth.
Core Features & Use Cases
- Library Selection: Decision trees guide you to the best library (Observable Plot, Recharts, Nivo, Visx, D3).
- Tufte Principles: Integrates data-ink ratio maximization, graphical integrity, and direct labeling.
- Testing & Accessibility: Built-in strategies for visual regression, data accuracy, and WCAG compliance.
- Animation: Implements modern animation patterns with spring physics for engaging user experiences.
- Use Case: Generate an interactive sales dashboard with animated bar charts and line graphs, ensuring optimal performance, accessibility, and adherence to design best practices.
Quick Start
Use the data-viz-2025 skill to create a bar chart using Recharts with the provided sales data.
Dependency Matrix
Required Modules
@observablehq/plotrecharts@nivo/core@visx/visxd3@tremor/reactframer-motion@percy/cli@testing-library/react@storybook/react
Components
scriptsreferencesassets
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: data-viz-2025 Download link: https://github.com/curiositech/some_claude_skills/archive/main.zip#data-viz-2025 Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.