Agent skill

React Component Generator

by OneWave-AI in OneWave-AI/claude-skills

Generate React components with TypeScript, proper props, hooks, and accessibility.

Install React Component Generator

skills CLI

$ npx skills add OneWave-AI/claude-skills --skill react-component-generator -a claude-code

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

GitHub CLI

$ gh skill install OneWave-AI/claude-skills react-component-generator --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/OneWave-AI/claude-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/react-component-generator .claude/skills/react-component-generator && 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/

Paste into Claude Code

Install the "react-component-generator" agent skill from https://github.com/OneWave-AI/claude-skills/tree/main/react-component-generator into .claude/skills/react-component-generator/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-component-generator", 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

$skill-installer install https://github.com/OneWave-AI/claude-skills/tree/main/react-component-generator

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

skills CLI

$ npx skills add OneWave-AI/claude-skills --skill react-component-generator -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install OneWave-AI/claude-skills react-component-generator --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/OneWave-AI/claude-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/react-component-generator .agents/skills/react-component-generator && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "react-component-generator" agent skill from https://github.com/OneWave-AI/claude-skills/tree/main/react-component-generator into .agents/skills/react-component-generator/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-component-generator", 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.

skills CLI

$ npx skills add OneWave-AI/claude-skills --skill react-component-generator -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install OneWave-AI/claude-skills react-component-generator --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/OneWave-AI/claude-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/react-component-generator .cursor/skills/react-component-generator && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "react-component-generator" agent skill from https://github.com/OneWave-AI/claude-skills/tree/main/react-component-generator into .cursor/skills/react-component-generator/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-component-generator", 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

$ gemini skills install https://github.com/OneWave-AI/claude-skills.git --path react-component-generator

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add OneWave-AI/claude-skills --skill react-component-generator -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install OneWave-AI/claude-skills react-component-generator --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/OneWave-AI/claude-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/react-component-generator .gemini/skills/react-component-generator && rm -rf skills-src

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

Paste into Gemini CLI

Install the "react-component-generator" agent skill from https://github.com/OneWave-AI/claude-skills/tree/main/react-component-generator into .gemini/skills/react-component-generator/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-component-generator", 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.

GitHub CLI

$ gh skill install OneWave-AI/claude-skills react-component-generator

Installs 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).

skills CLI

$ npx skills add OneWave-AI/claude-skills --skill react-component-generator -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/OneWave-AI/claude-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/react-component-generator .github/skills/react-component-generator && rm -rf skills-src

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

Paste into GitHub Copilot

Install the "react-component-generator" agent skill from https://github.com/OneWave-AI/claude-skills/tree/main/react-component-generator into .github/skills/react-component-generator/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-component-generator", 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.

skills CLI

$ npx skills add OneWave-AI/claude-skills --skill react-component-generator -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install OneWave-AI/claude-skills react-component-generator --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/OneWave-AI/claude-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/react-component-generator .opencode/skills/react-component-generator && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "react-component-generator" agent skill from https://github.com/OneWave-AI/claude-skills/tree/main/react-component-generator into .opencode/skills/react-component-generator/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-component-generator", 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: react-component-generator
GitHub stars: 322
Token cost: ~934 tokens
SKILL.md length: 74 words
Files: 1
Skills in repo: 91
Repo updated: Oct 2, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

Generate React components with TypeScript, proper props, hooks, and accessibility.

Works in 4 steps: Determine component type: Client or… → Define props interface with TypeScript → Implement with best practices → …
Creating new React components
SKILL.md covers Instructions, Templates and Accessibility Checklist
Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

React Component Generator is an agent skill from OneWave-AI/claude-skills. Generate React components with TypeScript, proper props, hooks, and accessibility. Use when creating new React components, UI elements, or refactoring existing components.

Its SKILL.md is about 930 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 Accessibility. It works with TypeScript. The repository describes itself as: 200+ production-ready Claude Code skills for sales, marketing, design, engineering, and AI agent architecture. Built and maintained by OneWave AI. The licence is MIT.

When your agent uses it

Creating new React components
Refactoring existing components

Example prompts

“/react-component-generator”

Workflow steps

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

Determine component type: Client or Server component
Define props interface with TypeScript
Implement with best practices
Add accessibility attributes

What it can do on your machine

Read from SKILL.md and the folder at commit fc5b785. 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 Generator loads about 934 tokens when it runs. Until then it costs about 49 tokens; SKILL.md has 74 words of instructions outside code blocks.

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

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 OneWave-AI/claude-skills at commit fc5b785, republished under its MIT licence (© OneWave-AI). 74 words, ~934 tokens.

Download SKILL.mdSave it as .claude/skills/react-component-generator/SKILL.md (or your agent's skills folder).

name: react-component-generator
description: Generate React components with TypeScript, proper props, hooks, and accessibility. Use when creating new React components, UI elements, or refactoring existing components.

React Component Generator

Instructions

When creating React components:

Determine component type: Client or Server component
Define props interface with TypeScript
Implement with best practices
Add accessibility attributes

Templates

Client Component

tsx

'use client';

import { useState, useCallback } from 'react';
import { cn } from '@/lib/utils';

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'primary' | 'secondary' | 'ghost';
  size?: 'sm' | 'md' | 'lg';
  isLoading?: boolean;
  children: React.ReactNode;
}

export function Button({
  variant = 'primary',
  size = 'md',
  isLoading = false,
  children,
  className,
  disabled,
  ...props
}: ButtonProps) {
  const baseStyles = 'inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2';

  const variants = {
    primary: 'bg-blue-600 text-white hover:bg-blue-700',
    secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300',
    ghost: 'hover:bg-gray-100',
  };

  const sizes = {
    sm: 'h-8 px-3 text-sm',
    md: 'h-10 px-4',
    lg: 'h-12 px-6 text-lg',
  };

  return (
    <button
      className={cn(baseStyles, variants[variant], sizes[size], className)}
      disabled={disabled || isLoading}
      aria-busy={isLoading}
      {...props}
    >
      {isLoading ? <span className="animate-spin mr-2">⏳</span> : null}
      {children}
    </button>
  );
}

Server Component

tsx

import { db } from '@/lib/db';

interface UserListProps {
  limit?: number;
}

export async function UserList({ limit = 10 }: UserListProps) {
  const users = await db.user.findMany({ take: limit });

  if (users.length === 0) {
    return <p className="text-gray-500">No users found.</p>;
  }

  return (
    <ul role="list" className="divide-y">
      {users.map((user) => (
        <li key={user.id} className="py-4">
          <span>{user.name}</span>
        </li>
      ))}
    </ul>
  );
}

Form Component with React Hook Form

tsx

'use client';

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';

const schema = z.object({
  email: z.string().email('Invalid email'),
  password: z.string().min(8, 'Min 8 characters'),
});

type FormData = z.infer<typeof schema>;

export function LoginForm({ onSubmit }: { onSubmit: (data: FormData) => void }) {
  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting },
  } = useForm<FormData>({
    resolver: zodResolver(schema),
  });

  return (
    <form onSubmit={handleSubmit(onSubmit)} noValidate>
      <div>
        <label htmlFor="email">Email</label>
        <input
          id="email"
          type="email"
          aria-invalid={!!errors.email}
          aria-describedby={errors.email ? 'email-error' : undefined}
          {...register('email')}
        />
        {errors.email && (
          <p id="email-error" role="alert">{errors.email.message}</p>
        )}
      </div>
      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? 'Loading...' : 'Submit'}
      </button>
    </form>
  );
}

Accessibility Checklist

Use semantic HTML elements
Add aria-label for icon-only buttons
Include role attributes where needed
Ensure keyboard navigation works
Add aria-invalid and aria-describedby for form errors
Use aria-busy for loading states

Files

Just SKILL.md in react-component-generator of OneWave-AI/claude-skills.

Open the folder on GitHubat commit fc5b785

Compare with similar skills

React Component Generator 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 Generator compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
React Component Generator this skillOneWave-AI/claude-skills	322	—	~934	Automated safety check: Pass	MIT	5 days ago
Connect Component To Figmadequelabs/cauldron	129	—	~2k	Automated safety check: Pass	MPL-2.0	yesterday
Stitch to React and Vite Dashboardgoogle-labs-code/stitch-skills	8.4k	—	~914	Automated safety check: Notes	Apache-2.0	1 mo ago
Senior Frontendborghei/Claude-Skills	874	—	~1.7k	Automated safety check: Pass	MIT	yesterday
React Code Reviewgiuseppe-trisciuoglio/developer-kit	355	—	~2.6k	Automated safety check: Notes	MIT	27 days ago
Animated React Component LibrariesHainrixz/editor-pro-max	260	1 repos	~5.7k	Automated safety check: Pass	Custom licence	6 mo ago

Similar skills

Connect Component To Figma
dequelabs/cauldron
Add a Figma Code Connect (.figma.tsx) file for a Cauldron React component.
129 GitHub stars~2k tokensUpdated yesterday
Frontend & DesignAuto-check passed
Stitch to React and Vite Dashboard
google-labs-code/stitch-skills
Official
Turns Stitch screens into a React, Vite and TypeScript dashboard with TanStack Query data fetching, DESIGN.md tokens as CSS variables and optional read-only Web3 data.
8.4k GitHub stars~914 tokensUpdated 1 mo ago
Frontend & DesignAuto-check: notes
Senior Frontend
borghei/Claude-Skills
Frontend development for React, Next.js, TypeScript, and Tailwind CSS.
874 GitHub stars~1.7k tokensUpdated yesterday
Frontend & DesignAuto-check passed
React Code Review
giuseppe-trisciuoglio/developer-kit
Provides comprehensive code review capability for React applications, validates component architecture, hooks usage, React 19 patterns, state management, performance optimization, accessibility…
355 GitHub stars~2.6k tokensUpdated 27 days ago
Frontend & DesignAuto-check: notes
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.
260 GitHub starsUsed in 1 repo~5.7k tokens
Frontend & DesignAuto-check passed
Jarvis Setup
ethanplusai/jarvis
A skill your agent uses when helping someone install, configure, or debug a fresh clone of JARVIS (this repo) — especially "the mic doesn't work", "JARVIS says his language systems are down", any…
838 GitHub stars~2.5k tokensUpdated 27 days ago
Frontend & DesignAuto-check: notes

Questions about React Component Generator

What does React Component Generator do?

Generate React components with TypeScript, proper props, hooks, and accessibility. React Component Generator is an agent skill from OneWave-AI/claude-skills. Generate React components with TypeScript, proper props, hooks, and accessibility.

When should I use React Component Generator?

React Component Generator fits situations like: creating new React components; refactoring existing components.

How do I install React Component Generator in Claude Code?

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

How do I install React Component Generator in Codex?

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

Can I use React Component Generator 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 OneWave-AI/claude-skills --skill react-component-generator -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-generator, .gemini/skills/react-component-generator, .github/skills/react-component-generator and .opencode/skills/react-component-generator in your project.

What does React Component Generator need to run?

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

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

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

About 934 tokens (SKILL.md is roughly 3.7k 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 Generator?

Skills that share tags, products or a category with React Component Generator: Connect Component To Figma (dequelabs/cauldron, 129 stars), Stitch to React and Vite Dashboard (google-labs-code/stitch-skills, 8.4k stars), Senior Frontend (borghei/Claude-Skills, 874 stars) and React Code Review (giuseppe-trisciuoglio/developer-kit, 355 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains React Component Generator?

OneWave-AI (a GitHub organization) maintains it in OneWave-AI/claude-skills, which has 322 GitHub stars. The repository holds 91 skills in this directory. The repository was last updated on October 2, 2026.

Source: OneWave-AI/claude-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

React Component Generator

Install React Component Generator

Facts

At a glance

What it does

When your agent uses it

Example prompts

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

React Component Generator

Instructions

Templates

Client Component

Server Component

Form Component with React Hook Form

Accessibility Checklist

Files

Compare with similar skills

Similar skills

Connect Component To Figma

Stitch to React and Vite Dashboard

Senior Frontend

React Code Review

Animated React Component Libraries

Jarvis Setup

More from OneWave-AI/claude-skills

CRM Data Cleanup

Design Export Repair

Bi Measure Builder

Bookkeeping Close

CSV and Excel Merger

Sec Filing Puller

Questions about React Component Generator

Install React Component Generator

Facts

At a glance

What it does

When your agent uses it

Example prompts

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

React Component Generator

Instructions

Templates

Client Component

Server Component

Form Component with React Hook Form

Accessibility Checklist

Files

Compare with similar skills

Similar skills

More from OneWave-AI/claude-skills

Related

Questions about React Component Generator