How-to · Design & Creative · By JR Brugger (Design Workflow)

How to use Data Visualization in your AI agent

Install and use the Data Visualization skill in Claude Code, Cursor, Codex, Gemini CLI, OpenCode, and Windsurf — with sample prompts.

What you'll get

This skill helps you create effective data visualizations by choosing the right chart type for your data and applying best practices for clarity and accessibility. It follows proven design principles from experts like Edward Tufte and Alberto Cairo to ensure your charts tell the story you need them to tell. Perfect for anyone who needs to present data in reports, presentations, or dashboards.

Step 1 — Get the skill source URL

The Data Visualization skill lives at:

Step 2 — Add it to your AI agent

Copy one of these prompts and paste it into your AI tool. The agent will fetch and install the skill for you.

Claude Code

Add the agent skill from https://github.com/jrbrugger/design-workflow/tree/main/designer-skills-main/ui-design/skills/data-visualization to my project.

Cursor

Install this agent skill: https://github.com/jrbrugger/design-workflow/tree/main/designer-skills-main/ui-design/skills/data-visualization

Codex

Add this skill to .codex/skills/: https://github.com/jrbrugger/design-workflow/tree/main/designer-skills-main/ui-design/skills/data-visualization

Gemini CLI

Add the skill at https://github.com/jrbrugger/design-workflow/tree/main/designer-skills-main/ui-design/skills/data-visualization to my .gemini/skills/ directory.

OpenCode

Install this agent skill from https://github.com/jrbrugger/design-workflow/tree/main/designer-skills-main/ui-design/skills/data-visualization

Windsurf

Add this skill: https://github.com/jrbrugger/design-workflow/tree/main/designer-skills-main/ui-design/skills/data-visualization

Step 3 — Try these prompts

Once the skill is installed, ask your AI things like:

  • Building a presentation deck and need to show quarterly sales trends or market data
  • Writing a report and want to visualize survey results or customer metrics
  • Create a dashboard that communicates KPIs to your team
  • Designing charts for an article, proposal, or investor update

What this skill does

  • Recommends the right chart type based on what you're trying to show (trends, comparisons, distributions, relationships)
  • Applies design principles that make charts clear and easy to read (proper labels, colors, and minimal decoration)
  • Ensures visualizations are accessible to all audiences including colorblind users
  • Guides responsive design so charts work on mobile and desktop
  • Provides best practices for direct labeling, context, and interactive exploration
Made byJR Brugger (Design Workflow)
CategoryDesign & Creative