Pencil To Code

Export .pen design to React/Tailwind code. Does ONE thing well. Input: .pen frame ID or file path Output: React component code + Tailwind config Use when: design-exploration or user needs implementation code from a finalized Pencil design.

Security Scan

The skill's requirements, instructions, and outputs are consistent with its stated purpose of converting .pen designs to React + Tailwind code; it is an instruction-only skill with no unusual installs or credential requests.

Purpose & Capability

Name/description (export .pen → React/Tailwind) matches the SKILL.md: all declared operations focus on reading .pen files, extracting tokens, mapping nodes to components, and emitting code. There are no unrelated binaries, credentials, or external service requirements listed.

Instruction Scope

Instructions call platform-style RPCs (mcp__pencil__batch_get, mcp__pencil__get_variables, mcp__pencil__get_screenshot) and operate on a provided .pen filePath or nodeId — this is appropriate for the task. Note: the skill reads user-supplied design files and may request screenshots of frames; users should expect the skill to access the specified design files but the instructions do not attempt to access other system files or environment variables.

Install Mechanism

No install spec and no code files — instruction-only skill. This minimizes on-disk persistence and reduces install-time risk.

Credentials

No environment variables, credentials, or config paths are requested. The operations described (reading .pen, extracting variables, producing code) do not need additional secrets, so the lack of requested credentials is proportionate.

Persistence & Privilege

always is false and the skill does not request persistent system privileges or modify other skills. Autonomous invocation is allowed (platform default) but not combined with broad credentials or privileged behavior.

Assessment

This skill appears coherent and limited to converting Pencil (.pen) designs into React + Tailwind output. Before installing: (1) confirm you only give it access to design files you intend to convert (it reads filePath/nodeId and can take screenshots of frames), (2) review generated code for any external image URLs or embedded data (images in designs may point to external hosts), and (3) if provenance matters, consider the unknown source/homepage — although the skill is instruction-only (no install), verify the owner/trust if you plan to use it in automated pipelines. If you need stronger assurance, ask the publisher for a homepage or source repository so you can inspect any implementation that may be added later.

Export Pencil .pen designs to production React/Tailwind code.

Interface

Input:

• Frame ID to export (or entire document)
• Target framework: React (default), Vue, HTML
• Optional: Component name, output path

Output:

• React component(s) with Tailwind classes
• Tailwind theme configuration (from .pen variables)
• Optional: Screenshot comparison for validation

Workflow

1. Read Design Structure

// Get full frame tree
mcp__pencil__batch_get({
  filePath: "<path>.pen",
  nodeIds: ["frameId"],
  readDepth: 10,
  resolveInstances: true,
  resolveVariables: true
})

// Get design variables/theme
mcp__pencil__get_variables({ filePath: "<path>.pen" })

2. Extract Design Tokens

Transform .pen variables → Tailwind theme:

/* From .pen variables */
@theme {
  --color-primary: [from variables.colors.primary];
  --color-background: [from variables.colors.background];
  --font-sans: [from variables.fonts.body];
  /* ... */
}

Reference: references/token-extraction.md

3. Map Nodes to Components

.pen Node Type	React Output
frame with layout	<div className="flex ...">
frame with children	Component with children
text	<p>, <h1-6>, or <span>
ref (instance)	Reusable component
rectangle	<div> with fill
ellipse	<div className="rounded-full">
image	<img> or fill: url()

Reference: references/node-mapping.md

4. Generate Code

Component structure:

// components/[ComponentName].tsx
import { cn } from "@/lib/utils"

interface [ComponentName]Props {
  className?: string
  // Extracted props from design
}

export function [ComponentName]({ className, ...props }: [ComponentName]Props) {
  return (
    <div className={cn("[tailwind classes]", className)}>
      {/* Nested structure */}
    </div>
  )
}

Tailwind mapping:

.pen property → Tailwind class
--------------------------------
fill: #000     → bg-black
layout: horizontal → flex flex-row
gap: 16        → gap-4
padding: [16,24,16,24] → py-4 px-6
fontSize: 24   → text-2xl
fontWeight: 700 → font-bold
cornerRadius: [8,8,8,8] → rounded-lg

5. Validate (Optional)

// Screenshot the .pen frame
mcp__pencil__get_screenshot({ nodeId: "frameId" })

// Compare visually with rendered React
// (Manual step or browser automation)

6. Output

## Generated Components

### [ComponentName]
- File: `components/[ComponentName].tsx`
- Props: [list extracted props]

### Theme Configuration
- File: `app/globals.css` (additions)

## Verification
Screenshot comparison: [attached]

Translation Rules

Layout System

.pen                          Tailwind
--------------------------------------
layout: "vertical"         → flex flex-col
layout: "horizontal"       → flex flex-row
layout: "grid"             → grid
alignItems: "center"       → items-center
justifyContent: "center"   → justify-center
gap: 8                     → gap-2
gap: 16                    → gap-4
gap: 24                    → gap-6
width: "fill_container"    → w-full
height: "fill_container"   → h-full

Spacing (8-point grid)

.pen padding                  Tailwind
----------------------------------------
[8,8,8,8]                  → p-2
[16,16,16,16]              → p-4
[16,24,16,24]              → py-4 px-6
[24,32,24,32]              → py-6 px-8

Typography

.pen                          Tailwind
----------------------------------------
fontSize: 12               → text-xs
fontSize: 14               → text-sm
fontSize: 16               → text-base
fontSize: 20               → text-xl
fontSize: 24               → text-2xl
fontSize: 32               → text-3xl
fontSize: 48               → text-5xl
fontWeight: 400            → font-normal
fontWeight: 500            → font-medium
fontWeight: 600            → font-semibold
fontWeight: 700            → font-bold

Colors

.pen                          Tailwind
----------------------------------------
fill: "#FFFFFF"            → bg-white
fill: "#000000"            → bg-black
fill: variable             → bg-[var(--color-name)]
textColor: "#6B7280"       → text-gray-500
stroke: "#E5E5E5"          → border-gray-200

Border Radius

.pen cornerRadius             Tailwind
----------------------------------------
[0,0,0,0]                  → rounded-none
[4,4,4,4]                  → rounded
[8,8,8,8]                  → rounded-lg
[16,16,16,16]              → rounded-2xl
[9999,9999,9999,9999]      → rounded-full

Constraints

• Single concern: Export → code. No design modifications.
• Tailwind 4 @theme: CSS-first token system
• React + TypeScript: Default output target
• Semantic HTML: Choose appropriate elements
• Accessibility: Include aria attributes where detectable

References

• references/node-mapping.md — Complete node → component mapping
• references/token-extraction.md — Variable → theme extraction
• design-tokens/ — Token system conventions

Integration

Called by:

• design-exploration orchestrator (after direction selection)
• Direct user invocation

Composes:

• design-tokens (for theme structure)