The Complete Production SOP: How to Deploy and Run Nivo Rich React Dataviz & SVG/Canvas Charts in Autonomous AI Agents
Step-by-step SOP to install and run Nivo Rich React Dataviz in Codex, Claude Code, & Cursor. Master responsive SVG/Canvas charts and prevent zero-height bugs.
Technical Overview & Architectural Context
Autonomous coding agents frequently stumble when generating modern React data visualizations with @nivo. Common pitfalls include omitting explicit container dimensions (causing Nivo's Responsive* wrappers to calculate dimensions of 0x0 and fail silently), misconfiguring SSR boundaries in Next.js App Router applications without the 'use client' directive, and attempting to render tens of thousands of DOM SVG nodes instead of falling back to Canvas variants like ResponsiveBarCanvas. The nivo-rich-dataviz-react skill establishes deterministic constraints that preempt these structural failures. By prescribing parent bounding constraints (fixed height or absolute flex wrappers), a standardized theme object schema (covering typography, grid lines, and interactive tooltips), and explicit performance threshold rules (switching to Canvas above 5,000 data nodes), agents consistently output production-grade, highly interactive charts without hallucinating deprecated props or triggering layout collapse.
Prerequisites & Environment Requirements
Verified Search Intents & Long-Tail Queries Solved
This operational tutorial is engineered to provide deterministic solutions for these developer search queries:
Step-by-Step Execution Playbook
Local Environment Setup & SKILL.md Mounting
Create the local skill manifest directory and inject verified procedural rules.
Autonomous runtimes read SKILL.md manifests from project or system-level configuration paths (.agents/skills/ or .claude/skills/). Mounting this file ensures the agent automatically parses trigger keywords and respects execution SOP rules when tasked with chart building.
mkdir -p .agents/skills/nivo-rich-dataviz-react && curl -fsSL https://askills.dev/api/skills/nivo-rich-dataviz-react/raw -o .agents/skills/nivo-rich-dataviz-react/SKILL.md---
name: "nivo-rich-dataviz-react"
description: "Build presentation-quality React data visualizations with Nivo animated components."
metadata:
author: "Raphaël Benitte"
version: "1.0.0"
runtime_compatibility:
- "codex"
- "claude-code"
- "cursor"
- "windsurf"
triggers:
- "create nivo bar chart"
- "customize nivo chart theme"
- "build nivo heatmap"
permissions:
fs_read: true
fs_write: "workspace"
shell_exec: false
net_access: false
---
# Nivo Rich React Dataviz & SVG/Canvas Charts
Creates rich charts with @nivo: ResponsiveBar, ResponsiveLine, ResponsivePie, ResponsiveHeatMap, interactive motion, theme customization, and server-side rendering support.
## Execution SOP & Rules
1. Ensure parent container has a fixed height (e.g., h-[400px] or style={{ height: 400 }}) when rendering Responsive* Nivo components.
2. Define a centralized theme object passing typography, axis styles, and tooltip styling.
3. Use Canvas variants (@nivo/bar ResponsiveBarCanvas) when rendering datasets exceeding 5,000 points.
4. Configure motionConfig="gentle" for elegant, spring-based bar and line animations.
Keep the SKILL.md file scoped within .agents/skills/ in your project root so Cursor, Windsurf, and Claude Code automatically inherit the procedural context without duplicating instructions in system prompt prompts.
Ensure that the agent sandbox has workspace write access granted. If fs_write is constrained, the agent cannot write the generated chart components or theme utility files.
Environment Secrets & Dependency Validation
Install the required @nivo modular packages and ensure peer dependencies are met.
Nivo is distributed across modular packages (@nivo/core, @nivo/bar, @nivo/line, @nivo/heatmap). Agents must verify package compatibility and ensure that peer rendering libraries like d3 or tslib are resolved correctly.
pnpm add @nivo/core @nivo/bar @nivo/line @nivo/heatmapAvoid installing the monolithic 'nivo' legacy bundle. Always instruct the agent to install granular @nivo/<module> packages to minimize bundle weight and conserve context tokens.
In Next.js App Router (app directory), @nivo components will crash during SSR if rendered as Server Components. Ensure the agent inserts the 'use client' directive at the top of chart wrappers.
Intent Matching & Trigger Invocation
Verify deterministic activation using tested natural language prompts.
Agent runtimes scan user input against the declared frontmatter triggers. Initiating queries with verified triggers like 'create nivo bar chart' or 'build nivo heatmap' guarantees immediate matching and forces execution according to the SOP rules.
Prepend your prompt with 'Follow nivo-rich-dataviz-react SOP' to lock runtime reasoning to the specified responsive height and theme isolation guidelines.
Do not request multiple unrelated visualization engines (e.g., mixing Chart.js and Nivo in a single prompt), as this dilutes trigger affinity and may cause the agent to ignore the SOP.
Verification, Linting & Output Quality Gate
Execute automated self-healing checks before accepting agent deliverables.
Once the component is created, the skill instructs the agent to run TypeScript checks and linting to ensure props conform to @nivo type definitions and that responsive parent wrappers are strictly defined.
pnpm tsc --noEmit && pnpm eslint src/components/chartsCheck that the agent implemented an accessible ARIA role or descriptive title element inside the chart wrapper for screen readers.
Inspect the generated CSS/Tailwind classes: if parent heights are defined with percentage (e.g., h-full) without an ancestor having a fixed pixel or viewport height, Nivo calculates 0px height and renders an empty SVG.
Real-World Scenario: Generate an Interactive Quarterly Revenue ResponsiveBar Chart with Dark Theme
“create nivo bar chart showing quarterly ARR growth by product line across Q1-Q4. Ensure it has a custom dark theme with slate tooltips, spring motion, and proper responsive bounding.”
Runtime Troubleshooting & Failure Modes
Root Cause: The parent container wrapping Nivo's Responsive* component does not have an explicit or computed height, causing ResizeObserver/getBoundingClientRect to report 0.
<div style={{ height: '400px', width: '100%' }}>
<ResponsiveBar data={data} {...props} />
</div>Root Cause: A Responsive* Nivo component was rendered inside a React Server Component in Next.js without client boundary isolation.
Add `'use client';` as the very first line of the chart component file, or wrap it in `next/dynamic` with `{ ssr: false }`.Frequently Asked Questions (Nivo Rich React Dataviz & SVG/Canvas Charts SOP)
Q:Can I use Nivo Rich React Dataviz & SVG/Canvas Charts across Codex, Claude Code, and Cursor simultaneously?
Yes. The skill conforms to the universal SKILL.md specification supported across all modern agent runtimes. Simply place the file in your shared repository or agent skill directory.
Q:How does Nivo Rich React Dataviz & SVG/Canvas Charts prevent context window overflow during long agent sessions?
By establishing concise procedural boundaries and deterministic validation gates rather than polluting system prompts with redundant rules, the agent receives only the targeted SOP required for dataviz generation.
Q:Does this skill require escalated root or container permissions?
No. It is audited with a security score of 98/100 and runs safely within workspace-scoped sandboxes with read and workspace-write permissions only.
Ready to equip your autonomous agent with Nivo Rich React Dataviz & SVG/Canvas Charts?
Copy the complete audited SKILL.md specification or download the 1-click zip bundle directly from our verified registry.