Agent skill

React Component Generator

生成符合项目规范的 React 组件。当用户要求创建组件、新建 React 组件或生成组件文件时使用. An agent skill from einverne/dotfiles.

GPL-3.0Auto-check passedFrontend & Design

Install React Component Generator

skills CLI

$ npx skills add einverne/dotfiles --skill react-component-generator -a claude-code

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

GitHub CLI

$ gh skill install einverne/dotfiles 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/einverne/dotfiles.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/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/einverne/dotfiles/tree/master/skills/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/einverne/dotfiles/tree/master/skills/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 einverne/dotfiles --skill react-component-generator -a codex

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

GitHub CLI

$ gh skill install einverne/dotfiles 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/einverne/dotfiles.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/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/einverne/dotfiles/tree/master/skills/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 einverne/dotfiles --skill react-component-generator -a cursor

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

GitHub CLI

$ gh skill install einverne/dotfiles 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/einverne/dotfiles.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/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/einverne/dotfiles/tree/master/skills/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/einverne/dotfiles.git --path skills/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 einverne/dotfiles --skill react-component-generator -a gemini-cli

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

GitHub CLI

$ gh skill install einverne/dotfiles 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/einverne/dotfiles.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/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/einverne/dotfiles/tree/master/skills/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 einverne/dotfiles 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 einverne/dotfiles --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/einverne/dotfiles.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/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/einverne/dotfiles/tree/master/skills/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 einverne/dotfiles --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 einverne/dotfiles 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/einverne/dotfiles.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/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/einverne/dotfiles/tree/master/skills/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: 121
Token cost: ~334 tokens
SKILL.md length: 53 words
Files: 1
Skills in repo: 39
Repo updated: Sep 9, 2026
First seen: Oct 7, 2026
Licence: GPL-3.0

At a glance

生成符合项目规范的 React 组件。当用户要求创建组件、新建 React 组件或生成组件文件时使用. An agent skill from einverne/dotfiles.

Works in 3 steps: 确认组件信息 → 创建文件结构 → 生成组件文件
Tasks that involve React components
SKILL.md covers 组件规范, 生成流程 and 质量检查
Calls npm

What it does

React Component Generator is an agent skill from einverne/dotfiles. 生成符合项目规范的 React 组件。当用户要求创建组件、新建 React 组件或生成组件文件时使用

Its SKILL.md is about 330 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 and npm. The repository describes itself as: my personal dotfiles managed by dotbot, zinit. The licence is GPL-3.0.

When your agent uses it

Tasks that involve React components

Example prompts

“/react-component-generator”

Workflow steps

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

确认组件信息
创建文件结构
生成组件文件

What it can do on your machine

Read from SKILL.md and the folder at commit c6c0686. 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:
- npm
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use npm, 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 Generator loads about 334 tokens when it runs. Until then it costs about 19 tokens; SKILL.md has 53 words of instructions outside code blocks.

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

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 einverne/dotfiles at commit c6c0686, republished under its GPL-3.0 licence (© einverne). 53 words, ~334 tokens.

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

name: react-component-generator
description: 生成符合项目规范的 React 组件。当用户要求创建组件、新建 React 组件或生成组件文件时使用

React 组件生成器

组件规范

项目使用以下约定：

TypeScript + React
函数式组件 + Hooks
CSS Modules 样式
完整的 JSDoc 注释
配套的测试文件

生成流程

确认组件信息
- 组件名称（PascalCase）
- 组件类型（基础组件、容器组件、页面组件）
- 所需 props

创建文件结构

src/components/{ComponentName}/
├── index.tsx
├── {ComponentName}.module.css
└── {ComponentName}.test.tsx

生成组件文件

index.tsx 模板：

typescript

import React from 'react';
import styles from './{ComponentName}.module.css';

interface {ComponentName}Props {
  // 定义 props 类型
}

/**
 * {组件描述}
 * @param props - 组件属性
 */
export const {ComponentName}: React.FC<{ComponentName}Props> = (props) => {
  return (
    <div className={styles.container}>
      {/* 组件内容 */}
    </div>
  );
};

生成样式文件

{ComponentName}.module.css 模板：

css

.container {
  /* 组件样式 */
}

生成测试文件

{ComponentName}.test.tsx 模板：

typescript

import { render, screen } from '@testing-library/react';
import { {ComponentName} } from './index';

describe('{ComponentName}', () => {
  it('renders correctly', () => {
    render(<{ComponentName} />);
    // 添加断言
  });
});

质量检查

生成后自动运行：

TypeScript 类型检查：npm run type-check
ESLint 检查：npm run lint
测试：npm test -- {ComponentName}

如有错误，显示错误信息并提供修复建议。

Files

Just SKILL.md in skills/react-component-generator of einverne/dotfiles.

Open the folder on GitHubat commit c6c0686

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 skilleinverne/dotfiles	121	—	~334	Automated safety check: Pass	GPL-3.0	28 days ago
GSAP for Reactgreensock/gsap-skills	16k	4 repos	~1.6k	Automated safety check: Pass	MIT	2 mo ago
Spotpatchhuanglvjing/spotpatch	134	—	~998	Automated safety check: Pass	MIT	9 days ago
Frontendstreamband/hydra-srt	146	—	~582	Automated safety check: Pass	Apache-2.0	21 days ago
Motion Design Patterns for Reactdylanfeltus/skills	179	—	~3k	Automated safety check: Pass	MIT	19 days ago
Create Custom Widgetmendixlabs/mxcli	128	—	~3.3k	Automated safety check: Pass	Apache-2.0	today

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
Spotpatch
huanglvjing/spotpatch
为 React 项目建立从浏览器页面元素到精确 JSX/TSX 源码、结构化上下文与可审阅修改的 SpotPatch 工作流。用户提到 SpotPatch、截图沟通前端修改、页面元素定位源码、Vite 或 Next.js 接入、组件数据链路、结构化 Prompt、AI 补丁审阅、安装检查或故障排查时使用此技能。
134 GitHub stars~998 tokensUpdated 9 days ago
Frontend & DesignAuto-check passed
Frontend
streamband/hydra-srt
A skill your agent uses for frontend work in webapp (React/TypeScript, UI implementation, tests, and refactors).
146 GitHub stars~582 tokensUpdated 21 days ago
Frontend & DesignAuto-check passed
Motion Design Patterns for React
dylanfeltus/skills
Framer Motion (Motion) patterns for React: spring presets, staggers, layout animations, micro-interactions, scroll effects and page transitions, with performance rules.
179 GitHub stars~3k tokensUpdated 19 days ago
Frontend & DesignAuto-check passed
Create Custom Widget
mendixlabs/mxcli
Build a Mendix pluggable widget from scratch with React and TypeScript and package it as an .mpk.
128 GitHub stars~3.3k tokensUpdated today
Frontend & DesignAuto-check passed
React Email
viclafouch/meme-studio
A skill your agent uses when creating HTML email templates with React components - welcome emails, password resets, notifications, order confirmations, newsletters, or transactional emails.
110 GitHub starsUsed in 2 repos~3.6k tokens
Backend & APIsAuto-check passed

Questions about React Component Generator

What does React Component Generator do?

生成符合项目规范的 React 组件。当用户要求创建组件、新建 React 组件或生成组件文件时使用. An agent skill from einverne/dotfiles. React Component Generator is an agent skill from einverne/dotfiles.

When should I use React Component Generator?

React Component Generator fits situations like: tasks that involve React components.

How do I install React Component Generator in Claude Code?

Run `npx skills add einverne/dotfiles --skill react-component-generator -a claude-code`. Or copy the skill folder (skills/react-component-generator in einverne/dotfiles) 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 einverne/dotfiles --skill react-component-generator -a codex`. Or copy the skill folder (skills/react-component-generator in einverne/dotfiles) 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 einverne/dotfiles --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?

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

Does React Component Generator access the network?

SKILL.md contains no URLs. Its commands use npm, which can reach the network depending on how they are called. 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 GPL-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 Generator use?

About 334 tokens (SKILL.md is roughly 1.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 Generator?

Skills that share tags, products or a category with React Component Generator: GSAP for React (greensock/gsap-skills, 16k stars), Spotpatch (huanglvjing/spotpatch, 134 stars), Frontend (streamband/hydra-srt, 146 stars) and Motion Design Patterns for React (dylanfeltus/skills, 179 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?

einverne (a GitHub user) maintains it in einverne/dotfiles, which has 121 GitHub stars. The repository holds 39 skills in this directory. The repository was last updated on September 9, 2026.

Source: einverne/dotfiles 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 组件生成器

组件规范

生成流程

质量检查

Files

Compare with similar skills

Similar skills

GSAP for React

Spotpatch

Frontend

Motion Design Patterns for React

Create Custom Widget

React Email

More from einverne/dotfiles

DOCX

Chrome Devtools

PDF

Gemini Audio

Gemini Image Gen

Gemini Vision

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 组件生成器

组件规范

生成流程

质量检查

Files

Compare with similar skills

Similar skills

More from einverne/dotfiles

Related

Questions about React Component Generator