React And Nextjs Data Visualization — Agent Skill by OpenAI

From the author

Integrate data visualizations into React and Next.js applications. Use when the user needs chart components, UML-like or architecture diagram components, React integration patterns, Next.js client or server boundaries, hydration-safe rendering, lazy loading, framework-aware performance, scroll-driven visual stories, or export guidance.

— the description by OpenAI

Install

Get the skill from its source (we cannot redistribute it):
https://github.com/openai/plugins/tree/d420d13051bffe4543ed39e30fa46b87148e47dd/plugins/build-web-data-visualization/skills/react-and-nextjs-data-visualization

Documentation by OpenAI

The licence of this skill does not allow us to copy its documentation. Read it at the source

Files

SKILL.md(opens on GitHub)Not mirrored: opens on GitHub12.0 KiB
agents/openai.yaml(opens on GitHub)Not mirrored: opens on GitHub198 B
references/d3-canvas-and-grammar-in-react.md(opens on GitHub)Not mirrored: opens on GitHub1.1 KiB
references/lazy-loading-ssr-and-bundle-strategy.md(opens on GitHub)Not mirrored: opens on GitHub1.1 KiB
references/nextjs-client-server-boundaries.md(opens on GitHub)Not mirrored: opens on GitHub1.0 KiB
references/react-component-patterns.md(opens on GitHub)Not mirrored: opens on GitHub1020 B

Requirements and compatibility

Written for: OpenAI Codex

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Security

No issues found by our static scan· No issues found

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Web Artifacts Builder
AnthropicOfficial
A structured workflow for developing and bundling complex, multi-component React artifacts for Claude.
Software developmentClaude CodeClaude appsOpenAI Codex+14 more
Apache-2.0Medium riskHas scriptsGitHub stars of the source repository188.6k
Frontend UI Engineering
Addy Osmani· Community
Engineering standards for building accessible, responsive, and production-ready frontend user interfaces.
Software developmentClaude CodeClaude appsOpenAI Codex+14 more
MITGitHub stars of the source repository113.9k
Anti UI Slop
GitHubOfficial
Prevent generic AI-generated UI by grounding interface development in real-world design patterns and rigorous review gates.
Software developmentClaude CodeClaude appsOpenAI Codex+14 more
Apache-2.0GitHub stars of the source repository40.9k
Ask Sonner
Emil Kowalski· Community
A comprehensive guide for implementing, styling, and troubleshooting the Sonner toast notification library in React applications.
Software developmentClaude CodeClaude appsOpenAI Codex+14 more
MITGitHub stars of the source repository54.3k
Pick UI Library
Emil Kowalski· Community
Get recommendations for frontend UI libraries based on a curated, opinionated list.
Software developmentClaude CodeClaude appsOpenAI Codex+14 more
MITGitHub stars of the source repository54.3k
Animate Expo
Emil Kowalski· Community
A senior mobile engineering guide for building React Native and Expo animations that feel correct on real devices.
Software developmentClaude CodeClaude appsOpenAI Codex+14 more
MITGitHub stars of the source repository54.3k