crit-data-visualization

Evaluates data visualization choices and generates 2-4 HTML wireframe options.

3|Updated Feb 23, 2026
One-click install
npx skills add https://github.com/metedata/design-crit --skill crit-data-visualization
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: crit-data-visualization
Source: https://github.com/metedata/design-crit/tree/main/skills/crit-data-visualization
Command: npx skills add https://github.com/metedata/design-crit --skill crit-data-visualization

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The Data Visualization Crit helps product teams avoid misleading or unclear charts by evaluating chart selection, data encoding, dashboard composition, and annotation so quantitative information is communicated accurately and accessibly.

Core Features & Use Cases

  • Chart selection framework that maps data relationships (comparison, trend, distribution, correlation, etc.) to appropriate chart types and flags anti-patterns.
  • Encoding and annotation guidance that prioritizes perceptual accuracy (position, length) and enforces labeling, reference lines, and accessibility constraints.
  • Dashboard composition and interaction patterns including hero/supporting hierarchy, cross-filtering affordances, and static fallbacks for non-interactive contexts.
  • Iterative critique workflow that reads .design-crit/state.json and prior locked facets, generates 2–4 HTML wireframe options with realistic mock data, accepts feedback rounds, and produces a locked option with implementation tokens.

Quick Start

Generate three distinct dashboard visualization options for the brief in .design-crit/brief.md and produce a compare view with chart inventory and recommendations.

Frequently Asked Questions about crit-data-visualization

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

FAQPage Schema
How do I choose the right chart types for a data dashboard?

To choose the right chart types for a data dashboard, you need a framework that maps data relationships like comparison, trend, and distribution to appropriate visualizations while flagging anti-patterns. This ensures quantitative information is communicated accurately and accessibly.

What is the best way to evaluate data visualization encoding for accessibility?

Evaluating data visualization encoding for accessibility involves prioritizing perceptual accuracy through position and length, enforcing clear labeling, adding reference lines, and applying strict accessibility constraints to ensure charts are readable by all users.

How do I generate dashboard wireframes with mock data for product design?

You can generate dashboard wireframes with mock data by using an iterative critique workflow that produces two to four HTML options applying locked layout and color tokens, encoding rules, and realistic data to refine analytics interfaces.

Can I use an iterative critique workflow to improve dashboard composition?

Yes, you can use an iterative critique workflow to improve dashboard composition by reading prior locked facets, generating wireframe options with hero and supporting hierarchies, accepting feedback rounds, and producing a locked option with implementation tokens.

Does data visualization critique support cross-filtering and static fallbacks?

Data visualization critique supports dashboard interaction patterns including cross-filtering affordances and static fallbacks for non-interactive contexts, ensuring analytics and reporting interfaces remain functional across different viewing environments.