pencil-design

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. These rules address the most common agent mistakes. Violating them produces designs that are inconsistent, hard to maintain, and generate poor code. NEVER recreate a component from scratch when one already exists in the design file. Before inserting any element, you MUST: See references/design-system-components.md for detailed workflow. NEVER hardcode colors, border radius, spacing, or typography values when variables exist. Before applying any style value, you MUST: See references/variables-and-tokens.md for detailed workflow.