数据与研究

data-viz

aladicf/better-web-ui

Design or improve data visualizations, charts, and data presentation interfaces. Use when the user asks to add charts, build dashboards, visualize data, choose chart types, make data accessible, or present metrics and analytics.

  • 584 次安装
  • 46 星标
  • 收录于

安装命令

npx skills add https://github.com/aladicf/better-web-ui --skill data-viz

SKILL.md

Create data visualizations that clarify rather than decorate. The goal is not to make data look impressive; it is to help users understand patterns, compare values, and make decisions.

Consult the data visualization reference for chart type selection, responsive patterns, accessible data tables, color-vision-friendly palettes, and interaction design. Consult the colorblindness UX reference when semantic states, chart palettes, or category colors must remain distinguishable under color-vision deficiencies. Consult the complex table UX reference when a data table is a better or complementary presentation to a chart.

MANDATORY PREPARATION

Users start this workflow with /data-viz. Once this skill is active, load $frontend-design — it contains design principles, anti-patterns, and the Context Gathering Protocol. Follow that protocol before proceeding — if no design context exists yet, you MUST load $setup first. Additionally gather: what question the user is trying to answer with the data, who the audience is, and whether the data updates in real time or is static.

Assess Visualization Needs

Understand the data story before choosing a chart: