skills.rest
mkusaka
mkusakaCOMMUNITY
Explore all skills by this author →
GitHub

data-visualization-description

Generate consistent chart and dashboard styles using color formulas and mark specifications.

7|Updated Mar 8, 2026
Search Tags:#data visualization#design system#palette#chart design#consistent style
One-click install
npx skills add https://github.com/mkusaka/ccskills --skill data-visualization-description
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: data-visualization-description
Source: https://github.com/mkusaka/ccskills/tree/main/skills/data-visualization-description
Command: npx skills add https://github.com/mkusaka/ccskills --skill data-visualization-description

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill ensures visualizations across various mediums are elegant, accessible, and consistent.

Core Features & Use Cases

  • Unified Visualization Standards: Produces visualizations that look like one system, using a placeholder palette.
  • Design-Agnostic Method: Offers a heuristic for form, color formula, mark specs, and interaction rules.
  • Palette Documentation: Provides a validated default palette in references/palette.md.
  • Trigger Words: Triggers on terms like 'chart', 'graph', 'data viz', 'dashboard', etc.

Quick Start

Use the 'data-visualization-description' skill to ensure your next chart is elegant and consistent.

Frequently Asked Questions about data-visualization-description

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I maintain a consistent visual style across different chart and graph outputs?▼

To maintain consistent chart and graph visual styles, you apply a unified color formula and mark specifications. This ensures visualizations across HTML, SVG, and image formats look like one cohesive design system.

What is the best way to standardize dashboard color palettes for accessibility?▼

Standardizing dashboard color palettes involves applying a validated default palette with predefined color formulas. This heuristic method provides accessible, elegant, and consistent visualizations across various data viz outputs.

Can I use these design system specifications for both SVG and HTML dashboards?▼

Yes, you can use these design system specifications for both SVG and HTML dashboards. The method is design-agnostic, applying consistent color formulas and mark specs across multiple output mediums.

How do I trigger the data visualization style generation?▼

To trigger the data visualization style generation, use terms like chart, graph, data viz, or dashboard in your prompt. The system then applies the heuristic for form, color formula, and interaction rules.

Why do my different chart formats look disconnected from the main design system?▼

Your chart formats look disconnected because they lack a unified color formula and mark specifications. Applying a design-agnostic heuristic ensures consistency in color and style across various visualization types.

Related Skills

Explore More Design & Creative Skills→
davpatel605-beepdavpatel605-beep

concept-diagrams

Generate standalone HTML SVG diagrams with flat minimal styling.

Community
Advanced
Weiwei-MaoWeiwei-Mao
2

plotly

Create interactive, web-embeddable charts with over 40 chart types.

Community
Intermediate
AITOBIAS04AITOBIAS04
3

frontend-design

Design and code distinctive frontend interfaces with bold, cohesive aesthetics.

Community
Advanced
loganylchenloganylchen

spreadsheet

Create, edit, analyze, and visualize .xlsx, .csv, and .tsv spreadsheets with Python.

Community
Intermediate