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 Dev

by Asymmetric-al in Asymmetric-al/core

Build reusable, accessible React components with predictable APIs and ref forwarding.

AGPL-3.0Auto-check passedFrontend & Design

Install React Component Dev

skills CLI
$ npx skills add Asymmetric-al/core --skill react-component-dev -a claude-code

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

GitHub CLI
$ gh skill install Asymmetric-al/core react-component-dev --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/Asymmetric-al/core.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/react-component-dev .claude/skills/react-component-dev && 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-dev
GitHub stars
381
Token cost
~758 tokens
SKILL.md length
201 words
Files
1
Skills in repo
41
Repo updated
First seen
Licence
AGPL-3.0

At a glance

Build reusable, accessible React components with predictable APIs and ref forwarding.

  • Works in 5 steps: Define the component’s responsibility… → Choose the API shape (controlled vs… → Implement with semantic HTML and… → …
  • Refactoring components
  • SKILL.md covers Rules, Workflow, Checklists and Minimal examples, plus 1 more section
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

React Component Dev is an agent skill from Asymmetric-al/core. Build reusable, accessible React components with predictable APIs and ref forwarding. Use when creating or refactoring components or defining component APIs, favoring composition over configuration and slots/children over many boolean props. Not needed for style-only or content-only edits that do not change a component API.

Its SKILL.md is about 760 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 Refactoring. The repository describes itself as: A high-performance, enterprise-grade Next.js 16 application for mission-focused non-profit organizations. Built for high impact teams. The licence is AGPL-3.0.

When your agent uses it

  • Refactoring components
  • Defining component APIs
  • Favoring composition over configuration and slots/children over many boolean props

Example prompts

  • “/react-component-dev”

Workflow steps

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

  1. Define the component’s responsibility and minimal usage.
  2. Choose the API shape (controlled vs uncontrolled as needed).
  3. Implement with semantic HTML and accessibility defaults.
  4. Add forwardRef for DOM-rendering components.
  5. Extract complex behavior into hooks if needed.

What it can do on your machine

Read from SKILL.md and the folder at commit 21e861c. 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 (its code samples are typescript).

    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

React Component Dev loads about 758 tokens when it runs. Until then it costs about 86 tokens; SKILL.md has 201 words of instructions outside code blocks.

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

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 Asymmetric-al/core at commit 21e861c, republished under its AGPL-3.0 licence (© Asymmetric-al). 201 words, ~758 tokens.

Download SKILL.mdSave it as .claude/skills/react-component-dev/SKILL.md (or your agent's skills folder).
name
react-component-dev
description
Build reusable, accessible React components with predictable APIs and ref forwarding. Use when creating or refactoring components or defining component APIs, favoring composition over configuration and slots/children over many boolean props. Not needed for style-only or content-only edits that do not change a component API.

React Component Development — Skill

Name: react-component-dev Purpose: Build reusable, accessible React components with predictable APIs and ref forwarding. Use this skill when creating or refactoring components.

Applies when: Building new components, refactoring UI components, or defining component APIs. Do not use when: Only editing styles or content in existing components without API changes.

Rules

  • Composition over configuration: Prefer children/slots over many boolean props.
  • Forward refs: If a component renders a DOM element, use forwardRef.
  • Accessibility: Use semantic HTML first; add ARIA only when needed.
  • Predictable props: Follow controlled/uncontrolled conventions.
  • Small and testable: Extract complex behavior into hooks.

Workflow

  1. Define the component’s responsibility and minimal usage.
  2. Choose the API shape (controlled vs uncontrolled as needed).
  3. Implement with semantic HTML and accessibility defaults.
  4. Add forwardRef for DOM-rendering components.
  5. Extract complex behavior into hooks if needed.

Checklists

Implementation checklist
  • Component has a single responsibility
  • DOM components forward refs
  • Semantic HTML used
  • Keyboard interaction works
  • Props follow React conventions
Review checklist
  • API is small and composable
  • Example usage is included

Minimal examples

forwardRef pattern
tsx
import * as React from "react";

type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
  variant?: "default" | "ghost";
};

export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ variant = "default", className, ...props }, ref) => {
    return (
      <button
        ref={ref}
        className={[
          variant === "ghost" ? "bg-transparent" : "bg-black text-white",
          className,
        ]
          .filter(Boolean)
          .join(" ")}
        {...props}
      />
    );
  },
);
Button.displayName = "Button";
Compound component
tsx
export function Card({ children }: { children: React.ReactNode }) {
  return <div className="rounded-lg border p-4">{children}</div>;
}
export function CardHeader({ children }: { children: React.ReactNode }) {
  return <div className="mb-2 font-semibold">{children}</div>;
}
export function CardBody({ children }: { children: React.ReactNode }) {
  return <div>{children}</div>;
}

Common mistakes / pitfalls

  • Missing forwardRef on input-like components
  • Using div for buttons/links
  • Overloading components with boolean props
  • Shipping components without a minimal usage example

© Asymmetric-al, AGPL-3.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 .agents/skills/react-component-dev of Asymmetric-al/core.

Open the folder on GitHubat commit 21e861c

Compare with similar skills

React Component Dev 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 Dev compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
React Component Dev this skillAsymmetric-al/core381—~758Automated safety check: PassAGPL-3.0
Vercel React Best Practicessanity-io/sanity6.4k130 repos~1.6kAutomated safety check: PassMIT
Dify Component Writing Guidelanggenius/dify158k—~626Automated safety check: PassCustom licence
React Best Practicesmastra-ai/mastra29k—~1.9kAutomated safety check: PassCustom licence
No Use Effectfastrepl/anarlog9.5k—~825Automated safety check: PassMIT
Eisland Dev Refactor Module SplitJNTMTMTM/eIsland320—~2.2kAutomated safety check: PassGPL-3.0

Similar skills

  • Vercel React Best Practices

    sanity-io/sanity

    Official

    React and Next.js performance optimization guidelines from Vercel Engineering.

    6.4k GitHub starsUsed in 130 repos~1.6k tokens
    Frontend & DesignAuto-check passed

  • Dify Component Writing Guide

    langgenius/dify

    Use when implementing or refactoring React/TypeScript components and the task requires decisions about component ownership, feature boundaries, state, data…

    158k GitHub stars~626 tokensUpdated today
    Frontend & DesignAuto-check passed

  • React Best Practices

    mastra-ai/mastra

    React performance optimization guidelines from Mastra Engineering.

    29k GitHub stars~1.9k tokensUpdated today
    Frontend & DesignAuto-check passed

  • No Use Effect

    fastrepl/anarlog

    Avoid direct React useEffect usage when writing or reviewing React components and hooks.

    9.5k GitHub stars~825 tokensUpdated today
    Frontend & DesignAuto-check passed

  • Eisland Dev Refactor Module Split

    JNTMTMTM/eIsland

    Refactor a monolithic React component file into a standardized module structure with components/, hooks/, utils/, and config/ subdirectories.

    320 GitHub stars~2.2k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Eisland Dev Refactor Module Split

    JNTMTMTM/eIsland

    Refactor a monolithic React component file into a standardized module structure with components/, hooks/, utils/, types/, and config/ subdirectories.

    320 GitHub stars~3.2k tokensUpdated today
    Frontend & DesignAuto-check passed

More from Asymmetric-al/core

All 41 skills in this repo

  • Idempotency Handling

    Asymmetric-al/core

    Implement idempotency keys and handling to ensure operations can be safely retried without duplicate effects.

    381 GitHub stars~867 tokensUpdated today
    Auto-check passed

  • Accessibility Review

    Asymmetric-al/core

    Audit and fix accessibility in Core UI. An agent skill from Asymmetric-al/core.

    381 GitHub stars~1.1k tokensUpdated today
    Auto-check passed

  • Agent Email Inbox

    Asymmetric-al/core

    A skill your agent uses when building any system where email content triggers actions — AI agent inboxes, automated support handlers, email-to-task pipelines, or any workflow processing untrusted…

    381 GitHub stars~4.1k tokensUpdated today
    Auto-check: notes

  • Components Build

    Asymmetric-al/core

    Build modern, composable, and accessible React UI components following the components.build specification.

    381 GitHub stars~2.1k tokensUpdated today
    Auto-check passed

  • Create Agent

    Asymmetric-al/core

    Guides a one-question-at-a-time design interview, captures alignment in agent/EVE-BRIEF.md, then scaffolds and implements a runnable eve agent with verbose teaching comments.

    381 GitHub stars~2.6k tokensUpdated today
    Auto-check: notes

  • Emil Design Engineering

    Asymmetric-al/core

    Design engineering principles and patterns for building polished, accessible web interfaces.

    381 GitHub stars~1.4k tokensUpdated today
    Auto-check passed

Categories

Questions about React Component Dev

What does React Component Dev do?

Build reusable, accessible React components with predictable APIs and ref forwarding. React Component Dev is an agent skill from Asymmetric-al/core. Build reusable, accessible React components with predictable APIs and ref forwarding.

When should I use React Component Dev?

React Component Dev fits situations like: refactoring components; defining component APIs; favoring composition over configuration and slots/children over many boolean props.

How do I install React Component Dev in Claude Code?

Run `npx skills add Asymmetric-al/core --skill react-component-dev -a claude-code`. Or copy the skill folder (.agents/skills/react-component-dev in Asymmetric-al/core) into .claude/skills/react-component-dev in your project. Claude Code loads it when a task matches its description.

How do I install React Component Dev in Codex?

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

Can I use React Component Dev 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 Asymmetric-al/core --skill react-component-dev -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-dev, .gemini/skills/react-component-dev, .github/skills/react-component-dev and .opencode/skills/react-component-dev in your project.

What does React Component Dev need to run?

SKILL.md names no scripts, command-line tools or credentials: React Component Dev is instructions for the agent only.

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

React Component Dev is published under the AGPL-3.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 Dev use?

About 758 tokens (SKILL.md is roughly 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 React Component Dev?

Skills that share tags, products or a category with React Component Dev: Vercel React Best Practices (sanity-io/sanity, 6.4k stars), Dify Component Writing Guide (langgenius/dify, 158k stars), React Best Practices (mastra-ai/mastra, 29k stars) and No Use Effect (fastrepl/anarlog, 9.5k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains React Component Dev?

Asymmetric-al (a GitHub organization) maintains it in Asymmetric-al/core, which has 381 GitHub stars. The repository holds 41 skills in this directory. The repository was last updated on October 8, 2026.

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