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 Patterns

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

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

MITAuto-check passedDevelopment

Install Tonic UI Patterns

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

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

GitHub CLI
$ gh skill install trendmicro-frontend/tonic-ui tonic-ui-patterns --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-patterns .claude/skills/tonic-ui-patterns && 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-patterns
GitHub stars
133
Token cost
~1.6k tokens
SKILL.md length
403 words
Files
1
Skills in repo
4
Repo updated
First seen
Licence
MIT

At a glance

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

  • Works in 6 steps: Create component source files → Register in package index → Update package export test → …
  • Tasks that involve React components
  • SKILL.md covers Commit Conventions, Monorepo Structure, Component Architecture and Adding a New Component, plus 4 more sections
  • Calls yarn

What it does

Tonic UI Patterns is an agent skill from trendmicro-frontend/tonic-ui. Coding patterns extracted from tonic-ui repository

Its SKILL.md is about 1.6k 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 Development, covering React components. 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

  • Tasks that involve React components

Example prompts

  • “/tonic-ui-patterns”

Workflow steps

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

  1. Create component source files
  2. Register in package index
  3. Update package export test
  4. Create documentation pages
  5. Register in sidebar
  6. Create changeset

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 Patterns loads about 1.6k tokens when it runs. Until then it costs about 17 tokens; SKILL.md has 403 words of instructions outside code blocks.

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

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). 403 words, ~1,588 tokens.

Download SKILL.mdSave it as .claude/skills/tonic-ui-patterns/SKILL.md (or your agent's skills folder).
name
tonic-ui-patterns
description
Coding patterns extracted from tonic-ui repository
version
1.0.0
source
local-git-analysis
analyzed_commits
200

Tonic UI Patterns

Commit Conventions

This project uses conventional commits with scope:

TypeUsageFrequency
choreReleases, deps, tooling~36%
featNew features~23%
docsDocumentation~18%
ciCI/CD workflows~12%
fixBug fixes~7%
testTest additions~2%
refactorCode restructuring~1%

Scope format: type(package/component) — e.g., feat(react/menu), fix(react/Checkbox), chore(deps-dev)

Common scopes:

  • react / react/<component> — Main component package
  • react-hooks — Hooks package
  • react-icons — Icons package
  • mcp — MCP server package
  • deps / deps-dev — Dependency bumps
  • release — Version releases
  • changesets — Changeset config

PR references: Commit messages include (#<number>) at the end.

Monorepo Structure

packages/
├── changelog-github/   # Custom changelog generator
├── codemod/            # Code migration tools
├── mcp/                # MCP server (TypeScript)
├── react/              # Main component library (JavaScript)
├── react-base/         # Base primitives (Box)
├── react-docs/         # Next.js documentation site
├── react-hooks/        # Shared hooks
├── react-icons/        # SVG icon components
├── styled-system/      # Styled System utilities
├── theme/              # Design tokens
└── utils/              # Shared utilities

Key: packages/react is the most frequently modified package (~38 commits in last 200).

Component Architecture

File Structure Pattern

Each component lives in packages/react/src/<component-name>/:

<component-name>/
├── ComponentName.js        # Main component (forwardRef + Box base)
├── index.js                # Barrel exports
├── styles.js               # Style hooks (useComponentNameStyle)
├── context.js              # React context (if compound component)
├── useComponentName.js     # Context consumer hook
├── withComponentName.js    # HOC for context injection (optional)
├── constants.js            # Constants (variants, sizes)
└── __tests__/
    ├── ComponentName.test.js
    └── __snapshots__/
        └── ComponentName.test.js.snap
Component Pattern

Components use forwardRef with useDefaultProps:

javascript
import React, { forwardRef } from 'react';
import { useDefaultProps } from '../default-props';
import { useComponentStyle } from './styles';

const Component = forwardRef((inProps, ref) => {
  const {
    prop1,
    prop2,
    ...rest
  } = useDefaultProps({ props: inProps, name: 'Component' });

  const styleProps = useComponentStyle({ prop1 });

  return (
    <Box ref={ref} {...styleProps} {...rest} />
  );
});

Component.displayName = 'Component';

export default Component;
Compound Component Pattern

For related component groups (Menu, FormControl, Accordion):

  1. Context file (context.js) — createContext()
  2. Provider component — wraps children with context
  3. Consumer hook (useComponentName.js) — useContext(ComponentContext)
  4. HOC (withComponentName.js) — injects context props (optional)
  5. Barrel exports (index.js) — named exports for all sub-components
Style Pattern

Styles use hooks that return style objects using Styled System tokens:

javascript
import { useColorStyle } from '../color-style';

const useComponentStyle = ({ variant }) => {
  const [colorStyle] = useColorStyle();

  return {
    color: colorStyle.color.primary,
    fontSize: 'sm',
    px: '2x',
    py: '1x',
  };
};

Token formats: '1x', '2x', 'sm', 'md', 'lg' (Styled System spacing/sizing).

Adding a New Component

Based on recent features (Highlight, Mark, FormControl), the workflow is:

1. Create component source files
packages/react/src/<component-name>/
├── ComponentName.js
├── index.js
├── styles.js
└── __tests__/
    └── ComponentName.test.js
2. Register in package index

Add to packages/react/src/index.js:

javascript
export { ComponentName } from './<component-name>';
3. Update package export test

Add to packages/react/__tests__/index.test.js to verify the export exists.

4. Create documentation pages

Add to packages/react-docs/pages/components/<component-name>/:

  • index.page.mdx — Main doc page
  • Individual example files (.js) for each usage pattern
Show full SKILL.md (160 more words)Show less
5. Register in sidebar

Add route to packages/react-docs/config/sidebar-routes.js.

6. Create changeset

Add .changeset/<changeset-name>.md:

markdown
---
"@tonic-ui/react": minor
---

feat: Add `ComponentName` component

Files That Co-Change

These files typically change together:

  • packages/react/src/index.js + packages/react/__tests__/index.test.js (new exports)
  • packages/react-docs/config/sidebar-routes.js + packages/react-docs/pages/components/*/index.page.mdx (new docs)
  • packages/react/package.json + packages/react/CHANGELOG.md + .changeset/*.md (releases)

Testing Patterns

  • Framework: Jest with React Testing Library
  • Location: __tests__/ directories co-located with source
  • Naming: ComponentName.test.js
  • Snapshots: Used extensively for visual regression (__snapshots__/)
  • Accessibility: Tests use @tonic-ui/react-base/test-utils/accessibility utilities
  • Test command: yarn test

Changesets & Releases

  • Uses @changesets/cli for versioning
  • Base branch: v2
  • Changelog: Custom @tonic-ui/changelog-github generator
  • Access: public (npm)
  • Changeset files go in .changeset/ with descriptive names (e.g., tonic-ui-pr-1085.md)

Key Conventions

  1. JavaScript only — No TypeScript for components; .d.ts files for type definitions
  2. forwardRef everywhere — All components forward refs
  3. Styled System props — Style via props (px, py, color, bg), not CSS classes
  4. Color tokens — Use colorStyle.color.primary, colorStyle.color.secondary, colorStyle.color.error
  5. useDefaultProps — Components use this for default prop values
  6. displayName — Always set on components
  7. Named exports — Barrel files use named export { X } from './X' pattern

© 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-patterns of trendmicro-frontend/tonic-ui.

Open the folder on GitHubat commit b9a797e

Compare with similar skills

Tonic UI Patterns 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 Patterns compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Tonic UI Patterns this skilltrendmicro-frontend/tonic-ui133—~1.6kAutomated safety check: PassMIT
@pierre/diffs Code Renderingpierrecomputer/pierre6.2k2 repos~803Automated safety check: PassApache-2.0
OpenTUI Terminal Interfacescline/cline70k—~1.9kAutomated safety check: PassApache-2.0
No Use Effectmattiacerutti/supernova1872 repos~1.7kAutomated safety check: PassMIT
React Best Practicesshapeshift/web2061 repos~2kAutomated safety check: PassMIT
Migrate Componentasyncapi/generator1.1k—~3kAutomated safety check: PassApache-2.0

Similar skills

  • @pierre/diffs Code Rendering

    pierrecomputer/pierre

    Guides an agent through using @pierre/diffs to render syntax-highlighted files and diffs, and to build editing and review surfaces in React or plain JavaScript.

    6.2k GitHub starsUsed in 2 repos~803 tokens
    DevelopmentAuto-check passed

  • OpenTUI Terminal Interfaces

    cline/cline

    Helps build terminal user interfaces with OpenTUI using its core imperative API or its React and Solid reconcilers, with references for layout, keyboard, animation and testing.

    70k GitHub stars~1.9k tokensUpdated today
    DevelopmentAuto-check passed

  • No Use Effect

    mattiacerutti/supernova

    Enforce the no-useEffect rule when writing or reviewing React code.

    187 GitHub starsUsed in 2 repos~1.7k tokens
    DevelopmentAuto-check passed

  • React Best Practices

    shapeshift/web

    Comprehensive React and Next.js performance optimization guide with 40+ rules for eliminating waterfalls, optimizing bundles, and improving rendering.

    206 GitHub starsUsed in 1 repo~2k tokens
    DevelopmentAuto-check passed

  • Migrate Component

    asyncapi/generator

    Promote a duplicated React/JSX template-local component into the shared @asyncapi/generator-components package.

    1.1k GitHub stars~3k tokensUpdated 3 days ago
    DevelopmentAuto-check passed

  • Data Client React

    reactive/data-client

    Use @data-client/react hooks for data fetching, mutations, and rendering - useSuspense, useFetch, useQuery, useCache, useLive, useDLE, useSubscription, useController, DataProvider, AsyncBoundary…

    2k GitHub stars~1.9k tokensUpdated today
    DevelopmentAuto-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 Types

    trendmicro-frontend/tonic-ui

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

    133 GitHub stars~1.8k 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

Works with

Categories

Questions about Tonic UI Patterns

What does Tonic UI Patterns do?

Coding patterns extracted from tonic-ui repository. An agent skill from trendmicro-frontend/tonic-ui. Tonic UI Patterns is an agent skill from trendmicro-frontend/tonic-ui.

When should I use Tonic UI Patterns?

Tonic UI Patterns fits situations like: tasks that involve React components.

How do I install Tonic UI Patterns in Claude Code?

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

How do I install Tonic UI Patterns in Codex?

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

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

What does Tonic UI Patterns need to run?

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

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

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

About 1.6k tokens (SKILL.md is roughly 6.4k 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 Patterns?

Skills that share tags, products or a category with Tonic UI Patterns: @pierre/diffs Code Rendering (pierrecomputer/pierre, 6.2k stars), OpenTUI Terminal Interfaces (cline/cline, 70k stars), No Use Effect (mattiacerutti/supernova, 187 stars) and React Best Practices (shapeshift/web, 206 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Tonic UI Patterns?

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.