# React Compound Components

> React compound components pattern (safe, minimal context, ergonomic API)

- Skill: `oalkabouss/react-compound-components` (Agent Skill)
- Install (CLI): `npx skillmds@latest add oalkabouss/react-compound-components`
- Raw SKILL.md: https://api.skillmd.com/api/skills/oalkabouss/react-compound-components/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: MIT
- Author: oalkabouss (https://skillmd.com/u/oalkabouss)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/oalkabouss/react-compound-components

---

## What I do

Je fournis un guide pour implémenter des **Compound Components** sûrs :
- contexte minimal
- API ergonomique
- erreurs explicites

## Minimal template

```tsx
type Ctx = { id: string };
const Ctx = createContext<Ctx | null>(null);

export function Root({ id, children }: { id: string; children: ReactNode }) {
  return <Ctx.Provider value={{ id }}>{children}</Ctx.Provider>;
}

Root.Label = function Label({ children }: { children: ReactNode }) {
  const ctx = useContext(Ctx);
  if (!ctx) throw new Error('Root.Label must be used within Root');
  return <label htmlFor={ctx.id}>{children}</label>;
};
```

## When NOT to use
- Si l'état partagé devient complexe : passer à props explicites + hook.