Existing UI patterns, tokens, package boundaries, and representative consumers.
One shared component contract your app uses, plus a state gallery that exposes spacing or state inconsistencies quickly.
Render all states and sizes; verify exports from a consumer and compare spacing and focus behavior.
When the same button or card is built in several places, the copies drift apart in spacing, focus and disabled behavior. This skill guides your coding agent from prerequisites to a checked result: shared components with clear variants and consistent spacing.
The agent first inventories real repetition and extracts only patterns with actual consumers. It gives each component a small set of explicit variants with consistent height, padding, focus treatment and disabled behavior, and makes icon-only controls accessible by name. Shared components are exported from a UI package that keeps app routes, secrets and database imports out.
It then builds a state gallery with short and long labels, loading and disabled states and keyboard focus, and checks that consumers import through public exports. You need an app with repeated interface patterns and, for shared packages, a working workspace. Provider accounts, model weights, GPU compute and hosting are not included.
No reviews yet.
Sign in to rate this Vibe.
One SVG that works on light or dark, takes whatever colour you place it in, and sits at the same size as the rest of your logos.