zag-compound-components - Zag Compound Components for @techsio/ui-kit
Guidelines for creating and refactoring @techsio/ui-kit interactive components using Zag.js, React context, and data attribute state styling.
Tags
Updated: 2026-09-16Capabilities
Typical Inputs
Typical Outputs
What this skill does
- Build interactive Zag compound components
- Connect Zag machines with React
- Assign compound subcomponents to roots
- Style component states with data-attributes
- Guard React compound context usage
- Align subcomponent naming with Chakra
Inputs
- Interactive component requirements
- Zag.js state machine APIs
- UI kit component source files
- Chakra UI compound anatomy references
Outputs
- Zag-backed React compound components
- Refactored UI component files
- Component validation test results
Requirements
- component-authoring skill
- tailwind-token-authoring skill
- @techsio/ui-kit environment v0.3.2
- Bun, Nx, and pnpm build tools