New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Chart Designer

by claude-office-skills in claude-office-skills/skills

Design effective data visualizations and charts. An agent skill from claude-office-skills/skills.

MITAuto-check passedData & Analytics

Install Chart Designer

skills CLI
$ npx skills add claude-office-skills/skills --skill chart-designer -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install claude-office-skills/skills chart-designer --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/claude-office-skills/skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/chart-designer .claude/skills/chart-designer && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
chart-designer
GitHub stars
505
Token cost
~2.2k tokens
SKILL.md length
544 words
Files
1
Skills in repo
12
Repo updated
First seen
Licence
MIT

At a glance

Design effective data visualizations and charts. An agent skill from claude-office-skills/skills.

  • Works in 3 steps: Describe Your Data → Get Recommendations → Receive Chart Configs
  • Tasks that involve Data visualization
  • SKILL.md covers Overview, How to Use Me, Chart Selection Guide and Decision Tree, plus 6 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Chart Designer is an agent skill from claude-office-skills/skills. Design effective data visualizations and charts. Generate chart configurations for ECharts, Chart.js, and other libraries. Create dashboards and reports.

Its SKILL.md is about 2.2k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Data & Analytics, covering Data visualization. It works with Chart.js. The repository describes itself as: A curated collection of practical Claude Skills for real-world office tasks. The licence is MIT.

When your agent uses it

  • Tasks that involve Data visualization

Example prompts

  • “/chart-designer”

Workflow steps

3 steps, taken from the step headings in SKILL.md.

  1. Describe Your Data
  2. Get Recommendations
  3. Receive Chart Configs

What it can do on your machine

Read from SKILL.md and the folder at commit 9c4c7d5. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are javascript and markdown).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Chart Designer loads about 2.2k tokens when it runs. Until then it costs about 42 tokens; SKILL.md has 544 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~42
When it runs · the whole SKILL.md, loaded when a task matches
~2.2k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from claude-office-skills/skills at commit 9c4c7d5, republished under its MIT licence (© claude-office-skills). 544 words, ~2,159 tokens.

Download SKILL.mdSave it as .claude/skills/chart-designer/SKILL.md (or your agent's skills folder).
name
chart-designer
description
Design effective data visualizations and charts. Generate chart configurations for ECharts, Chart.js, and other libraries. Create dashboards and reports.
version
1.0.0
author
claude-office-skills
license
MIT
category
visualization
tags
chart, data-visualization, echarts, dashboard, analytics
department
Data/Analytics
models.recommended
claude-sonnet-4, claude-opus-4
models.compatible
claude-3-5-sonnet, gpt-4, gpt-4o
mcp.server
office-mcp
mcp.tools
create_chart, read_xlsx, create_xlsx

Chart Designer Skill

Overview

I help you design effective data visualizations by recommending the right chart types, generating configurations for popular charting libraries, and applying data visualization best practices.

What I can do:

  • Recommend appropriate chart types for your data
  • Generate ECharts/Chart.js configurations
  • Design dashboard layouts
  • Apply visualization best practices
  • Create Excel chart specifications
  • Suggest color schemes and styling

What I cannot do:

  • Render charts directly (use generated configs in tools)
  • Create custom chart types from scratch
  • Access your data directly

How to Use Me

Step 1: Describe Your Data

Tell me:

  • What type of data you have
  • What story you want to tell
  • Your audience (technical, executive, public)
  • Where it will be displayed (presentation, dashboard, report)
Step 2: Get Recommendations

I'll suggest:

  • Best chart type(s) for your data
  • Configuration options
  • Color schemes
  • Layout considerations
Step 3: Receive Chart Configs

I'll provide:

  • ECharts JSON configuration
  • Chart.js configuration
  • Excel chart setup instructions
  • CSS/styling recommendations

Chart Selection Guide

Comparison Charts
Chart TypeBest ForData Requirements
Bar ChartComparing categoriesCategories + values
Grouped BarMultiple series comparisonCategories + multiple series
Stacked BarPart-to-whole comparisonCategories + component values
Trend Charts
Chart TypeBest ForData Requirements
Line ChartChange over timeTime series data
Area ChartCumulative trendsTime series (stacked optional)
SparklineCompact trendsSimple time series
Distribution Charts
Chart TypeBest ForData Requirements
HistogramValue distributionNumeric values
Box PlotDistribution summaryNumeric values with quartiles
Scatter PlotCorrelationTwo numeric variables
Part-to-Whole Charts
Chart TypeBest ForData Requirements
Pie ChartSimple proportions (≤5 items)Categories + percentages
Donut ChartProportions with totalCategories + percentages
TreemapHierarchical proportionsHierarchical data + values
Specialized Charts
Chart TypeBest ForData Requirements
FunnelProcess stages/conversionStages + values
GaugeSingle KPI vs targetCurrent value + target
HeatmapMatrix comparisonsRow + Column + Value
RadarMulti-dimensional comparisonMultiple metrics per item
SankeyFlow/transitionsSource + Target + Value

Decision Tree

What do you want to show?
│
├─ Comparison
│   ├─ Among items → Bar Chart
│   ├─ Over time → Line Chart
│   └─ Multiple series → Grouped/Stacked Bar
│
├─ Composition
│   ├─ Static → Pie/Donut (≤5) or Treemap
│   ├─ Over time → Stacked Area
│   └─ Hierarchical → Treemap/Sunburst
│
├─ Distribution
│   ├─ Single variable → Histogram
│   ├─ Multiple datasets → Box Plot
│   └─ Two variables → Scatter Plot
│
├─ Relationship
│   ├─ Two variables → Scatter Plot
│   ├─ Three variables → Bubble Chart
│   └─ Correlation matrix → Heatmap
│
└─ Flow/Process
    ├─ Sequential stages → Funnel
    ├─ Transitions → Sankey
    └─ Single metric → Gauge

Output Format

markdown
# Chart Design: [Title]

**Data Type**: [Description]
**Purpose**: [What story to tell]
**Recommended Chart**: [Chart type]

---

## Chart Configuration

### ECharts

```javascript
const option = {
  title: {
    text: 'Chart Title',
    left: 'center'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['Series 1', 'Series 2'],
    bottom: 10
  },
  xAxis: {
    type: 'category',
    data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Series 1',
      type: 'bar',
      data: [120, 200, 150, 80, 70, 110]
    },
    {
      name: 'Series 2',
      type: 'line',
      data: [100, 180, 160, 90, 80, 100]
    }
  ]
};
Chart.js
javascript
const config = {
  type: 'bar',
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
    datasets: [{
      label: 'Series 1',
      data: [120, 200, 150, 80, 70, 110],
      backgroundColor: 'rgba(54, 162, 235, 0.8)'
    }]
  },
  options: {
    responsive: true,
    plugins: {
      title: {
        display: true,
        text: 'Chart Title'
      }
    }
  }
};

Styling Recommendations

Color Palette
  • Primary: #5470c6
  • Secondary: #91cc75
  • Accent: #fac858
  • Neutral: #73c0de
Show full SKILL.md (217 more words)Show less
Typography
  • Title: 16px, bold
  • Labels: 12px, regular
  • Axis: 11px, light

Best Practices Applied

  1. [Practice 1]
  2. [Practice 2]
  3. [Practice 3]

Alternative Charts

If this doesn't work well, consider:

  1. [Alternative 1] - when [condition]
  2. [Alternative 2] - when [condition]

---

## ECharts Common Configurations

### Bar Chart
```javascript
{
  xAxis: { type: 'category', data: categories },
  yAxis: { type: 'value' },
  series: [{
    type: 'bar',
    data: values,
    itemStyle: { color: '#5470c6' }
  }]
}
Line Chart
javascript
{
  xAxis: { type: 'category', data: categories },
  yAxis: { type: 'value' },
  series: [{
    type: 'line',
    data: values,
    smooth: true,
    areaStyle: {} // for area chart
  }]
}
Pie Chart
javascript
{
  series: [{
    type: 'pie',
    radius: ['40%', '70%'], // donut
    data: [
      { value: 100, name: 'A' },
      { value: 200, name: 'B' }
    ]
  }]
}
Scatter Plot
javascript
{
  xAxis: { type: 'value' },
  yAxis: { type: 'value' },
  series: [{
    type: 'scatter',
    data: [[x1, y1], [x2, y2]],
    symbolSize: 10
  }]
}

Color Palettes

Professional
#5470c6, #91cc75, #fac858, #ee6666, #73c0de, #3ba272, #fc8452, #9a60b4
Cool
#1f77b4, #aec7e8, #17becf, #9edae5, #6baed6, #c6dbef, #08519c, #3182bd
Warm
#ff7f0e, #ffbb78, #d62728, #ff9896, #e377c2, #f7b6d2, #bcbd22, #dbdb8d
Accessible (colorblind-friendly)
#0077BB, #33BBEE, #009988, #EE7733, #CC3311, #EE3377, #BBBBBB

Best Practices

Data Ink Ratio
  • Remove unnecessary gridlines
  • Minimize chart junk
  • Let data be the focus
Clarity
  • Clear, descriptive titles
  • Labeled axes with units
  • Appropriate precision (not too many decimals)
Comparison
  • Start y-axis at zero for bar charts
  • Use consistent scales for comparison
  • Sort data logically
Color
  • Use color purposefully
  • Consider colorblind users
  • Don't use too many colors (≤7)
Interaction
  • Tooltips for details
  • Zoom for dense data
  • Drill-down for hierarchies

Tips for Better Charts

  1. Know your audience - technical vs. executive
  2. Start with the question - what are you trying to answer?
  3. Choose the right chart - don't force data into wrong formats
  4. Simplify - less is more
  5. Label clearly - assume viewers have no context
  6. Test with real users - is the message clear?
  7. Consider accessibility - colors, contrast, alt text

Limitations

  • Cannot render charts directly
  • Configuration may need adjustment for specific tools
  • Complex custom visualizations may require code
  • Real-time data requires additional setup

Built by the Claude Office Skills community. Contributions welcome!

© claude-office-skills, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in chart-designer of claude-office-skills/skills.

Open the folder on GitHubat commit 9c4c7d5

Compare with similar skills

Chart Designer next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Chart Designer compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Chart Designer this skillclaude-office-skills/skills505—~2.2kAutomated safety check: PassMIT
Tufte Data Vizcaylent/tufte-data-viz223—~3.5kAutomated safety check: PassMIT
Openai Dotcom Vizyzlnew/infra-skills149—~1.3kAutomated safety check: PassNone
Datavisforyourhealth111-pixel/Vibe-Skills3.6k—~1.1kAutomated safety check: PassApache-2.0
Microsim Generatorynulihao/AgentSkillOS618—~2.1kAutomated safety check: PassNone
Microsim Generatordmccreary/ibook-skills105—~11kAutomated safety check: PassNone

Similar skills

  • Tufte Data Viz

    caylent/tufte-data-viz

    A skill your agent uses when creating, reviewing, or styling charts, graphs, dashboards, sparklines, or any data visualization.

    223 GitHub stars~3.5k tokensUpdated 7 mo ago
    Data & AnalyticsAuto-check passed

  • Openai Dotcom Viz

    yzlnew/infra-skills

    Build figures in OpenAI's blog / research / system-card "dotcom" visual style — both (a) bar charts (monochrome bars with a darker same-hue stroke, rounded corners, a black y-axis with outward ticks…

    149 GitHub stars~1.3k tokensUpdated 3 mo ago
    Data & AnalyticsAuto-check passed

  • Datavis

    foryourhealth111-pixel/Vibe-Skills

    Comprehensive data visualization toolkit for creating beautiful, mathematically elegant visualizations with D3.js, Chart.js, and custom SVG.

    3.6k GitHub stars~1.1k tokensUpdated 1 mo ago
    Data & AnalyticsAuto-check passed

  • Microsim Generator

    ynulihao/AgentSkillOS

    Creates interactive educational MicroSims using the best-matched JavaScript library (p5.js, Chart.js, Plotly, Mermaid, vis-network, vis-timeline, Leaflet, Venn.js).

    618 GitHub stars~2.1k tokensUpdated 7 mo ago
    Data & AnalyticsAuto-check passed

  • Microsim Generator

    dmccreary/ibook-skills

    Creates interactive educational MicroSims, routing to the best-matched generator - p5.js, Chart.js, Plotly, Mermaid, vis-network, timelines, maps, Venn, causal-loop/feedback-loop diagrams (CLD)…

    105 GitHub stars~11k tokensUpdated yesterday
    Data & AnalyticsAuto-check passed

  • Chart Selector

    revfactory/harness-100

    Methodology for selecting optimal chart types based on data type and analysis purpose.

    1.3k GitHub stars~1.1k tokensUpdated 6 mo ago
    Data & AnalyticsAuto-check passed

More from claude-office-skills/skills

All 12 skills in this repo

  • Airtable Automation

    claude-office-skills/skills

    Airtable database automation - views, automations, integrations, and workflow triggers

    505 GitHub stars~2.7k tokensUpdated 8 mo ago
    Auto-check passed

  • Academic Search

    claude-office-skills/skills

    Search and analyze academic literature. An agent skill from claude-office-skills/skills.

    505 GitHub stars~2.2k tokensUpdated 8 mo ago
    Auto-check passed

  • Ads Copywriter

    claude-office-skills/skills

    Multi-platform ad copy generation for Google Ads, Meta/Facebook, TikTok, LinkedIn with A/B testing variants

    505 GitHub stars~2.1k tokensUpdated 8 mo ago
    Auto-check passed

  • AI Agent Builder

    claude-office-skills/skills

    Build AI agents with tools, memory, and multi-step reasoning - ChatGPT, Claude, Gemini integration patterns

    505 GitHub stars~3.1k tokensUpdated 8 mo ago
    Auto-check passed

  • AI Slides

    claude-office-skills/skills

    Generate complete presentations with AI - from outline to polished slides

    505 GitHub stars~1.4k tokensUpdated 8 mo ago
    Auto-check passed

  • Batch Convert

    claude-office-skills/skills

    Batch convert documents between multiple formats using a unified pipeline

    505 GitHub stars~3.8k tokensUpdated 8 mo ago
    Auto-check passed

Works with

Categories

Questions about Chart Designer

What does Chart Designer do?

Design effective data visualizations and charts. An agent skill from claude-office-skills/skills. Chart Designer is an agent skill from claude-office-skills/skills. Design effective data visualizations and charts.

When should I use Chart Designer?

Chart Designer fits situations like: tasks that involve Data visualization.

How do I install Chart Designer in Claude Code?

Run `npx skills add claude-office-skills/skills --skill chart-designer -a claude-code`. Or copy the skill folder (chart-designer in claude-office-skills/skills) into .claude/skills/chart-designer in your project. Claude Code loads it when a task matches its description.

How do I install Chart Designer in Codex?

Run `npx skills add claude-office-skills/skills --skill chart-designer -a codex`. Or copy the skill folder (chart-designer in claude-office-skills/skills) into .agents/skills/chart-designer in your project. Codex loads it when a task matches its description.

Can I use Chart Designer in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add claude-office-skills/skills --skill chart-designer -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/chart-designer, .gemini/skills/chart-designer, .github/skills/chart-designer and .opencode/skills/chart-designer in your project.

What does Chart Designer need to run?

SKILL.md names no scripts, command-line tools or credentials: Chart Designer is instructions for the agent only.

Does Chart Designer access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Chart Designer safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Chart Designer use?

Chart Designer is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Chart Designer use?

About 2.2k tokens (SKILL.md is roughly 8.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Chart Designer?

Skills that share tags, products or a category with Chart Designer: Tufte Data Viz (caylent/tufte-data-viz, 223 stars), Openai Dotcom Viz (yzlnew/infra-skills, 149 stars), Datavis (foryourhealth111-pixel/Vibe-Skills, 3.6k stars) and Microsim Generator (ynulihao/AgentSkillOS, 618 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Chart Designer?

claude-office-skills (a GitHub organization) maintains it in claude-office-skills/skills, which has 505 GitHub stars. The repository holds 12 skills in this directory. The repository was last updated on January 31, 2026.

Source: claude-office-skills/skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.