Web Data Visualization Skill

web-data-visualization helps Codex design, prototype, and integrate data visualization for existing web pages, dashboards, reports, and single-page HTML tools.

It is intentionally domain-neutral. Use it for product analytics, operations dashboards, research interfaces, finance views, content tools, education platforms, or any web UI where raw data needs to become clear visual insight.

What It Does

• Classifies the data already present in a web page or app.
• Maps each data category to an appropriate visualization style.
• Preserves the existing product's visual language instead of replacing it with a new brand.
• Encourages a local MVP preview before broad visual changes are integrated.
• Adds interaction patterns such as hover/focus tooltips, drilldowns, filtering, sorting, comparison, and replay.
• Guides animation choices so motion explains data changes rather than acting as decoration.
• Provides verification steps for local preview, responsive layout, chart rendering, tooltip accuracy, and console errors.

Best Fit

Use this skill when you need to:

• Turn tables, cards, or plain metrics into better visual modules.
• Improve a dashboard without redesigning the whole product.
• Create a local data visualization MVP for user review.
• Decide which chart type fits each data category.
• Add hover feedback that shows exact values, definitions, or diagnostic context.
• Integrate charts into an existing frontend while preserving style and terminology.
• Package a visualization improvement for GitHub or a product repo.

Default Workflow

1. Clarify the visualization brief.
2. Propose a mapping from data categories to visual styles.
3. Build a local MVP preview first when the design direction is exploratory or subjective.
4. Use real data when available, or clearly labeled schema-faithful fixtures.
5. Verify the MVP in a browser on desktop and mobile widths.
6. Integrate approved modules into the target app using existing component/style patterns.
7. Run final checks before commit or publication.

Requirement Questions

For broad requests, Codex should ask or infer:

Question	Why It Matters
Which page or workflow is being improved?	Keeps the work scoped.
What data categories need visualization?	Determines chart/module choices.
What is the purpose: monitor, compare, diagnose, explore, present?	Determines visual hierarchy.
Should hover/focus feedback be included?	Affects interaction design and implementation.
Should the first output be a local MVP preview or direct integration?	Avoids premature production edits.
Are there existing visual constraints or chart libraries?	Preserves product consistency.

Data Category Mapping

The skill encourages Codex to propose a concise table before implementation:

Data category	Purpose	Proposed visual	Interaction
KPI summary	Monitor headline state	Metric cards + sparklines	Hover definitions and freshness
Ranking/table	Compare entities	Bar table + sort tabs	Hover exact values
Timeline/events	Inspect change	Line, timeline, or replay	Hover nearest point
Distribution	Inspect spread/outliers	Histogram or scatter	Hover point/bin details
Relationship	Inspect connections	Matrix, graph, or linked cards	Hover connected records

Hover And Feedback

Hover/focus feedback is recommended for nontrivial visual marks. Tooltip content should usually include:

• The exact value.
• Numerator and denominator for rates.
• Entity, date range, filter, or segment context.
• Metric definition when the label is not self-explanatory.
• What clicking the mark will do, if clickable.

For canvas or SVG charts, the implementation should include hit testing or accessible fallback text for key values.

Repository Structure

web-data-visualization/
├── SKILL.md
├── agents/
│   └── openai.yaml
├── references/
│   ├── integration-checklist.md
│   └── visualization-patterns.md
└── .gitignore

References

• SKILL.md: Core trigger rules, workflow, and implementation principles.
• references/visualization-patterns.md: Chart selection, animation grammar, tooltip contract, and data category mapping.
• references/integration-checklist.md: MVP preview and production integration checklist.
• agents/openai.yaml: UI metadata for skill discovery.

Example Prompts

Use $web-data-visualization to improve this dashboard. First classify the data categories, propose visual modules, and build a local MVP preview before integrating anything.

Use $web-data-visualization on this report page. Add hover feedback with exact values and propose suitable visuals for the KPI, ranking, and timeline sections.

Use $web-data-visualization to redesign the data presentation only. Keep the existing product style and show me a local prototype first.

Validation

Run the skill creator validator from this machine:

python "C:\Users\15694\.codex\skills\.system\skill-creator\scripts\quick_validate.py" "D:\Vibe Coding\my skills\网页数据可视化\web-data-visualization"

Expected result:

Skill is valid!