skill(data-viz): lazy init, data-code separation, color contrast, icon semantics, field validation, pre-delivery checklist

[anandgupta42]

Summary

Six general improvements to the data-viz skill identified from a session review. None are task-specific — all apply to any dashboard build.

Changes

component-guide.md — 2 new sections

Multi-Tab Dashboard — Lazy Chart Initialization
Chart.js, Recharts, and Nivo all read container dimensions at mount time. Charts initialized inside a display:none tab container measure 0×0 and render blank. Documents the lazy-init pattern (make visible first, then init) and library-specific notes for each.

Programmatic Dashboard Generation — Data-Code Separation
Embedding JSON data in a Python f-string that also contains JavaScript causes curly-brace collisions and silent JS parse failures. Documents the correct pattern: write data to a separate data.js file, keep app.js static.

SKILL.md — 4 additions

Design Principles — Dynamic color safety
External/brand colors applied directly as text color on dark backgrounds can be invisible. Rule: use external colors only for non-text elements (borders, dots); always use var(--text) for labels.

Design Principles — Icon semantics
Verify icons match their label's actual meaning. Common traps: 📈 for metrics where lower is better; 🏆 for plain counts.

Anti-Patterns — Unvalidated field filter
Filtering or mapping over a field not confirmed to exist in the data export produces empty arrays or NaN silently. Added to anti-patterns list.

Pre-Delivery Checklist (new section)
7-item checklist: tabs render, fields validated, text contrast, icon semantics, tooltips, empty-state handling, mobile overflow.

Token impact

	Before	After	Δ
SKILL.md	~1,660 tokens	~2,092 tokens	+432
component-guide.md	~4,364 tokens	~5,082 tokens	+718
Total	~6,024	~7,174	+1,150 (+19%)

Summary by CodeRabbit

• Documentation
  • Enhanced data visualization design guidance with new rules for color safety and icon semantics.
  • Added pre-delivery checklist covering rendering, validation, contrast, and mobile layout requirements.
  • Added guidance for lazy chart initialization in multi-tab dashboards.
  • Added documentation on data-code separation for programmatic dashboard generation.

[claude]

Claude Code Review

This repository is configured for manual code reviews. Comment @claude review to trigger a review.

_{Tip: disable this comment in your organization's Code Review settings.}

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: a8d596a3-65fa-4d52-85ce-796320dc7f9b

📥 Commits

Reviewing files that changed from the base of the PR and between 544903f and 453e332.

📒 Files selected for processing (2)

• .opencode/skills/data-viz/SKILL.md
• .opencode/skills/data-viz/references/component-guide.md

---

📝 Walkthrough

Walkthrough

Documentation updates to the data visualization skill module adding design guidance on color safety and icon semantics, validation best practices, pre-delivery checklist requirements, and implementation patterns for lazy chart initialization and programmatic dashboard generation.

Changes

Cohort / File(s)	Summary
Data Visualization Documentation .opencode/skills/data-viz/SKILL.md, .opencode/skills/data-viz/references/component-guide.md	Added design rules for dynamic color safety and icon semantics; documented validation anti-patterns; introduced pre-delivery checklist spanning rendering, field validation, contrast checks, and mobile layout; added guidance on lazy chart initialization and data-code separation patterns with examples.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested labels

contributor

Poem

🐰 With colors checked twice for safety and care,
And icons whose meanings are perfectly clear,
Dashboards initialized when tabs come alive,
Data kept separate—so schemas survive,
Our data-viz guidance helps all to thrive! 🎨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The description follows the template structure with Summary and Changes sections that thoroughly document all modifications. However, the Test Plan and Checklist sections are missing, which are required template elements.	Add the 'Test Plan' section describing how these documentation changes were validated, and complete the 'Checklist' section with checkmarks indicating which items apply (e.g., Documentation updated).

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes all six main improvements introduced in the PR: lazy initialization, data-code separation, color contrast, icon semantics, field validation, and pre-delivery checklist. It is specific and directly reflects the changeset.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch skill/data-viz-improvements

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}