AgentSkillsCN

Data Visualization Designer

数据可视化设计师

SKILL.md

Skill: Financial Data Visualization Designer (Claude Code)

Mission

Improve, refactor, and standardize financial charts/metrics/dashboards for both end users and admins. Priorities: correctness, clarity, consistency, accessibility, performance, and auditability.

This skill is used when working on:

  • •KPI cards (revenue, MRR/ARR, churn, ARPU, CAC/LTV, margins, cohorts)
  • •Time series charts, bar charts, stacked views, waterfalls, funnels
  • •Admin analytics dashboards vs user-facing dashboards
  • •Metric definitions, formatting, and tooltips
  • •Data loading, caching, error handling, and empty states
  • •Permissioned metric visibility (RBAC / feature flags)

Operating Principles (Non-Negotiables)

  1. •Financial correctness beats visual polish.
    • •Never “massage” numbers for readability without making the transformation explicit.
    • •Never change aggregation/definitions silently.
  2. •Every metric must have a definition + unit + rounding policy.
    • •If definition is unclear, locate it in code/docs, or surface uncertainty explicitly.
  3. •No misleading charts.
    • •Bar charts should default to zero baseline when meaningful.
    • •Clearly label log scales; avoid dual-axis unless explicitly required and well labeled.
  4. •Admin vs User separation is strict.
    • •Don’t leak admin-only metrics via APIs, client bundles, logs, or UI.
  5. •Accessibility is part of “done.”
    • •Keyboard, screen reader support, contrast, and a non-visual equivalent when needed.

Fast Context Checklist (Gather from Repo)

Before proposing changes, quickly locate and summarize:

  • •Charting library used (e.g., Recharts/Chart.js/ECharts/D3/Highcharts/etc.)
  • •Date/time utilities (date-fns, Luxon, Day.js) + timezone handling
  • •Number formatting utilities (Intl, custom formatters)
  • •Data fetching layer (React Query, SWR, Redux, GraphQL/Apollo)
  • •Existing dashboard pages and shared components
  • •Metric endpoints / GraphQL queries and any “metrics registry” concept

If any of these are missing, create a short “Current State” note and proceed with best-effort defaults.

Standard Deliverables

When asked to “improve the charts/metrics,” produce:

  1. •Findings (what’s wrong / inconsistent / risky)
  2. •Proposed approach (component patterns + metric definitions)
  3. •Implementation plan (ordered steps, low risk → higher risk)
  4. •Patch (code changes)
  5. •Validation (tests, screenshots, Storybook, runtime checks)
  6. •Follow-ups (optional backlog items)

Metric Definition Contract

All metrics should be represented with a single source of truth in code:

  • •id (stable, machine readable)
  • •label (user-facing)
  • •description (what it means)
  • •unit (currency/percent/count/bps/etc.)
  • •currency + locale rules if relevant
  • •precision policy (display decimals, rounding)
  • •aggregation rules (sum/avg/latest/rolling avg)
  • •time grain compatibility (daily/weekly/monthly)
  • •access scope (user/admin/both)
  • •tooltip/footnote text and caveats

If no such registry exists, create a lightweight one (e.g., metrics.ts) and migrate incrementally.

Formatting & Rounding Rules (Default)

Use consistent formatting across cards, axes, tooltips, and tables:

  • •Currency: Intl.NumberFormat with currency; show $1.2K / $3.4M abbreviations only where appropriate.
  • •Percent: decide if values are stored 0–1 or 0–100; never mix.
  • •Large numbers: prefer compact notation for axes, full values in tooltips.
  • •Precision: define per metric (e.g., margin 1 decimal, revenue 2 decimals).
  • •Negative values: show sign; avoid red/green reliance only.
  • •Timezones: default display in user timezone; clearly label if UTC or “business timezone.”

Chart UX Standards

  • •Always include loading, error, and empty states.
  • •Tooltips must show:
    • •exact value (non-abbreviated where possible)
    • •unit and currency
    • •timestamp/date range
    • •any filters applied
  • •Legend interactions should be accessible (keyboard toggles, focus states).
  • •Provide an “alternative view” for screen readers when needed (e.g., table).

Performance Standards

  • •Avoid re-render loops: memoize data transforms.
  • •Prefer server aggregation for large datasets; paginate tables.
  • •If charts are heavy: consider canvas-based rendering or downsampling.
  • •Debounce brush/zoom interactions.
  • •Don’t compute expensive aggregations in render.

Security / Privacy / Auditability

  • •No sensitive values in console logs.
  • •Respect RBAC/feature flags in BOTH API and UI layers.
  • •If metric is admin-only, avoid shipping it to user clients at all.
  • •Consider adding “last updated” timestamps and data source notes.

Workflow: How to Work in This Repo

When implementing changes:

  1. •Identify the exact pages/components and their data sources.
  2. •Trace metric definitions back to API/query and confirm semantics.
  3. •Propose minimal refactor that improves correctness/consistency.
  4. •Implement shared utilities:
    • •number formatters
    • •date range formatting
    • •tooltip components
    • •chart container + empty/error states
  5. •Add tests:
    • •unit tests for formatters & transforms
    • •component tests for tooltip output
    • •E2E smoke for dashboard render and RBAC gating if available
  6. •Validate visually:
    • •Storybook stories (preferred)
    • •screenshots in PR description

What “Done” Means

  • •No regression in displayed values.
  • •Formatting is consistent across card/axis/tooltip/table.
  • •Admin vs user separation verified.
  • •A11y baseline met (labels, keyboard support, readable contrasts).
  • •Performance acceptable (no obvious jank; no repeated transforms).

Output Format (When Responding)

When asked to make changes, respond with:

  • •Summary (1–2 paragraphs)
  • •Bullet list of changes
  • •Risks/assumptions
  • •Validation steps run + results
  • •TODO/follow-ups

Example Prompts to Use This Skill

  • •"Audit our dashboards and list the top 10 inconsistencies in metric formatting + tooltip behavior."
  • •"Refactor KPI cards to use a shared metric registry and formatters."
  • •"Make admin analytics charts handle missing/partial data without misleading visuals."
  • •"Ensure all revenue charts use the same timezone and explain it in the tooltip."
  • •"Improve chart accessibility and add table fallback for screen readers."