data-visual-chart-designer

Select quantitative chart forms and validate them against a written chart contract before delivery.

Updated Jan 28, 2026
One-click install
npx skills add https://github.com/scanady/nexus-skills --skill data-visual-chart-designer-scanady
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: data-visual-chart-designer
Source: https://github.com/scanady/nexus-skills/tree/main/skills/data-visual-chart-designer
Command: npx skills add https://github.com/scanady/nexus-skills --skill data-visual-chart-designer-scanady

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Charts often fail because they are chosen by habit, built on insufficient data, or shipped without inspection in the final container. This Skill enforces a contract-first workflow so every chart answers a stated question, uses an honest scale, and survives QA at laptop and narrow widths. ## Core Features & Use Cases - Chart Selection Framework: Nine canonical chart families (trend, comparison, composition, distribution, relationship, and more) with a question-to-form mapping table and data sufficiency floors for trends, scatters, and category comparisons. - Chart Contract & Palette Policy: A nine-field contract covering question, takeaway, fields, renderer, and one of three capped color policies, plus encoding rules that ban redundant legends and color-only distinction. - Delivery Surface Routing: Reference guides route output across native chart widgets, HTML fragments, static images, and self-contained HTML reports with static-first fallbacks and progressive runtime upgrades. - Use Case: When asked to turn a quarterly metrics table into a dashboard visual, the Skill writes the contract, checks data sufficiency, picks a ranked bar or dot chart instead of a default line, and QA-checks the rendered result before handoff. ## Quick Start Ask the agent to visualize your dataset, for example: pick the right chart for this weekly signups table and build it for my HTML report.

Frequently Asked Questions about data-visual-chart-designer

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

FAQPage Schema
How do I choose the right chart type for my data?▼

Start from the question the reader asks, not a favorite chart type. The Skill maps questions to nine chart families: line for movement over time, bar for category comparison, scatter for relationships, histogram for spread, waterfall for drivers, and similar mappings with usage rules.

How much data do I need for a line chart or scatter plot?▼

Trend charts need at least 8 temporal points and scatter plots need at least 8 meaningful observations. Below those floors, make one targeted retry at finer grain or longer range, then switch to KPI cards, dot charts, or tables instead of shipping an underpowered chart.

When should bars not start at zero?▼

Bars comparing absolute magnitude must always start at zero. Focused non-zero domains are allowed only for waterfall, bridge, variance, and small-multiple movement charts, and then require exact start, end, and change labels plus a visible scale cue.

Can I use this for HTML reports and dashboards?▼

Yes. The html-chart-builds reference defines a static-first contract: authored fallback SVG or tables that render with scripts disabled, plus a progressive upgrade layer using a bundled runtime. No CDN, remote scripts, or network installs are permitted.

Why does my chart have a redundant legend?▼

A redundant legend appears when color encodes the same field already labeling the axis, inventing a duplicate grouping dimension. Use direct labels and styling for per-category distinction, and omit color entirely on single-series charts.

When should I not use this chart design workflow?▼

Do not use it for image art direction, logo or illustration design, choosing which KPIs to track, writing analysis narratives, or building data pipelines. It covers quantitative chart selection, construction, and QA only.