Make your interface reusable

What you will make

Consumers use one component contract and the gallery exposes spacing or state inconsistencies quickly.

Before you start

An app with repeated interface patterns and, for shared packages, a working workspace.

1. Inventory real repetition

Find repeated buttons, fields, cards, and layout containers. Compare behavior as well as appearance. Extract only patterns with actual consumers.

2. Define variants

Give components a small set of explicit variants, such as primary, secondary, and icon actions. Use consistent height, padding, focus treatment, and disabled behavior. Make icon-only controls accessible by name.

3. Publish a package boundary

Export supported entrypoints from a shared UI package. Keep app routes, secrets, and database imports out. Declare framework peers and source or build output intentionally.

4. Create a state gallery

Render every meaningful variant with short and long labels, loading and disabled states, and keyboard focus. Verify consumers can import through public exports.

Give your agent a clear task

Normalize our buttons and layout containers into shared primitives. Keep explicit variants for labeled and expandable icon actions. Define consistent padding and focus states, expose public package exports, and build a state gallery to verify the real consumers.

Check the result

Consumers use one component contract and the gallery exposes spacing or state inconsistencies quickly.