pencil-to-code

SKILL.md

| frame with layout | | | frame with children | Component with children | | text | , , or | | ref (instance) | Reusable component | | rectangle | with fill | | ellipse | | | image | or fill: url() |

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. Source: phrazzld/claude-config.

Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/phrazzld/claude-config --skill pencil-to-code Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code or Cursor

View raw