figma-d3-react-ts
OfficialPixel-perfect D3 charts from Figma
AuthorCoRLab-Tech
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill bridges the gap between design mockups in Figma and functional D3.js data visualizations within React/Next.js applications, ensuring pixel-perfect visual fidelity.
Core Features & Use Cases
- Figma to Code: Extracts design specifications directly from Figma for precise visual replication.
- D3.js Integration: Implements interactive charts, graphs, and diagrams using D3.js within React components.
- Workflow Automation: Streamlines the process from design extraction to iterative visual validation using Playwright.
- Use Case: You have a complex D3-based network graph designed in Figma. This Skill will help you extract the exact colors, stroke styles, and layout parameters from Figma and implement them in your React component, ensuring it looks identical to the design.
Quick Start
Use the figma-d3-react-ts skill to create a line chart based on the provided Figma node ID.
Dependency Matrix
Required Modules
d3@types/d3
Components
referencesscripts
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: figma-d3-react-ts Download link: https://github.com/CoRLab-Tech/skills/archive/main.zip#figma-d3-react-ts Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.