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

data-visualization

Generate colorblind-safe charts and dashboards with accessible design.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill addresses the challenges of producing consistent, accessible, and brand-neutral data visualizations that can be easily integrated into any design system.

Core Features & Use Cases

  • Consistent Design System-Agnostic Method: Offers a universal approach to chart and dashboard design that adapts to any design system.
  • Color Blind-Safe Palettes: Ensures all color palettes are accessible to colorblind users and are validated for contrast and brightness.
  • Accessible Charts: Generates charts that are easily readable by everyone, including those with visual impairments.

Quick Start

Use the data-visualization skill to create a bar chart for sales data.

Frequently Asked Questions about data-visualization

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

FAQPage Schema
How do I create accessible charts that are colorblind-safe?▼

You create accessible charts by applying a colorblind-safe palette validated for contrast and brightness, ensuring the data visualization is readable by users with visual impairments.

What's the best way to design brand-neutral dashboards for different design systems?▼

The best way to design brand-neutral dashboards is using a design system-agnostic method that adapts universally to any existing design system for seamless integration without brand-specific styling.

Can I integrate data visualizations into an existing design system?▼

Yes, data visualizations integrate with different design systems by applying a standardized, design system-agnostic approach that adapts universally to any existing framework for seamless integration.

How do I generate a bar chart for sales data using a standardized approach?▼

You generate a bar chart for sales data by applying a standardized visualization method that automatically formats the chart with accessible, colorblind-safe palettes validated for contrast.

Does this method support various data representation scenarios?▼

Yes, the standardized method is applicable across various data representation scenarios, supporting the creation of charts and dashboards that maintain accessibility and brand neutrality.

Why do my current charts fail accessibility checks for contrast and brightness?▼

Charts fail accessibility checks when color palettes lack validation for contrast and brightness; using a colorblind-safe, standardized approach ensures palettes meet accessibility standards.

Related Skills

Explore More Design & Creative Skills→
raphaelVRAraphaelVRA

data-visualization

Generate accessible HTML/CSS/JS visualizations from raw data with colorblind-safe palettes.

Community
Advanced
nesihaver-ILnesihaver-IL

analytics-metrics

Build interactive analytics dashboards and charts in React with Recharts.

Community
Intermediate
AnvinX1AnvinX1

frontend-design

Systematize frontend design decisions for consistent, accessible web interfaces.

Community
Advanced
chrisvoncsefalvaychrisvoncsefalvay
218

d3-viz

Create custom interactive SVG data visualizations with D3.js across JavaScript frameworks.

Community
Intermediate