Setup & Installation
Or with the ClawHub CLI, for registry-managed skill folders outside a full OpenClaw workspace:
What This Skill Does
Converts Pencil (.pen) design files to React components with Tailwind CSS. Takes a frame ID or file path as input and outputs typed TypeScript components plus a Tailwind theme configuration derived from .pen design variables. Handles the full property translation: layout, spacing, typography, colors, and border radius.
Covers the complete .pen-to-Tailwind translation table automatically, removing the need to manually look up class equivalents for every layout, color, and typography property.
When to use it
- Exporting a finalized Pencil frame as a ready-to-use React component
- Generating a Tailwind @theme config from .pen design variable definitions
- Handing off UI designs from Pencil to a React/TypeScript codebase
- Converting Pencil layout and spacing values to Tailwind utility classes
- Validating generated code visually against the original .pen frame screenshot
Example Workflow
Here's how your AI assistant might use this skill in practice.
User asks: Export the 'hero-section' frame from dashboard.pen as a React component
- 1Read the frame tree from dashboard.pen at the specified frame ID with full depth and resolved instances
- 2Extract design variables from the .pen file and map them to Tailwind @theme CSS custom properties
- 3Classify each node by type and map it to the appropriate React element or component
- 4Generate a typed TypeScript component file with Tailwind utility classes reflecting the design properties
- 5Screenshot the original .pen frame for optional side-by-side visual validation
HeroSection.tsx with Tailwind classes and a globals.css snippet containing the extracted theme tokens
Requirements
Accounts, API keys, or tools you or your AI assistant may need to set up while using this skill.