Composition

What this skill does

Composition defines how UI components are structured and combined to create consistent, accessible interfaces. It enforces placing items within their designated group components, using existing building blocks like Alert for callouts, Empty for empty states, and sonner for toast notifications. It also guides choosing the right overlay component—Dialog, Sheet, Drawer—based on interaction context, and mandates proper subcomponent inclusion, such as always adding titles to overlays for accessibility.

This skill ensures UI elements follow predictable patterns that improve maintainability and user experience, avoiding ad hoc markup or custom styles where standardized components exist. It also clarifies component-specific constraints, like wrapping TabsTrigger inside TabsList or including AvatarFallback when avatar images fail.

Who it's for

This skill is vital for frontend developers working closely with design and product teams to implement UI consistently across web applications. Growth leads and agency strategists who coordinate between design and engineering can use it to set clear standards for component usage, reducing implementation errors and support tickets. Performance marketers benefiting from faster iteration cycles will find this skill helps ensure UI elements behave uniformly, preserving brand trust and conversion metrics.

Key workflows

Practitioners begin by mapping interface elements to their canonical components, such as replacing custom empty states with the Empty component or swapping raw hr tags for Separator. Next, they organize items within their Group components to maintain semantic grouping and interactive consistency, like placing SelectItem inside SelectGroup. When adding overlays, they select the appropriate component based on use case and always include mandatory subcomponents like titles for accessibility compliance. Finally, they replace custom loading states or badges with Skeleton and Badge components, streamlining visual feedback and reducing custom CSS overhead.

Common questions

How do I decide between Dialog, Sheet, and Drawer? Use Dialog for focused input, Sheet for side panels or filters, and Drawer for mobile-first bottom panels. Can I add loading states directly on Buttons? No, Buttons don’t support isLoading props; instead, compose with a Spinner and disable the button. What if an avatar image fails to load? Always include AvatarFallback to display initials or a placeholder.

How to use in Metaflow

Attach the Composition skill to tasks involving UI implementation or front-end component audits. Metaflow agents will guide you through verifying component usage against documented patterns, ensuring all structural and accessibility requirements are met. This alignment helps maintain design consistency and accelerates development cycles when coordinating across teams. You can expect detailed checks on group usage, overlay choice, and component composition during task execution.

For broader context, see our roundup of marketing skills claude, and read common Claude Code content mistakes for related setup guidance.