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

React Component Creation

by Opentrons in Opentrons/opentrons

Component creation checklist and ai-client-specific patterns for React .tsx files in opentrons-ai-client/ and protocol-designer/.

Apache-2.0Auto-check passedFrontend & Design

Install React Component Creation

skills CLI
$ npx skills add Opentrons/opentrons --skill react-component-creation -a claude-code

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

GitHub CLI
$ gh skill install Opentrons/opentrons react-component-creation --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/Opentrons/opentrons.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.cursor/skills/react-component-creation .claude/skills/react-component-creation && 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
react-component-creation
GitHub stars
521
Token cost
~461 tokens
SKILL.md length
120 words
Files
1
Skills in repo
17
Repo updated
First seen
Licence
Apache-2.0

At a glance

Component creation checklist and ai-client-specific patterns for React .tsx files in opentrons-ai-client/ and protocol-designer/.

  • Works in 3 steps: Consider the component's purpose,… → Check if a similar component already… → If an existing component can be extended…
  • Creating new React components in these packages
  • SKILL.md covers Before Creating a New Component, Component File Structure and opentrons-ai-client Specifics
  • Calls pnpm

What it does

React Component Creation is an agent skill from Opentrons/opentrons. Component creation checklist and ai-client-specific patterns for React .tsx files in opentrons-ai-client/ and protocol-designer/. Use when creating new React components in these packages.

Its SKILL.md is about 460 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. It works with React. The repository describes itself as: Software for writing protocols and running them on the Opentrons Flex and Opentrons OT-2. The licence is Apache-2.0.

When your agent uses it

  • Creating new React components in these packages
  • Tasks that involve React components

Example prompts

  • “/react-component-creation”

Workflow steps

3 steps, taken from the first numbered list in SKILL.md.

  1. Consider the component's purpose, functionality, and design
  2. Check if a similar component already exists in
  3. If an existing component can be extended or composed, prefer that over creating a new one

What it can do on your machine

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

    • pnpm

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

  • Network

    No URLs in SKILL.md. Its commands use pnpm, 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

React Component Creation loads about 461 tokens when it runs. Until then it costs about 53 tokens; SKILL.md has 120 words of instructions outside code blocks.

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

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 Opentrons/opentrons at commit a14fef9, republished under its Apache-2.0 licence (© Opentrons). 120 words, ~461 tokens.

Download SKILL.mdSave it as .claude/skills/react-component-creation/SKILL.md (or your agent's skills folder).
name
react-component-creation
description
Component creation checklist and ai-client-specific patterns for React .tsx files in opentrons-ai-client/ and protocol-designer/. Use when creating new React components in these packages.

React Component Creation Checklist

General TypeScript, React, styling, testing, and import conventions are in the opentrons-typescript skill. PD-specific architecture is in the protocol-designer skill. CSS Modules details are in the css-modules skill. This file covers the component creation workflow and opentrons-ai-client specifics.

Before Creating a New Component

  1. Consider the component's purpose, functionality, and design
  2. Check if a similar component already exists in:
    • components/src/atoms/, components/src/molecules/, components/src/organisms/ (shared library)
    • <project>/src/components/atoms/, molecules/, organisms/ (project-local)
  3. If an existing component can be extended or composed, prefer that over creating a new one

Component File Structure

ComponentName/
├── index.tsx
├── componentname.module.css
└── __tests__/
    └── ComponentName.test.tsx

opentrons-ai-client Specifics

Path Alias

The ai-client uses /ai-client/ as its path alias (mapped to opentrons-ai-client/src/):

typescript
import { AttachedFileItem } from '/ai-client/atoms/AttachedFileItem'

import type { ChatData } from '/ai-client/resources/types'
Testing

Use renderWithProviders from the ai-client testing utils:

typescript
import { renderWithProviders } from '/ai-client/__testing-utils__'
Running Tests
bash
pnpm vitest opentrons-ai-client/src/path/to/file
pnpm vitest opentrons-ai-client/src/folder/
Running Stylelint
bash
pnpm stylelint opentrons-ai-client/src/path/to/file.module.css

© Opentrons, Apache-2.0. 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 .cursor/skills/react-component-creation of Opentrons/opentrons.

Open the folder on GitHubat commit a14fef9

Compare with similar skills

React Component Creation 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.

React Component Creation compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
React Component Creation this skillOpentrons/opentrons521—~461Automated safety check: PassApache-2.0
GSAP for Reactgreensock/gsap-skills16k4 repos~1.6kAutomated safety check: PassMIT
Creative Tim UI Blockscreativetimofficial/ui12k—~2.1kAutomated safety check: NotesMIT
Skillshare UI Website Stylerunkids/skillshare2.7k—~4.5kAutomated safety check: PassMIT
Animated React Component LibrariesHainrixz/editor-pro-max2611 repos~5.7kAutomated safety check: PassCustom licence
Fast Typescript Checkinternet-development/www-sacred1.6k—~4.3kAutomated safety check: PassMIT

Similar skills

  • GSAP for React

    greensock/gsap-skills

    Shows how to run GSAP animations in React and Next.js with the useGSAP hook, refs, scoped selectors and automatic cleanup on unmount.

    16k GitHub starsUsed in 4 repos~1.6k tokens
    Frontend & DesignAuto-check passed

  • 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.

    12k GitHub stars~2.1k tokensUpdated 6 mo ago
    Frontend & DesignAuto-check: notes

  • Skillshare UI Website Style

    runkids/skillshare

    Skillshare frontend design system for the React dashboard (ui/) and Docusaurus website (website/).

    2.7k GitHub stars~4.5k tokensUpdated today
    Frontend & DesignAuto-check passed

  • 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.

    261 GitHub starsUsed in 1 repo~5.7k tokens
    Frontend & DesignAuto-check passed

  • Fast Typescript Check

    internet-development/www-sacred

    Keep www-sacred's TypeScript fast to type-check and fast to run.

    1.6k GitHub stars~4.3k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Fluent Icons Lookup

    coltongriffith/fluenticons

    Looks up Microsoft Fluent UI System Icons and their exact @fluentui/react-icons component names through the Fluent Icons MCP server or HTTP API, instead of guessing.

    442 GitHub stars~492 tokensUpdated today
    Frontend & DesignAuto-check passed

More from Opentrons/opentrons

All 17 skills in this repo

  • AI Client

    Opentrons/opentrons

    Conventions for the opentrons-ai-client React/TypeScript frontend — project structure, API integration, state management (Jotai), feature flags, types, and testing.

    521 GitHub stars~1.6k tokensUpdated today
    Auto-check passed

  • AI Server

    Opentrons/opentrons

    Conventions for the opentrons-ai-server FastAPI service — project structure, uv dependency management, settings, testing, Docker, and deployment.

    521 GitHub stars~2.5k tokensUpdated today
    Auto-check: notes

  • Analyses Snapshot Testing

    Opentrons/opentrons

    Conventions for the analyses snapshot testing framework in analyses-snapshot-testing/.

    521 GitHub stars~1.7k tokensUpdated today
    Auto-check passed

  • CSS Modules

    Opentrons/opentrons

    CSS Modules conventions, Stylelint rules, design tokens (spacing, colors, typography, border-radius), and patterns for the Opentrons monorepo.

    521 GitHub stars~2.2k tokensUpdated today
    Auto-check passed

  • Docs

    Opentrons/opentrons

    Authoring and styling guidelines for the Opentrons /docs MkDocs project.

    521 GitHub stars~2.8k tokensUpdated today
    Auto-check passed

  • E2E Testing

    Opentrons/opentrons

    E2E testing conventions for Protocol Designer and Labware Library using Playwright + pytest in e2e-testing/.

    521 GitHub stars~3k tokensUpdated today
    Auto-check: notes

Works with

Categories

Questions about React Component Creation

What does React Component Creation do?

Component creation checklist and ai-client-specific patterns for React .tsx files in opentrons-ai-client/ and protocol-designer/. React Component Creation is an agent skill from Opentrons/opentrons.tsx files in opentrons-ai-client/ and protocol-designer/.

When should I use React Component Creation?

React Component Creation fits situations like: creating new React components in these packages; tasks that involve React components.

How do I install React Component Creation in Claude Code?

Run `npx skills add Opentrons/opentrons --skill react-component-creation -a claude-code`. Or copy the skill folder (.cursor/skills/react-component-creation in Opentrons/opentrons) into .claude/skills/react-component-creation in your project. Claude Code loads it when a task matches its description.

How do I install React Component Creation in Codex?

Run `npx skills add Opentrons/opentrons --skill react-component-creation -a codex`. Or copy the skill folder (.cursor/skills/react-component-creation in Opentrons/opentrons) into .agents/skills/react-component-creation in your project. Codex loads it when a task matches its description.

Can I use React Component Creation 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 Opentrons/opentrons --skill react-component-creation -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/react-component-creation, .gemini/skills/react-component-creation, .github/skills/react-component-creation and .opencode/skills/react-component-creation in your project.

What does React Component Creation need to run?

Going by SKILL.md and its folder, React Component Creation needs the command-line tools its instructions call (pnpm).

Does React Component Creation 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 React Component Creation 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 React Component Creation use?

React Component Creation is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does React Component Creation use?

About 461 tokens (SKILL.md is roughly 1.8k 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 React Component Creation?

Skills that share tags, products or a category with React Component Creation: GSAP for React (greensock/gsap-skills, 16k stars), Creative Tim UI Blocks (creativetimofficial/ui, 12k stars), Skillshare UI Website Style (runkids/skillshare, 2.7k stars) and Animated React Component Libraries (Hainrixz/editor-pro-max, 261 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains React Component Creation?

Opentrons (a GitHub organization) maintains it in Opentrons/opentrons, which has 521 GitHub stars. The repository holds 17 skills in this directory. The repository was last updated on October 7, 2026.

Source: Opentrons/opentrons on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.