Pencil Design Skill Design production-quality UIs in Pencil and generate clean, maintainable code from them. This skill enforces best practices for design system reuse, variable usage, layout correctness, visual verification, and design-to-code workflows. When to Use This Skill - Designing screens, pages, or components in a file - Generating code (React, Next.js, Vue, Svelte, HTML/CSS) from Pencil designs - Building or extending a design system in Pencil - Syncing design tokens between Pencil and code (Tailwind v4 , shadcn/ui tokens) - Importing existing code into Pencil designs - Working wit…