New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Tonic UI Types

by trendmicro-frontend in trendmicro-frontend/tonic-ui

A skill your agent uses when adding JSDoc type definitions to React components in Tonic UI.

MITAuto-check passedFrontend & Design

Install Tonic UI Types

skills CLI
$ npx skills add trendmicro-frontend/tonic-ui --skill tonic-ui-types -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install trendmicro-frontend/tonic-ui tonic-ui-types --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/trendmicro-frontend/tonic-ui.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/tonic-ui-types .claude/skills/tonic-ui-types && rm -rf skills-src

Use ~/.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/

Facts

Skill name
tonic-ui-types
GitHub stars
133
Token cost
~1.8k tokens
SKILL.md length
592 words
Files
1
Skills in repo
4
Repo updated
First seen
Licence
MIT

At a glance

A skill your agent uses when adding JSDoc type definitions to React components in Tonic UI.

  • Works in 3 steps: Add the @typedef Block → Add the @type Annotation → Add Type Test File
  • Adding JSDoc type definitions to React components in Tonic UI
  • SKILL.md covers Overview, Prerequisites, Utility Types and Workflow, plus 3 more sections
  • Calls yarn

What it does

Tonic UI Types is an agent skill from trendmicro-frontend/tonic-ui. 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.

Its SKILL.md is about 1.8k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering React components and Technical documentation. 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

  • Adding JSDoc type definitions to React components in Tonic UI
  • Include add type definitions
  • Add JSDoc types
  • Document component props

Example prompts

  • “add type definitions”
  • “add JSDoc types”
  • “document component props”
  • “/tonic-ui-types”

Workflow steps

3 steps, taken from the step headings in SKILL.md.

  1. Add the @typedef Block
  2. Add the @type Annotation
  3. Add Type Test File

What it can do on your machine

Read from SKILL.md and the folder at commit b9a797e. 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

    Shell commands in SKILL.md call:

    • yarn

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use yarn, which can reach the network depending on how they are called.

    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 Types loads about 1.8k tokens when it runs. Until then it costs about 61 tokens; SKILL.md has 592 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~61
When it runs · the whole SKILL.md, loaded when a task matches
~1.8k

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 b9a797e, republished under its MIT licence (© trendmicro-frontend). 592 words, ~1,814 tokens.

Download SKILL.mdSave it as .claude/skills/tonic-ui-types/SKILL.md (or your agent's skills folder).
name
tonic-ui-types
description
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.

Add Type Definitions to React Components

This skill provides guidelines for adding JSDoc type definitions to React components in the Tonic UI design system.

Overview

Tonic UI uses JSDoc annotations (@typedef and @type) with global utility types to provide type information for React components. This enables better IDE support, documentation generation, and type checking.

Prerequisites

Before adding type definitions:

  1. Read the component file to understand its implementation — props, defaults, rendering logic.
  2. Identify the component pattern — forwardRef((inProps, ref) => ...) or plain (inProps) => ....
  3. Check if rest props are spread onto a native element (e.g. <Box as="button" {...rest} />) — if so, identify which HTML element type it renders (e.g. 'div', 'button'). This determines the first type parameter of ForwardRefComponent.
  4. Read the component documentation — Check packages/react-docs/pages/components/[component-name]/index.page.mdx
    • Locate the Props table in the ## Props section
    • Document all prop names, types, defaults, and descriptions
    • Use exact descriptions from the documentation
    • If no documentation exists, analyze the component implementation
    • If docs contradict the implementation, trust the implementation.

Utility Types

Two global utility types are defined in packages/react/global.d.ts. Always use these instead of writing verbose inline types.

Utility TypeUse WhenExample
ForwardRefComponent<E, P, R?>forwardRef componentForwardRefComponent<'button', ButtonProps>
StyledFC<P>Functional component (no ref forwarding) with StylePropsStyledFC<TooltipProps>
  • E — Intrinsic element type string (e.g. 'div', 'button', 'svg').
  • P — Custom component props typedef.
  • R — Ref element type. Defaults to HTMLElement. Only specify when different (e.g. SVGSVGElement).
Decision Tree
Is it a forwardRef component?
├─ Yes → ForwardRefComponent<'element', Props>
└─ No  → Does it accept StyleProps?
         ├─ Yes → StyledFC<Props>
         └─ No  → React.FC<Props>  (plain React type, no utility needed)

Workflow

Step 1: Add the @typedef Block

Add a JSDoc @typedef block before the component declaration. Include all custom props with their types and descriptions.

javascript
/**
 * @typedef {Object} ComponentNameProps
 * @property {type} [propName] - Description of the property.
 * @property {type} [propName=default] - Description with default value.
 */

Property type reference:

  • {React.ReactNode} - React children or renderable content
  • {boolean} - Boolean flags
  • {string} - String values
  • {number} - Numeric values
  • {(event: React.MouseEvent<HTMLButtonElement>) => void} - Callback with typed signature
  • {'option1' | 'option2'} - String enums
  • {'sm' | 'md' | 'lg'} - Size variants
  • {React.ReactNode | React.ReactNode[]} - Single or array
  • {React.RefObject<HTMLElement>} - Ref objects

Forbidden types — never use these; always spell out the full shape:

  • {any}, {unknown}, {function}, {Object}, {object}
  • {Record<string, unknown>}, {{ [key: string]: unknown }}
Step 2: Add the @type Annotation

Add a @type annotation immediately before the component declaration using the appropriate utility type.

ForwardRefComponent — forwardRef + rest props spread onto a native element. The element type ('button' below) determines which native HTML props the user can pass:

javascript
/**
 * @type {ForwardRefComponent<'button', ButtonProps>}
 */
const Button = forwardRef((inProps, ref) => {
  const { disabled, selected, size, variant, ...rest } = useDefaultProps({ props: inProps, name: 'Button' });
  // ...
  return (
    <ButtonBase
      ref={ref}
      as="button"        // ← renders a <button> → element type is 'button'
      {...rest}           // ← rest props spread onto native element → ForwardRefComponent
    />
  );
});

StyledFC — no forwardRef, no ref parameter:

javascript
/**
 * @type {StyledFC<TooltipProps>}
 */
const Tooltip = (inProps) => {  // ← plain function, no ref → StyledFC
  const { children, label, placement, ...rest } = useDefaultProps({ props: inProps, name: 'Tooltip' });
  // ...
  return (
    <TooltipContext.Provider value={context}>
      <TooltipTrigger>{children}</TooltipTrigger>
      <TooltipContent {...rest}>{label}</TooltipContent>
    </TooltipContext.Provider>
  );
};

If neither utility type fits (e.g. generic type parameters), define the type inline. See src/tabs/Tabs.js for an example.

Show full SKILL.md (206 more words)Show less
Step 3: Add Type Test File

Create packages/react/__type-tests__/components/{component-name}.test-d.tsx:

tsx
import React, { createRef } from "react";
import { ComponentName } from "@tonic-ui/react";

// Basic usage
<ComponentName>content</ComponentName>;

// With custom props
<ComponentName propName="value" />;

// With ref
const ref = createRef<HTMLElement>();
<ComponentName ref={ref} />;

// With style props
<ComponentName mt={2} px="4x" />;

The type tests are compiled with tsconfig.json in the __type-tests__/ directory using strict: true and noEmit: true — they only need to compile without errors.

Type test rules:

  1. Never manually specify types — all types must be inferred from JSDoc. This verifies JSDoc correctness.
  2. Exception: createRef<T>() — ref type parameters are needed to test ref assignability.
  3. Use @ts-expect-error for negative tests — verify invalid values produce type errors.

Implementation Rules

  1. Implementation is the source of truth — trust the code over docs when they disagree.
  2. Use brackets for optional props — [propName] indicates optional.
  3. Document defaults — [propName=default] syntax.
  4. Align with useDefaultProps — verify defaults match.
  5. Callback signatures must be typed — e.g. {React.ChangeEventHandler<HTMLInputElement>}, never {function}.
  6. Hook return types must be typed — define a @typedef for the return shape.

Validation

After modifying JSDoc type definitions:

  1. Build: yarn build (generates .d.ts from JSDoc)
  2. Type-check: yarn test:types (validates against .test-d.tsx files)

Reference Files

Well-typed components to use as reference:

  • src/link/Link.js — ForwardRefComponent<'a', LinkProps>
  • src/button/Button.js — ForwardRefComponent<'button', ButtonProps>
  • src/checkbox/Checkbox.js — ForwardRefComponent<'label', CheckboxProps> (has prop conflicts, handled automatically)
  • src/accordion/AccordionBody.js — ForwardRefComponent<'div', AccordionBodyProps> (wrapper component)
  • src/tooltip/Tooltip.js — StyledFC<TooltipProps> (no ref forwarding)
  • src/icon/Icon.js — ForwardRefComponent<'svg', IconProps, SVGSVGElement> (custom ref type)
  • src/tabs/Tabs.js — Generic component (inline type, not using utility)

© 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

Just SKILL.md in .claude/skills/tonic-ui-types of trendmicro-frontend/tonic-ui.

Open the folder on GitHubat commit b9a797e

Compare with similar skills

Tonic UI Types 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.

Tonic UI Types compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Tonic UI Types this skilltrendmicro-frontend/tonic-ui133—~1.8kAutomated safety check: PassMIT
React Render Types CompositionHorusGoul/eslint-plugin-react-render-types111—~1.1kAutomated safety check: PassMIT
Figma Implement Componentbitovi/ai-enablement-prompts121—~1.8kAutomated safety check: PassMIT
Figma Implement Componentbitovi/ai-enablement-prompts121—~1.5kAutomated safety check: PassMIT
Web Artifacts Builderanthropics/skills180k41 repos~769Automated safety check: PassApache-2.0
React Router Developmentremix-run/react-router57k1 repos~1.5kAutomated safety check: PassMIT

Similar skills

  • React Render Types Composition

    HorusGoul/eslint-plugin-react-render-types

    Composition patterns for building React components with @renders type annotations from eslint-plugin-react-render-types.

    111 GitHub stars~1.1k tokensUpdated 2 mo ago
    Frontend & DesignAuto-check passed

  • Figma Implement Component

    bitovi/ai-enablement-prompts

    Implement React components from Figma designs. An agent skill from bitovi/ai-enablement-prompts.

    121 GitHub stars~1.8k tokensUpdated 27 days ago
    Frontend & DesignAuto-check passed

  • Figma Implement Component

    bitovi/ai-enablement-prompts

    Implement React components from Figma designs. An agent skill from bitovi/ai-enablement-prompts.

    121 GitHub stars~1.5k tokensUpdated 27 days ago
    Frontend & DesignAuto-check passed

  • Web Artifacts Builder

    anthropics/skills

    Official

    Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file.

    180k GitHub starsUsed in 41 repos~769 tokens
    Frontend & DesignAuto-check passed

  • React Router Development

    remix-run/react-router

    Guides work on React Router apps by first identifying whether the app uses Framework, Data or Declarative mode, then loading the matching reference and the installed package docs.

    57k GitHub starsUsed in 1 repo~1.5k tokens
    Frontend & DesignAuto-check passed

  • React UI State Patterns

    ChrisWiles/claude-code-showcase

    Sets patterns for React interfaces: when to show loading spinners or skeletons, how to surface errors, how to disable buttons during async work and how to handle empty lists.

    6.1k GitHub starsUsed in 8 repos~1.6k tokens
    Frontend & DesignAuto-check passed

More from trendmicro-frontend/tonic-ui

  • Tonic UI PR

    trendmicro-frontend/tonic-ui

    Generate PR descriptions and changeset entries. An agent skill from trendmicro-frontend/tonic-ui.

    133 GitHub stars~2.7k tokensUpdated yesterday
    Auto-check passed

  • Tonic UI Slots

    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…

    133 GitHub stars~5.7k tokensUpdated yesterday
    Auto-check passed

  • Tonic UI Patterns

    trendmicro-frontend/tonic-ui

    Coding patterns extracted from tonic-ui repository. An agent skill from trendmicro-frontend/tonic-ui.

    133 GitHub stars~1.6k tokensUpdated yesterday
    Auto-check passed

Works with

Categories

Questions about Tonic UI Types

What does Tonic UI Types do?

A skill your agent uses when adding JSDoc type definitions to React components in Tonic UI. Tonic UI Types is an agent skill from trendmicro-frontend/tonic-ui. Use this skill when adding JSDoc type definitions to React components in Tonic UI.

When should I use Tonic UI Types?

Tonic UI Types fits situations like: adding JSDoc type definitions to React components in Tonic UI; include add type definitions; add JSDoc types; document component props.

How do I install Tonic UI Types in Claude Code?

Run `npx skills add trendmicro-frontend/tonic-ui --skill tonic-ui-types -a claude-code`. Or copy the skill folder (.claude/skills/tonic-ui-types in trendmicro-frontend/tonic-ui) into .claude/skills/tonic-ui-types in your project. Claude Code loads it when a task matches its description.

How do I install Tonic UI Types in Codex?

Run `npx skills add trendmicro-frontend/tonic-ui --skill tonic-ui-types -a codex`. Or copy the skill folder (.claude/skills/tonic-ui-types in trendmicro-frontend/tonic-ui) into .agents/skills/tonic-ui-types in your project. Codex loads it when a task matches its description.

Can I use Tonic UI Types 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-types -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-types, .gemini/skills/tonic-ui-types, .github/skills/tonic-ui-types and .opencode/skills/tonic-ui-types in your project.

What does Tonic UI Types need to run?

Going by SKILL.md and its folder, Tonic UI Types needs the command-line tools its instructions call (yarn).

Does Tonic UI Types 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 Types 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 Types use?

Tonic UI Types 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 Types use?

About 1.8k tokens (SKILL.md is roughly 7.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Tonic UI Types?

Skills that share tags, products or a category with Tonic UI Types: React Render Types Composition (HorusGoul/eslint-plugin-react-render-types, 111 stars), Figma Implement Component (bitovi/ai-enablement-prompts, 121 stars), Figma Implement Component (bitovi/ai-enablement-prompts, 121 stars) and Web Artifacts Builder (anthropics/skills, 180k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Tonic UI Types?

trendmicro-frontend (a GitHub organization) maintains it in trendmicro-frontend/tonic-ui, which has 133 GitHub stars. The repository holds 4 skills in this directory. The repository was last updated on October 7, 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.