skills.rest
H2OSLabs
H2OSLabsOFFICIAL
Explore all skills by this author →
GitHub

pen-to-react

Convert Pencil .pen design files into React components for Next.js frontends.

1|1|Updated Jan 27, 2026
Search Tags:#frontend#react#Next.js#convert#design-to-code#pen
One-click install
npx skills add https://github.com/H2OSLabs/SynnovatorZero --skill pen-to-react
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pen-to-react
Source: https://github.com/H2OSLabs/SynnovatorZero/tree/main/.claude/skills/pen-to-react
Command: npx skills add https://github.com/H2OSLabs/SynnovatorZero --skill pen-to-react

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Pen-to-React solves the challenge of turning Pencil (.pen) design files into production-ready React components for the Synnovator frontend, enabling a streamlined design-to-code workflow.

Core Features & Use Cases

  • Extract reusable base UI components from .pen designs into frontend/components/ui/ and compose full page components using those base components in frontend/components/pages/
  • Inline non-reusable elements directly into the page component when not worth extracting
  • Use when transforming existing or new .pen designs into ready-to-run React pages for the Synnovator frontend

Quick Start

Open a .pen design in specs/ui/components/ and run pen-to-react to generate frontend/components/ui/ and frontend/components/pages/ components. Then integrate the generated code into the Next.js app at frontend/ and adjust mock data as needed.

Frequently Asked Questions about pen-to-react

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

FAQPage Schema
How do I convert Pencil .pen design files into React components?▼

The pen-to-react skill generates production-ready React components by extracting reusable base UI elements into frontend/components/ui/ and composing full page components into frontend/components/pages/, ready for integration.

Do I need Next.js 14 and Tailwind v4 to convert .pen designs to code?▼

Yes, converting .pen designs requires a frontend project at frontend/ with Next.js 14, Tailwind v4, and shadcn/ui installed, alongside Pencil MCP tooling to read design specs located in specs/ui.

What is the best way to extract reusable UI patterns from a .pen design file?▼

The best way to extract reusable UI patterns is using pen-to-react, which isolates base components into frontend/components/ui/ while inlining non-reusable elements directly into the page component when extraction is not warranted.

How does design-to-code conversion handle non-reusable elements in .pen files?▼

Design-to-code conversion handles non-reusable elements by inlining them directly into the page component within frontend/components/pages/ instead of extracting them as separate files, ensuring a streamlined architecture.

Can I generate a full React page from a .pen design for the Synnovator frontend?▼

Yes, you can generate a full React page for the Synnovator frontend. The tool composes pages in frontend/components/pages/ using extracted base UI components, requiring minor mock data adjustments afterward.

Why are my generated React components not integrating with my Next.js app?▼

Generated React components fail to integrate if the frontend project lacks the required Next.js 14, Tailwind v4, or shadcn/ui setup, or if the .pen design specs are not correctly placed in specs/ui/components/.

Related Skills

Explore More Software Engineering Skills→
zts212653zts212653
2.6k

pencil-design

Convert .pen design files into React/Tailwind components.

Community
Intermediate
endorphin-aiendorphin-ai
3

qa-frontend-mean

Generate and execute React frontend tests using Jest, React Testing Library, and Mock Service Worker.

Official
Advanced
Quanby-IT-SolutionsQuanby-IT-Solutions
2

tailwind-shadcn

Standardize Tailwind v4 and shadcn/ui styling in apps/web with ThemeProvider theming.

Official
Intermediate
desafindesafin

moai-design-tools

Fetch Figma design context and export Pencil designs to React/Tailwind code.

Community
Advanced