Data Visualisation Uplift

Data visualisation uplift

LLMs and default charting libraries produce visualisations with predictable failure modes: grey gridlines on white backgrounds, rainbow colour palettes with no semantic meaning, oversized legends that compete with the data, and placeholder axis labels that communicate nothing. This skill replaces those defaults with spectral data semantics, OLED-optimised dark themes, and annotation-first design that foregrounds the data itself.

The skill is rigid. Every chart produced under its governance must pass the eval criteria at the end of this file. There are no soft recommendations here — each rule exists because its violation is detectable and its correction is measurable.

When to apply

Positive triggers

Activate this skill when the task involves producing or revising data visualisations:

• "chart", "graph", "plot", "visualisation", "visualize", "data display"
• "dashboard data", "metrics", "KPI", "analytics view"
• "Recharts", "Chart.js", "D3", "charting library"
• Any task where the primary output is a chart component, dashboard panel, or data-driven visual
• Metric cards, sparklines, or single-value KPI displays

Negative triggers

Do not activate for tasks where the output is non-visual data processing:

• Data pipeline or ETL logic (no visual output)
• Database queries or migrations
• API endpoint creation that returns raw JSON
• Statistical computation without a rendering target
• Test file authoring for chart components (use tdd instead)

Banned defaults

Eight anti-patterns that charting libraries produce by default. Each is banned unconditionally.

Reference: See references/anti-patterns.md for full before/after Recharts JSX examples of each pattern.

Replacement standards

These rules govern all chart output when this skill is active.

Spectral palette semantics

Colours are not decorative — they encode meaning. Every colour in a chart must map to a data semantic, and that mapping must be consistent across all charts in the same view.

The spectral palette defines six semantic slots:

• Primary #00F5FF (Cyan) — the main data series, active states, current values
• Positive #00FF88 (Emerald) — growth, success, above-target, increases
• Warning #FFB800 (Amber) — caution, approaching threshold, needs attention
• Negative #FF4444 (Red) — decline, failure, below-target, decreases
• Neutral rgba(255,255,255,0.4) — reference lines, baselines, secondary context
• Accent #FF00FF (Magenta) — escalation, anomaly, requires human intervention

When a chart has only one series, use Primary. When comparing two series (e.g., current vs. previous period), use Primary and Neutral. Add Positive/Negative only when the data has directional semantics (profit/loss, growth/decline). Accent is reserved for outliers and anomalies.

For generic (non-Scientific Luxury) projects, see references/standards-generic.md for a publication-quality palette that passes WCAG AA on both dark and light backgrounds.

Chart surface

Background colour is #050505 — OLED Black. The chart area has no border. The surrounding container may use bg-[#0a0a0a] with border border-white/5 and rounded-sm to create subtle differentiation from the page surface.

Horizontal gridlines only, rendered at stroke="rgba(255,255,255,0.05)". No vertical gridlines. The gridlines exist to aid value estimation, not to cage the data. At 5% white opacity on a near-black background, they are perceptible only when the reader looks for them.

Axis styling

Axis labels use JetBrains Mono at 11px with fill="rgba(255,255,255,0.6)". This provides clear readability without competing with data elements. Axis lines themselves render at stroke="rgba(255,255,255,0.1)" — slightly more visible than gridlines but still subordinate to data.

Every axis must have a descriptive label with units. Time-series X-axes format dates according to the data density: "Mar 26" for daily, "Mar 2026" for monthly, "2026" for yearly. Numeric Y-axes include the unit in the axis label, not repeated on every tick.

Tooltip design

Tooltips use a dark surface that matches the chart aesthetic:

• Background: #0a0a0a
• Border: 1px solid rgba(255,255,255,0.1)
• Border radius: rounded-sm (4px)
• Font: JetBrains Mono for values, system sans-serif for labels
• Value colour: matches the series colour from the spectral palette
• Padding: 8px 12px

The tooltip shows the data point's label, value with units, and — when relevant — the delta from the previous period. No decorative elements, no shadows, no arrows.

Legend design

Legends are a last resort. The preferred approach is annotation-first: labels placed directly on or adjacent to chart elements (line endpoints, bar segments, area fills). When a legend is unavoidable (more than 2 series with overlapping paths), it must be:

• Bottom-aligned, below the chart
• No box border or background
• Text at text-white/40
• Colour indicators as small circles (8px), not rectangles
• Horizontal layout, with items separated by 24px

Animation

Chart entry animations use Framer Motion, not CSS transitions. The data should materialise with purpose:

• Line charts: path draw animation, 600ms, ease-out
• Bar charts: height grow from baseline, 300ms per bar with 50ms stagger, ease-out
• Area charts: opacity fade from 0 to target opacity, 400ms, ease-out
• Metric cards: number count-up animation, 500ms, ease-out

No bounce, no overshoot, no elastic easing on data visualisations. Data animations should feel precise, not playful.

Responsive behaviour

Charts must be responsive. The container uses ResponsiveContainer (Recharts) with width="100%" and a minimum height of 300px. On viewports below 640px, axis labels may reduce to abbreviated forms ("Mar" instead of "March", "K" suffix instead of full thousands) but must never overlap or truncate.

Styling references

For Scientific Luxury projects, apply references/standards.md — full spectral palette, OLED background, JetBrains Mono axes, Framer Motion animations.

For all other projects, apply references/standards-generic.md — publication-quality palette, system fonts, minimal gridlines, WCAG AA compliance on both dark and light backgrounds.

Chart archetypes

Four chart types with prescribed configurations. Each archetype exists because it matches a specific data communication purpose.

Line chart (time series)

Purpose: Show change over time. The X-axis is temporal; the Y-axis is the measured value.

Use line charts when the data has a natural temporal ordering and the reader needs to perceive trends, inflection points, and rates of change. A line implies continuity between data points — do not use line charts for categorical data where no interpolation is meaningful.

Configuration: stroke width 2px, no data point dots by default (add dots only when the dataset has fewer than 12 points), smooth curve type monotoneX for natural interpolation that respects data order.

Template: assets/templates/scientific-luxury/line-chart.tsx.md or assets/templates/generic/line-chart.tsx.md

Bar chart (comparison)

Purpose: Compare discrete values across categories. Each bar is an independent measurement.

Use horizontal bars by default. Vertical bars are acceptable only when the number of categories is 6 or fewer and the labels are short (under 10 characters). Horizontal orientation ensures labels read naturally and accommodates longer category names.

Configuration: bar radius [4, 4, 0, 0] for top corners only, gap between bars at 20% of bar width, fill colour from the spectral palette based on data semantics.

Template: assets/templates/scientific-luxury/bar-chart.tsx.md or assets/templates/generic/bar-chart.tsx.md

Area chart (volume and accumulation)

Purpose: Show magnitude over time. The filled area emphasises volume rather than position, making it suited for revenue, traffic, or resource consumption data.

Area charts combine the trend visibility of line charts with a visual weight that communicates scale. Use them when the absolute magnitude matters as much as the trend direction. For comparing multiple series, use stacked areas only when the series sum to a meaningful total.

Configuration: fill opacity 0.15 (the fill hints at volume without obscuring gridlines), stroke on top edge at full opacity, gradient fill from series colour at top to transparent at bottom.

Template: assets/templates/scientific-luxury/area-chart.tsx.md or assets/templates/generic/area-chart.tsx.md

Metric card (single KPI)

Purpose: Display a single key performance indicator with context. The primary value dominates; supporting context (trend, comparison, label) is subordinate.

Metric cards are not charts in the traditional sense, but they are the most common data visualisation element in dashboards. A well-designed metric card communicates the value, its unit, its trend direction, and its status in a single glance.

Configuration: primary value in JetBrains Mono at 32px, label in system sans at 12px text-white/40, trend indicator using spectral colours (Emerald for up, Red for down, Neutral for flat), optional sparkline beneath the value.

Template: assets/templates/scientific-luxury/metric-card.tsx.md or assets/templates/generic/metric-card.tsx.md

en-AU enforcement

All chart labels, tooltips, annotations, and surrounding text produced under this skill must use Australian English spelling and conventions.

Spelling: colour, behaviour, optimisation, organised, licence (noun), analyse, centre, defence, honour, programme (but "program" for software).

Dates on axes use DD/MM/YYYY format or abbreviated forms (26 Mar, Mar 2026). Currency values use AUD ($) with the dollar sign prefix. Times reference AEST or AEDT. Sentence case for all chart titles and axis labels.

Eval criteria

Every chart produced under this skill must pass all eight checks. A single failure means the chart requires revision.

Run this checklist mentally before declaring any chart task complete. If any criterion fails, fix it before delivering.