Agent Plugins Marketplace
← All plugins

react

v0.2.0

React development tools and skills for Claude Code

Claude Code8 Skills

By Samuel Daigle0 GitHub starsUpdated 1 hour ago

Directory evidence

Runtimes
Claude Code
Parsed components
8 skill or MCP entries
Source updated
Oct 1, 2026
Manifest status
Canonical path parsed

The directory validates manifest shape and source location. It does not execute the plugin or provide a security endorsement. Review the indexing methodology →

Install react for Claude Code

Installs for the current user
claude plugin marketplace add IchenDEV/agent-plugin-mkt
claude plugin marketplace update agent-plugin-marketplace
claude plugin install react-3@agent-plugin-marketplace

Paste and run these commands in a terminal with Claude Code. They add and refresh the PluginsMP catalog, then install this plugin.

The installer fetches third-party code from the source repository shown on this page. This directory validates manifest structure and source location, but does not perform a security audit; review the manifest, components, and source before installing.

Get the source manually
git clone https://github.com/Lichens-Innovation/ai-dev-tools

Clone the source repository, then follow its setup instructions to add the plugin to a compatible client. The plugin root is plugins/react/.

Plugin files

plugins/react/
├── .claude-plugin/plugin.json
├── skills/gluestack-ui/SKILL.md
├── skills/react-coding-standards/SKILL.md
├── skills/react-files-structure-standards/SKILL.md
├── skills/react-flow/SKILL.md
├── skills/react-flow-canvas-geometry/SKILL.md
├── skills/react-hook-form/SKILL.md
├── skills/react-linter-setup/SKILL.md
└── skills/react-single-responsibility/SKILL.md

Included Skills8

gluestack-uiskills/gluestack-ui/SKILL.md

Use whenever adding a new feature to the mobile app or refactoring components, explains how to use the gluestack UI librarie to use headless components.

react-coding-standardsskills/react-coding-standards/SKILL.md

Enforces internal React and TypeScript coding standards using avoid/prefer rules. Use when reviewing or refactoring React/TS code, applying company standards, or when the user asks to align code with coding standards.

react-files-structure-standardsskills/react-files-structure-standards/SKILL.md

Enforces file and folder naming and structure standards for React/TypeScript projects. Use when normalizing file/folder names, auditing project structure, renaming files or directories, or when the user asks to align file/folder naming with standards.

react-flowskills/react-flow/SKILL.md

Setup and usage guide for @xyflow/react (React Flow v12) in a Vite/ESM project. Use when adding React Flow to a project, debugging invisible nodes, wiring custom node types, handling state sync between React Flow and parent components, or building interactive graph canvases.

react-flow-canvas-geometryskills/react-flow-canvas-geometry/SKILL.md

Compute React Flow (@xyflow) canvas geometry correctly — edge label anchors, bezier control points, handle coordinates, node bounds — so labels and edges land where you intend instead of on top of a node. Use when placing or offsetting edge labels, reimplementing getBezierPath maths outside the renderer (e.g. in a seed or layout package), bending an edge through a moved label, deciding where a node ends, or debugging an element that renders in the wrong place on the canvas.

react-hook-formskills/react-hook-form/SKILL.md

Guide for setting up react-hook-form with Zod validation in React. Use this skill whenever the user wants to create a form component, add form validation, wire up Zod schemas to a form, use react-hook-form's Controller, handle form submission, display field errors, or reset/pre-populate a form with existing data. Also use when the user asks how to integrate react-hook-form with a UI component library (Ant Design, MUI, shadcn, etc.) or how to type form values with TypeScript.

react-linter-setupskills/react-linter-setup/SKILL.md

Sets up ESLint for React and TypeScript projects aligned with company standards. Use when installing or configuring the project linter, adding devDependencies, custom ESLint rules, package.json scripts, or when the user asks to set up or migrate to the company React/TypeScript ESLint stack.

react-single-responsibilityskills/react-single-responsibility/SKILL.md

Single-responsibility strategies to simplify components, hooks, and methods: decomposition order (utilities, hooks, sub-components), early returns, control flow, parameter design, and code smell fixes. Use when the user asks to simplify or ungodify a component, hook, function, or method.

Plugin manifests1

plugins/react/.claude-plugin/plugin.json
{
  "name": "react",
  "version": "0.2.0",
  "description": "React development tools and skills for Claude Code",
  "author": {
    "name": "Samuel Daigle",
    "email": "[email protected]"
  },
  "keywords": [
    "react",
    "frontend",
    "components",
    "typescript"
  ]
}

For maintainers

If you maintain this plugin, link to this source-backed listing from your README so users can review its manifest and indexed components.

[react on Agent Plugins Marketplace](https://pluginsmp.com/plugins/react-3)