tonic-ui

Generate PR descriptions and changeset entries. Use when the user mentions "PR", "pull request", "PR description", "changeset", provides a diff or describes code changes, or asks to draft a merge request. Also trigger for conventional commit message generation.

Author and migrate the slots / slotProps API (the useSlot hook) in this design system's React components — the architecture where slots.x replaces an internal part and slotProps.x merges props into it. Use this whenever you are wiring an internal component part so consumers can swap it via slots.x or configure it via slotProps.x, authoring a slot's props / handler chaining / element resolution, or migrating a component from the deprecated *Component / *Props pairs (TransitionComponent/TransitionProps, PopperComponent/PopperProps, inputComponent/inputProps, arrow, scrollView, etc.) to slots / slotProps. Trigger it even when the user only mentions "slots", "slotProps", "useSlot", "swappable part", "replace the transition/popper/arrow", or "migrate the *Component prop" while working on a React component library — even if they don't name useSlot explicitly.

Decide between Tonic UI's `sx` and `__sx` styling channels (and the `composeSx` fold) when writing or reviewing any component built on `@tonic-ui/react-base`'s `Box` — this covers `@tonic-ui/react` itself and any other package that renders `Box`-based components internally (e.g. `@tonic-ui/react-data-grid`; confirmed real instances of these anti-patterns exist there too, not just in the react package). Use this whenever you are authoring a component's base styles, routing a `useXxxStyle()` hook (or a headless-library prop-getter like react-table's `getRowProps`/`getHeaderProps`) onto a `Box`, choosing whether a style belongs in `sx`, `__sx`, style props, or pseudo props, folding an incoming `__sx`, building a wrapper that overrides a child component (e.g. MenuButton over Button, or a data-grid feature overriding a `@tonic-ui/react` component it wraps), or debugging a consumer override that "doesn't apply" or a wrapper override that gets dropped. Trigger it even when the user only mentions `sx`, `__sx`, `compo

Use this skill when adding JSDoc type definitions to React components in Tonic UI. Triggers include "add type definitions", "add JSDoc types", "document component props", or when creating new components that need type annotations.

Coding patterns extracted from tonic-ui repository