skills.rest
sameer-thakkar
sameer-thakkarCOMMUNITY
Explore all skills by this author →
GitHub

create-component

Convert Figma designs into React components with PandaCSS and Storybook.

Updated Jun 19, 2026
Search Tags:#React#design system#Figma#component creation#PandaCSS
One-click install
npx skills add https://github.com/sameer-thakkar/hackin26-next-deimos --skill create-component-sameer-thakkar
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: create-component
Source: https://github.com/sameer-thakkar/hackin26-next-deimos/tree/main/.cursor/skills/create-component-ho
Command: npx skills add https://github.com/sameer-thakkar/hackin26-next-deimos --skill create-component-sameer-thakkar

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @headout/pixie, framelink-mcp, context7-mcp, oak-cli, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill automates the creation of production-ready Eevee design system components from Figma designs, streamlining the process from design to development.

Core Features & Use Cases

  • Automated Component Creation: Convert Figma designs into React components using PandaCSS, design tokens, and Storybook stories.
  • Design System Integration: Leverages Eevee design system standards, including PandaCSS, design tokens, and Storybook.
  • Use Case: Ideal for software engineers and designers who need to quickly develop consistent, accessible UI components based on Figma designs.

Quick Start

Use the create-component skill to generate a new Eevee component from the Figma design at this URL: [Figma URL].

Frequently Asked Questions about create-component

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert Figma designs into React components?▼

To convert Figma designs into React components, this Skill uses Framelink MCP and Context7 MCP for design extraction, generating production-ready UI components with PandaCSS and Storybook stories.

What is the best way to generate design system components from Figma?▼

Generating design system components from Figma is best handled by automating extraction with Framelink MCP, applying Eevee design tokens, and outputting React code with PandaCSS for consistency and accessibility.

Do I need PandaCSS to build Eevee design system components?▼

Yes, you need PandaCSS to build Eevee design system components, as it processes the design tokens extracted from Figma to ensure styling consistency and accessibility across the generated React components.

How does Storybook integrate with Figma component creation?▼

Storybook integrates with Figma component creation by automatically generating stories for the newly created React components, allowing you to visually test and document the UI components extracted from the Figma design.

Can I use this Figma to React conversion without Oak CLI?▼

No, you cannot use this Figma to React conversion without Oak CLI, as it is a required dependency for managing the Eevee design system workflows and ensuring the generated components meet production standards.

Why does my Figma to React component generation require Context7 MCP?▼

Your Figma to React component generation requires Context7 MCP because it manages design token extraction and ensures the converted React components maintain strict consistency with the Eevee design system standards.

Related Skills

Explore More Software Engineering Skills→
tuantiensiutuantiensiu
1

figma

Fetch Figma layouts, styles, components, and tokens via Framelink MCP.

Community
Intermediate
NuclearPlayerNuclearPlayer
361

creating-components

Create React UI components with tests and Storybook stories.

Official
Intermediate
somachaksomachak

modern-css-architecture

Standardize design tokens and component styling patterns for Tailwind-based React projects.

Community
Intermediate
JustinWangJPJustinWangJP
6

figma

Generate React components and design tokens from Figma API data.

Community
Advanced