# Compound Ui

> Build, review, or refactor React UI components into shadcn-style compound components. Use when creating composable component APIs, splitting prop-heavy components into named parts, wrapping Radix/Base UI primitives, adding asChild/Slot behavior, designing data-slot styling hooks, or enforcing accessible source-owned component primitives.

- **Type:** Skill
- **Install:** `agentstack add skill-dobroslavradosavljevic-skills-compound-ui`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [DobroslavRadosavljevic](https://agentstack.voostack.com/s/dobroslavradosavljevic)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [DobroslavRadosavljevic](https://github.com/DobroslavRadosavljevic)
- **Source:** https://github.com/DobroslavRadosavljevic/skills/tree/main/skills/compound-ui
- **Website:** https://dobroslav.dev

## Install

```sh
agentstack add skill-dobroslavradosavljevic-skills-compound-ui
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Compound UI

Use this skill to create source-owned React components that compose like shadcn/ui: small named parts, explicit children, accessible primitives, class merging, and stable styling hooks.

## Workflow

1. Inspect the local UI stack before writing code:
   - Read nearby project guidance, existing component files, package versions, styling utilities, primitive libraries, and test/story conventions.
   - Prefer the project's existing export, file, styling, icon, and accessibility patterns.
2. Refresh docs when exact APIs matter:
   - Use [references/source-map.md](references/source-map.md) for current source links and captured guidance.
   - Prefer current React, shadcn/ui, Radix UI, and local primitive docs before changing framework-sensitive code.
3. Design the public API before implementation:
   - Read [references/component-contract.md](references/component-contract.md).
   - Define the root component, named subcomponents, legal nesting, controlled/uncontrolled state, and required accessibility parts.
4. Implement in the shadcn style:
   - Read [references/authoring-patterns.md](references/authoring-patterns.md).
   - Export source-owned named parts with `data-slot`, `className` merging, prop/ref pass-through, and minimal behavior props.
5. Review before finishing:
   - Use [references/review-checklist.md](references/review-checklist.md).
   - Verify typecheck, lint, story/browser behavior, keyboard support, focus, accessible names, and responsive states when relevant.

## Enforcement Rules

- Prefer compound parts and `children` over prop-heavy wrapper APIs. Do not create `title`, `description`, `actions`, `icon`, `isLoading`, or layout props when named subcomponents express the same structure better.
- Keep acceptable props narrow: DOM props, `className`, `children`, `asChild`, controlled state, event handlers, accessibility props, and intentional variants such as `variant` or `size`.
- Use existing accessible primitives for complex behavior such as dialogs, menus, popovers, tabs, selects, tooltips, comboboxes, accordions, and roving focus.
- Preserve primitive contracts. Custom slotted children must spread incoming props and support refs according to the project's React version.
- Add `data-slot` to every exported part, plus state/variant data attributes when useful for styling and tests.
- Keep state local unless parts must coordinate. Use scoped context only for compound coordination and fail loudly when a required part is used outside its root.
- Add `"use client"` only when the component uses hooks, events, browser APIs, or client-only primitives.
- Do not hide required accessibility behind convenience defaults that callers cannot inspect or override.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [DobroslavRadosavljevic](https://github.com/DobroslavRadosavljevic)
- **Source:** [DobroslavRadosavljevic/skills](https://github.com/DobroslavRadosavljevic/skills)
- **License:** MIT
- **Homepage:** https://dobroslav.dev

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-dobroslavradosavljevic-skills-compound-ui
- Seller: https://agentstack.voostack.com/s/dobroslavradosavljevic
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.