Creative Tim UI Blocks
creativetimofficial/ui
Helps install, generate and review Creative Tim UI blocks: shadcn/ui-based React and Tailwind sections that follow a restrained, production-minded design philosophy.
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…
Install Tonic UI Slots
$ npx skills add trendmicro-frontend/tonic-ui --skill tonic-ui-slots -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install trendmicro-frontend/tonic-ui tonic-ui-slots --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/trendmicro-frontend/tonic-ui.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/tonic-ui-slots .claude/skills/tonic-ui-slots && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "tonic-ui-slots" agent skill from https://github.com/trendmicro-frontend/tonic-ui/tree/main/.agents/skills/tonic-ui-slots into .claude/skills/tonic-ui-slots/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "tonic-ui-slots", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/trendmicro-frontend/tonic-ui/tree/main/.agents/skills/tonic-ui-slotsType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add trendmicro-frontend/tonic-ui --skill tonic-ui-slots -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install trendmicro-frontend/tonic-ui tonic-ui-slots --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/trendmicro-frontend/tonic-ui.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/tonic-ui-slots .agents/skills/tonic-ui-slots && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "tonic-ui-slots" agent skill from https://github.com/trendmicro-frontend/tonic-ui/tree/main/.agents/skills/tonic-ui-slots into .agents/skills/tonic-ui-slots/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "tonic-ui-slots", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add trendmicro-frontend/tonic-ui --skill tonic-ui-slots -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install trendmicro-frontend/tonic-ui tonic-ui-slots --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/trendmicro-frontend/tonic-ui.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/tonic-ui-slots .cursor/skills/tonic-ui-slots && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "tonic-ui-slots" agent skill from https://github.com/trendmicro-frontend/tonic-ui/tree/main/.agents/skills/tonic-ui-slots into .cursor/skills/tonic-ui-slots/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "tonic-ui-slots", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/trendmicro-frontend/tonic-ui.git --path .agents/skills/tonic-ui-slots--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add trendmicro-frontend/tonic-ui --skill tonic-ui-slots -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install trendmicro-frontend/tonic-ui tonic-ui-slots --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/trendmicro-frontend/tonic-ui.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/tonic-ui-slots .gemini/skills/tonic-ui-slots && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "tonic-ui-slots" agent skill from https://github.com/trendmicro-frontend/tonic-ui/tree/main/.agents/skills/tonic-ui-slots into .gemini/skills/tonic-ui-slots/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "tonic-ui-slots", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install trendmicro-frontend/tonic-ui tonic-ui-slotsInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add trendmicro-frontend/tonic-ui --skill tonic-ui-slots -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/trendmicro-frontend/tonic-ui.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/tonic-ui-slots .github/skills/tonic-ui-slots && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "tonic-ui-slots" agent skill from https://github.com/trendmicro-frontend/tonic-ui/tree/main/.agents/skills/tonic-ui-slots into .github/skills/tonic-ui-slots/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "tonic-ui-slots", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add trendmicro-frontend/tonic-ui --skill tonic-ui-slots -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install trendmicro-frontend/tonic-ui tonic-ui-slots --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/trendmicro-frontend/tonic-ui.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/tonic-ui-slots .opencode/skills/tonic-ui-slots && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "tonic-ui-slots" agent skill from https://github.com/trendmicro-frontend/tonic-ui/tree/main/.agents/skills/tonic-ui-slots into .opencode/skills/tonic-ui-slots/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "tonic-ui-slots", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
tonic-ui-slots- GitHub stars
- 133
- Token cost
- ~1.3k tokens
- SKILL.md length
- 547 words
- Files
- 3 (incl. references)
- Skills in repo
- 5
- Repo updated
- First seen
- Licence
- MIT
At a glance
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…
- Works in 4 steps: Read the component and its existing… → Read API and handler authoring before… → For a legacy-prop migration, also read… → …
- It even when the user only mentions slots
- SKILL.md covers When to Use, Workflow and References, Current Integration Status and API Invariants, plus 1 more section
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Tonic UI Slots is an agent skill from trendmicro-frontend/tonic-ui. 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…
Its SKILL.md is about 1.3k tokens, which your agent loads only when the skill is triggered. The skill folder holds 3 other files, including reference files (for example `references/api.md` and `references/migration.md`).
It sits in Frontend & Design, covering React components and Design systems. It works with React. The repository describes itself as: Tonic UI is a UI component library for React, built with Emotion and Styled System. It is designed to be easy to use and easy to customize. The licence is MIT.
When your agent uses it
- It even when the user only mentions slots
- Replace the transition/popper/arrow
- Migrate the Component prop while working on a React component library — even if they dont name useSlot explicitly
Example prompts
- “slotProps”
- “useSlot”
- “swappable part”
- “/tonic-ui-slots”
Workflow steps
4 steps, taken from the first numbered list in SKILL.md.
- Read the component and its existing handler chains before changing it.
- Read API and handler authoring before wiring or reviewing
- For a legacy-prop migration, also read migration examples
- Apply the invariants below, then exercise the changed consumer behavior.
What it can do on your machine
Read from SKILL.md and the folder at commit 7e7181f. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Tonic UI Slots loads about 1.3k tokens when it runs, and up to ~6.4k if it reads all its reference files. Until then it costs about 220 tokens; SKILL.md has 547 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from trendmicro-frontend/tonic-ui at commit 7e7181f, republished under its MIT licence (© trendmicro-frontend). 547 words, ~1,309 tokens.
Download SKILL.mdSave it as
.claude/skills/tonic-ui-slots/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.- name
- tonic-ui-slots
- description
- 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.
Tonic UI Slots
The slots / slotProps API gives consumers granular control over a component's internal parts — slots replaces the element rendered for a part, slotProps merges extra props into it — without forking the component. Internally, each slot is wired with the useSlot hook.
This skill covers both authoring slots on a component and migrating the legacy *Component / *Props prop pairs (e.g. TransitionComponent / TransitionProps, PopperComponent / PopperProps) to the slots API.
When to Use
- Adding slot support to a new or existing component (wire an internal part with
useSlotso it can be replaced viaslots.xor configured viaslotProps.x) - Authoring the internal
props, handler chaining, and slot resolution for a slot - Migrating a component from the deprecated
*Component/*Propspairs toslots/slotProps.
Workflow and References
Paths starting with packages/ are relative to the repository root; component
paths such as modal/ModalContent.js are relative to packages/react/src/.
The reference links below are relative to this skill directory, not the CWD.
- Read the component and its existing handler chains before changing it.
- Read API and handler authoring before wiring or reviewing a slot. It defines prop merging, composed refs/styles, imports, and warnings.
- For a legacy-prop migration, also read migration examples before editing. Preserve context fallbacks, render-prop children, parent threading, deprecation warnings, and explicitly merged arrays.
- Apply the invariants below, then exercise the changed consumer behavior.
Current Integration Status
Full __sx integration is not complete in this Tonic UI checkout, but the
useSlot contract below is implemented here: packages/react/src/slot/useSlot.js
composes both ref (via useMergeRefs) and __sx (via composeSx), and the
composition is covered by packages/react/src/slot/__tests__/useSlot.test.js.
The remaining gap is repo-wide component migration, not the hook. Inspect the
affected implementation before relying on it, and do not silently expand a slot
task into a styling integration change.
Show full SKILL.md (252 more words)Show less
API Invariants
useSlotreturns[ElementType, mergedProps]. Import it as a named export: internallyimport { useSlot } from '../slot'; externally from@tonic-ui/react.- Ordinary
slotPropsoverride internalprops; refs are composed. - Slot style composition: put base styling in
props.__sx, and letuseSlotcompose it below the slot's incoming__sx, emitting__sxonly when supplied.__sxis emitted only when at least one side supplies it. - Legacy and new props merge as
{ ...XProps, ...slotProps.x }; element types resolve asslots.x ?? XComponent ?? Default. Do not replace legacy props with??. - A new slot with no legacy props accepts
slotProps.xdirectly. Undefined slot props are valid; only an undefined resolved element causes a dev warning.
Reference Implementation and Required Behavior
ModalContent (packages/react/src/modal/ModalContent.js) is the canonical example.
Key rules carried from the migration:
slots.transitionoverridesTransitionComponent— element resolves by precedence (slots.transition ?? TransitionComponent ?? Default)slotProps.transitionmerges overTransitionProps— props are merged, new wins ({ ...TransitionProps, ...slotProps.transition })inis always set after{...transitionSlotProps}— component owns open/close state- The component's forwarded
refgoes insideprops(props: { ref: combinedRef, ... }) - Static internal props (ref, aria attrs, role, tabIndex, appear) go in
props - Computed context-derived props (e.g.
direction,easing,timeout) go inprops - DOM event handlers go after the spread using
callEventHandlers(transitionSlotProps.handler, internalFn) - Lifecycle callbacks (onExited, onEnter) go after the spread using
callAll(internalFn, transitionSlotProps.handler) - Array props that must merge (e.g. Popper
modifiers) go after the spread with explicit merge useSlotis now exported from the publishedreactpackage (@tonic-ui/react); within thereactpackage, import from../slot(internal path)
© trendmicro-frontend, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 2 other files (references) in .agents/skills/tonic-ui-slots of trendmicro-frontend/tonic-ui.
- SKILL.md
- references/api.md
- references/migration.md
Open the folder on GitHubat commit 7e7181f
Compare with similar skills
Tonic UI Slots next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Tonic UI Slots this skilltrendmicro-frontend/tonic-ui | 133 | — | ~1.3k | Automated safety check: Pass | MIT | |
| Creative Tim UI Blockscreativetimofficial/ui | 12k | — | ~2.1k | Automated safety check: Notes | MIT | |
| Skillshare UI Website Stylerunkids/skillshare | 2.8k | — | ~4.5k | Automated safety check: Pass | MIT | |
| Animated React Component LibrariesHainrixz/editor-pro-max | 264 | 1 repos | ~5.7k | Automated safety check: Pass | Custom licence | |
| Fast Typescript Checkinternet-development/www-sacred | 1.6k | — | ~4.3k | Automated safety check: Pass | MIT | |
| React To Solidcarere/zaidan | 147 | 1 repos | ~1.6k | Automated safety check: Pass | MIT |
Similar skills
Skillshare UI Website Style
runkids/skillshare
Skillshare frontend design system for the React dashboard (ui/) and Docusaurus website (website/).
Animated React Component Libraries
Hainrixz/editor-pro-max
Helps choose and drop in animated React components from Magic UI and React Bits for landing pages, marketing sites and dashboards, instead of hand-coding animations.
Fast Typescript Check
internet-development/www-sacred
Keep www-sacred's TypeScript fast to type-check and fast to run.
React To Solid
carere/zaidan
React-to-SolidJS transformation patterns for porting shadcn-style React components, examples, docs snippets, and blocks into Zaidan.
Wonder Blocks
Khan/wonder-blocks
Implements user interfaces using the Wonder Blocks (WB) design system — Khan Academy's React component library.
More from trendmicro-frontend/tonic-ui
Tonic UI Sx
trendmicro-frontend/tonic-ui
Choose sx, sx, and composeSx when authoring or reviewing Tonic UI Box-based components, including wrappers and headless-library prop getters.
Tonic UI Patterns
trendmicro-frontend/tonic-ui
Apply Tonic UI repository conventions when creating or reviewing components, hooks, exports, and commit messages.
Tonic UI PR
trendmicro-frontend/tonic-ui
Generate PR descriptions and changeset entries. An agent skill from trendmicro-frontend/tonic-ui.
Tonic UI Types
trendmicro-frontend/tonic-ui
A skill your agent uses when adding JSDoc type definitions to React components in Tonic UI.
Related
Works with
Categories
Questions about Tonic UI Slots
What does Tonic UI Slots do?
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…. Tonic UI Slots is an agent skill from trendmicro-frontend/tonic-ui.x merges props into it.
When should I use Tonic UI Slots?
Tonic UI Slots fits situations like: it even when the user only mentions slots; replace the transition/popper/arrow; migrate the Component prop while working on a React component library — even if they dont name useSlot explicitly.
How do I install Tonic UI Slots in Claude Code?
Run `npx skills add trendmicro-frontend/tonic-ui --skill tonic-ui-slots -a claude-code`. Or copy the skill folder (.agents/skills/tonic-ui-slots in trendmicro-frontend/tonic-ui) into .claude/skills/tonic-ui-slots in your project. Claude Code loads it when a task matches its description.
How do I install Tonic UI Slots in Codex?
Run `npx skills add trendmicro-frontend/tonic-ui --skill tonic-ui-slots -a codex`. Or copy the skill folder (.agents/skills/tonic-ui-slots in trendmicro-frontend/tonic-ui) into .agents/skills/tonic-ui-slots in your project. Codex loads it when a task matches its description.
Can I use Tonic UI Slots in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add trendmicro-frontend/tonic-ui --skill tonic-ui-slots -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/tonic-ui-slots, .gemini/skills/tonic-ui-slots, .github/skills/tonic-ui-slots and .opencode/skills/tonic-ui-slots in your project.
What does Tonic UI Slots need to run?
SKILL.md names no scripts, command-line tools or credentials: Tonic UI Slots is instructions for the agent only.
Does Tonic UI Slots access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Tonic UI Slots safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Tonic UI Slots use?
Tonic UI Slots is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Tonic UI Slots use?
About 1.3k tokens (SKILL.md is roughly 5.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 5.1k tokens, read only when the agent opens those files.
What are the alternatives to Tonic UI Slots?
Skills that share tags, products or a category with Tonic UI Slots: Creative Tim UI Blocks (creativetimofficial/ui, 12k stars), Skillshare UI Website Style (runkids/skillshare, 2.8k stars), Animated React Component Libraries (Hainrixz/editor-pro-max, 264 stars) and Fast Typescript Check (internet-development/www-sacred, 1.6k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Tonic UI Slots?
trendmicro-frontend (a GitHub organization) maintains it in trendmicro-frontend/tonic-ui, which has 133 GitHub stars. The repository holds 5 skills in this directory. The repository was last updated on October 8, 2026.
Source: trendmicro-frontend/tonic-ui on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.