Composition Patterns
Reshape growing React component APIs with composition and explicit state boundaries.
The field guide
One moment.
Loading the selection…
The field guide
Loading the selection…
A closer look / 11 skills
Choose AI skills for design documentation, visual systems, and component consistency. Compare workflows for existing products and new interfaces.
Reshape growing React component APIs with composition and explicit state boundaries.
Extract a durable design document from evidence in a product or public website.
Native screen styling, semantic colors, controls, and visual effects for Expo.
Implement Figma designs using design context, real assets, and existing components.
One design skill with named workflows, browser iteration, and edit hooks.
Product-interface direction with design decisions saved across sessions.
Project-aware guidance for installing, composing, and customizing shadcn/ui.
Generate, edit and compare screen designs through Google Stitch.
Apply a named palette and font pairing across slides, documents, or web artifacts.
Add reusable CSS transitions and align UI motion to a shared token scale.
Search local design references and generate a system for the product at hand.
Choosing a skill
Design system work can start with an established product, an undecided visual direction, or components ready to implement. Choose a skill for the decision you need to make. A useful system connects shared visual rules to the interfaces people actually use, with enough context for another person or agent to continue the work.
Extract supported design decisions from an existing repository or public website into DESIGN.md. This workflow separates shared rules from incidental styling and keeps product code outside the task.
Read the Create DESIGN.md reviewSearch local references for palettes, typography, and interface patterns, then use the results to inform a coherent direction. Bring a clear product brief and review recommendations against your audience and brand.
Read the UI UX Pro Max reviewUse project configuration, existing components, and semantic styling conventions to guide implementation. This skill also documents a path from DESIGN.md to a themed component system within the shadcn/ui ecosystem.
Read the shadcn/ui reviewStart with one representative screen and its important states. Check whether the proposed rules work across real content before applying them widely. Keep approved brand constraints visible, and review component behavior and accessibility alongside color and typography.