Create Component

Workflow

1. Read the applicable AGENTS.md, package exports, and nearby components before choosing an API.
2. Use a simple component by default. Use a compound API only when related children need shared state, coordinated behavior, or a clearer semantic tree. Read references/compound-components.md first.
3. Create the component under its category and separate the root, reusable child renderers, JSX, styles, public types, state hooks, and pure utilities by responsibility. Read references/architecture.md.
4. Put Tailwind classes in styles.ts. Declare every supported visual style as an invariant class or a typed semantic variant; do not expose className as a styling escape hatch. Add cursor-pointer to every clickable control. For tailwind-variants, use the tailwind-variants-best-practice skill and read references/styling.md.
5. Keep the public API typed, semantic, and accessible. Forward native element props deliberately; supply accessible labels for icon-only controls.
6. Export the public component from its category and package barrels, then run the narrowest type and lint checks.

Guardrails