How does the critique loop work?

It follows a 'Diverge and Converge' process where Round 1 generates multiple distinct visualization strategies, and subsequent rounds refine the chosen direction based on user feedback.

What chart types does this skill recommend?

The skill selects charts based on data relationships, including Comparison (Bar/Dot plots), Trends (Line/Area), Part-to-Whole (Treemaps), and Correlation (Scatter/Heatmaps).

Does it produce production-ready CSS?

It generates functional HTML wireframe artifacts that serve as high-fidelity blueprints, following your project's locked design principles and color systems.

Does it account for accessibility in data design?

Yes, it enforces WCAG AA contrast standards for labels, evaluates color-blind friendly encoding, and provides interaction patterns for touch devices and reduced motion.

Can it help with data table design?

Absolutely. It includes specific guidance for table anatomy, including sticky headers, number alignment, zebra striping, and inline visualizations like sparklines.

Data Visualization Critique

Name: Data Visualization Critique
Author: metedata

bymetedata

0•

Design Tools

Evaluates and generates structured data visualization designs, dashboard layouts, and chart encoding patterns through iterative HTML wireframes.

The crit-data-visualization skill empowers Claude to act as a specialist data designer, focusing on how quantitative information is communicated to users. It utilizes a rigorous framework to select the most effective chart types—such as dot plots for comparisons or Sankeys for flows—while enforcing best practices like high data-ink ratios and perceptual accuracy in encoding channels. By generating side-by-side HTML wireframe options within a formal critique loop, this skill helps developers and designers move from raw data requirements to polished, accessible, and high-clarity dashboard compositions.

Key Features

01Framework-driven chart selection based on specific data relationships and communication goals.

02Perceptual encoding validation ensuring color, position, and size are used accurately.

03Iterative HTML wireframe generation for side-by-side comparison and rapid prototyping.

04Structured dashboard patterns including KPI+Detail, Narrative, and Magazine layouts.

05Data-ink ratio optimization to remove decorative clutter and maximize information density.

060 GitHub stars

Use Cases

01Auditing existing data displays to identify and fix anti-patterns like truncated Y-axes or ineffective pie charts.

02Designing complex analytics dashboards that require clear hierarchy and intuitive navigation.

03Prototyping interactive data exploration tools with built-in drill-down and filtering logic.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add metedata/design-crit crit-data-visualization

For use in Claude.ai and ChatGPT

Key Features

01Framework-driven chart selection based on specific data relationships and communication goals.

02Perceptual encoding validation ensuring color, position, and size are used accurately.

03Iterative HTML wireframe generation for side-by-side comparison and rapid prototyping.

04Structured dashboard patterns including KPI+Detail, Narrative, and Magazine layouts.

05Data-ink ratio optimization to remove decorative clutter and maximize information density.

060 GitHub stars

Use Cases

01Auditing existing data displays to identify and fix anti-patterns like truncated Y-axes or ineffective pie charts.

02Designing complex analytics dashboards that require clear hierarchy and intuitive navigation.

03Prototyping interactive data exploration tools with built-in drill-down and filtering logic.