skills.rest
TechsioCZ
TechsioCZOFFICIAL
Explore all skills by this author →
GitHub

zag-compound-components

Standardize Zag.js-based compound UI components across React projects.

2|Updated Dec 2, 2024
Search Tags:#accessibility#react#compound-components#ui-kit#component-authoring#zag-js#tailwind-token-authoring
One-click install
npx skills add https://github.com/TechsioCZ/new-engine --skill zag-compound-components
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: zag-compound-components
Source: https://github.com/TechsioCZ/new-engine/tree/main/libs/ui/skills/zag-compound-components
Command: npx skills add https://github.com/TechsioCZ/new-engine --skill zag-compound-components

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Creating and maintaining complex Zag.js-based compound UI components (Root, Item, Trigger, Content, and related subcomponents) across a React UI library can lead to inconsistent APIs, accessibility gaps, and scattered implementation patterns. This Skill provides a cohesive approach to coordinate machine-assisted patterns, props mapping, and data attributes for predictable, accessible, and scalable component slices.

Core Features & Use Cases

  • Compound patterns: enforce Root/Item/Content/Trigger/Indicator-style APIs aligned with Chakra UI-like anatomy.
  • Prop orchestration: leverage Zag's machine/connect APIs and normalizeProps for consistent ARIA and keyboard behavior.
  • Documentation guidance: reference component-authoring and tailwind-token-authoring practices to ensure design-token consistency.
  • Use Case: teams building a design system can rapidly compose interactive UI primitives with predictable state.

Quick Start

Import the Zag compound primitives into your React project and compose them with your UI kit.

Frequently Asked Questions about zag-compound-components

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build accessible compound UI components in React using Zag.js?▼

Build accessible Zag.js compound UI components in React by standardizing Root, Item, and Content patterns. This approach uses machine APIs and normalizeProps to orchestrate consistent ARIA attributes and keyboard behavior across your design system.

What is the best way to manage contextual state for React compound components?▼

Manage contextual state for React compound components by leveraging Zag.js machine and connect APIs. This orchestrates predictable state transitions and data attributes without scattered implementation patterns across interactive controls.

How do I normalize props for consistent ARIA behavior in a Zag.js UI kit?▼

Normalize props for consistent ARIA behavior in a Zag.js UI kit by applying Zag's normalizeProps utility. This ensures accessible keyboard interactions and standardized data attributes across compound component slices.

Can I use Tailwind design tokens with Zag.js compound components?▼

Yes, you can integrate Tailwind design tokens with Zag.js compound components. The Skill references tailwind-token-authoring practices to ensure design-token consistency while composing interactive UI primitives.

Why are my Zag.js component APIs inconsistent across a React design system?▼

Zag.js component APIs become inconsistent across a React design system when Root, Item, and Content patterns lack standardization. Enforcing a cohesive compound anatomy with machine-assisted props mapping resolves these accessibility gaps and scattered implementations.

Related Skills

Explore More Software Engineering Skills→
jubscodesjubscodes
49

gsp-scaffold

Set up Next.js, Vite, or React Native projects with Tailwind and shadcn/ui, then verify the build.

Community
Advanced
JBonfimJBonfim

shadcn

Implement and customize shadcn/ui components with Tailwind tokens and Radix UI accessibility.

Community
Intermediate
ChangZhou-xjChangZhou-xj

design-md

Lint DESIGN.md token specs for references and WCAG contrast compliance.

Community
Advanced
petbrainspetbrains
13

frontend-rive

Orchestrate Rive state machine animations in React with useStateMachineInput.

Official
Intermediate