What problem does it solve? Building a foundational UI component set in Figma by hand is slow and error-prone: variant matrices get inconsistent, states get dropped, and components end up hardcoding values instead of consuming the design system's tokens. This Skill automates the construction of well-structured Figma components that map cleanly to code. ## Core Features & Use Cases - Variant matrix construction: Builds components (buttons, inputs, cards, badges, modals, and more) as auto-layout grids with types, sizes, and the full state set (default, hover, focus, active, disabled, plus loading/selected/error where applicable). - Token and style binding: Binds every fill, radius, border, spacing, text, and shadow property to the system's semantic tokens and styles so components consume the design system rather than hardcode values. - Slot contracts and documentation: Captures icon, typed-component, and content slot contracts for code handoff, and authors a canonical documentation record projected to the Figma component description and a doc card. - Use Case: After tokens and icons exist, ask the agent to build the foundational component library; it brainstorms the set with you, builds atoms before composites, and checkpoints each component for review. ## Quick Start Ask the agent to build the foundational Figma component set for your design system, starting with buttons and inputs bound to your existing tokens.
