Pencil To Code
v0.1.0Export .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.
⭐ 0· 1.1k·1 current·1 all-time
by@jcwen
MIT-0
Download zip
LicenseMIT-0 · Free to use, modify, and redistribute. No attribution required.
Security Scan
OpenClaw
Benign
high confidencePurpose & 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.Like a lobster shell, security has layers — review code before you run it.
latestvk97637b60edhhcspchkkw07vyd80yg89
License
MIT-0
Free to use, modify, and redistribute. No attribution required.