{"skill":{"slug":"pencil-to-code","displayName":"Pencil To Code","summary":"Export .pen design to React/Tailwind code. Does ONE thing well.\n\nInput: .pen frame ID or file path\nOutput: React component code + Tailwind config\n\nUse when: design-exploration or user needs implementation code\nfrom a finalized Pencil design.","tags":{"latest":"0.1.0"},"stats":{"comments":0,"downloads":1214,"installsAllTime":1,"installsCurrent":1,"stars":0,"versions":1},"createdAt":1770778916378,"updatedAt":1777525095727},"latestVersion":{"version":"0.1.0","createdAt":1770778916378,"changelog":"Initial release: Export Pencil .pen designs directly to production-ready React components using Tailwind.\n\n- Converts .pen frame or document to React (default), Vue, or HTML code.\n- Extracts Pencil design tokens and generates corresponding Tailwind theme configuration.\n- Maps .pen node types (frames, text, images, shapes) to semantic React components with Tailwind classes.\n- Supports outputting reusable components and props, with optional screenshot validation.\n- Follows strict conventions: no design editing, accessible markup, and CSS-first token mapping.","license":null},"metadata":null,"owner":{"handle":"jcwen","userId":"publishers:jcwen","displayName":"Jcwen","image":"https://avatars.githubusercontent.com/u/18304930?v=4"},"moderation":null}