React Skill Pack

Practical skills for auditing, refactoring, and optimizing React and Vite applications.

React Skill Pack (RSP) provides eight skills from a single source for OpenCode, Claude Code, Codex, and Cursor. Each workflow combines engineering guidance, static scanners, and validation criteria without executing the application being analyzed.

Catalog

Skill	Purpose
bundle-optimization	Investigate bundle composition, chunks, and size-reduction opportunities.
component-refactoring	Safely decompose and simplify React components.
data-heavy-optimization	Improve rendering and processing for large data sets.
dead-code-elimination	Identify unused code, exports, and dependencies.
holistic-performance	Conduct an integrated React performance audit.
memoization-optimization	Apply memoization only when supported by evidence.
state-management-optimization	Reduce renders and improve state boundaries.
vite-advanced-config	Audit and evolve advanced Vite configurations.

Requirements

• Node.js >=22.13.0 for the scanners included with the skills.
• A current version of the selected agent with plugin or Agent Skills support.
• Git for repository-based installation.

Plugin users do not need to run pnpm install: the scanner runtime is bundled with the distribution. pnpm is required only to develop and validate this repository.

Installation

OpenCode

opencode plugin "git+https://github.com/dgabreuu/react-skill-pack.git" --global
opencode debug skill

Claude Code

/plugin marketplace add https://github.com/dgabreuu/react-skill-pack.git
/plugin install react-skill-pack@react-skill-pack
/reload-plugins

Skills receive the plugin namespace, for example /react-skill-pack:bundle-optimization.

Codex

codex plugin marketplace add dgabreuu/react-skill-pack
codex plugin add react-skill-pack@react-skill-pack

Restart the session, open /skills, and invoke a skill, for example $component-refactoring.

Cursor

Open /add-plugin, choose installation from a Git URL, and enter:

https://github.com/dgabreuu/react-skill-pack.git

Usage

Ask the agent to apply a skill to the open project. Examples:

Use component-refactoring to review this component without changing its behavior.
Use bundle-optimization to analyze the existing bundle report.
Use vite-advanced-config to audit the current Vite configuration.

Code examples included with the skills are educational fixtures and may omit imports or peripheral infrastructure. They are not standalone applications.

Structure

skills/                  eight skills, internal catalog, and shared utilities
.agents/plugins/         Codex marketplace
.claude-plugin/          Claude Code manifest and marketplace
.codex-plugin/           Codex manifest
.cursor-plugin/          Cursor manifest
.opencode/plugins/       OpenCode adapter
scripts/                 validation and vendored-runtime updates
tests/                   distribution and regression tests

Analyzed projects store learned patterns in REPOSITORY-PATTERNS.md at their own root. The catalog used to validate this package is located at skills/REPOSITORY-PATTERNS.md.

Development

git clone https://github.com/dgabreuu/react-skill-pack.git
cd react-skill-pack
corepack enable
pnpm install --frozen-lockfile
pnpm validate
pnpm test:coverage
pnpm audit
npm pack --dry-run --json
claude plugin validate .

pnpm vendor:typescript updates the internal TypeScript runtime; every change to this artifact must include its license and pass pnpm vendor:typescript:check.

Security, contributing, and license

Report vulnerabilities privately according to the security policy. To propose changes, see CONTRIBUTING.md.

Distributed under the MIT License. The vendored TypeScript runtime retains its own Apache-2.0 license at skills/.shared/vendor/LICENSE.typescript.txt.