component-engineering

To build composable React components, this skill audits your architecture using reference guides to enforce asChild composition and data-slot semantics, ensuring semantic HTML patterns across reusable UI primitives for robust accessibility.

The asChild composition pattern allows a React component to pass its props to a child element without adding an extra DOM wrapper, preserving semantic HTML structure and improving accessibility and styling flexibility across UI primitives.

You can audit React components for accessibility by validating them against the skill's reference materials, which check for proper data-slot usage, semantic HTML patterns, and architecture-first workflows to enforce reusable, robust component standards.

You need data-slot semantics in React UI primitives when building composable components that require consistent styling and DOM structure identification, enabling robust auditing and accessibility validation across complex component architectures.

Yes, this skill standardizes the practice of building accessible, composable React components by providing reference guides for composition, accessibility, and styling, ensuring your team adopts a consistent engineering standard for UI primitives.