🎯

react-dev

🎯Skill

from softaworks/agent-toolkit

What it does

A comprehensive agent toolkit providing Claude Code skills for software diagramming, code review, QA planning, and professional communication workflows.

Overview

A Claude Code skill that provides comprehensive, type-safe React development patterns with TypeScript, covering React 18 through React 19. It includes guidance on component typing, event handlers, hooks, Server Components, and router integration with TanStack Router and React Router, enabling confident refactoring through compile-time guarantees.

Key Features

React 19 Migration Patterns - Covers breaking changes including ref as prop (forwardRef deprecated), useActionState replacing useFormState, and the new use() API for unwrapping promises
Type-Safe Component Patterns - Extends native HTML elements with custom props, discriminated unions for variant props, and proper children typing
Event Handler Typing - Specific event type guidance for mouse, form, keyboard, and other DOM events with accurate target typing
Generic Component Support - Patterns for building reusable generic components with proper TypeScript inference
Router Integration - Type-safe routing patterns for both TanStack Router and React Router

Who is this for?

This skill is designed for React developers working with TypeScript who want compile-time safety and proper typing across their component hierarchy. It is particularly useful for teams migrating to React 19 or those building complex component libraries that require precise type definitions for props, events, and hooks.

🏪

Part of

softaworks-agent-toolkit

react-dev

Installation

Vibe Index InstallInstalls to .claude/skills/ - auto-recognized by Claude Code

npx vibeindex add softaworks/agent-toolkit --skill react-dev

skills.sh Install⚠ Installs to .agents/skills/ - may not be auto-recognized by Claude Code

npx skills add softaworks/agent-toolkit --skill react-dev

Manual InstallCopy SKILL.md content and save to the path below

~/.claude/skills/react-dev/SKILL.md

SKILL.md

3,468Installs

422

Last UpdatedJan 28, 2026

View on GitHub Back to Skills

More from this repository10

🎯

mermaid-diagrams🎯Skill

A comprehensive agent toolkit providing Claude Code skills for software diagramming, code review, QA planning, and professional communication workflows.

🎯

humanizer🎯Skill

Transforms AI-generated text into natural, human-sounding writing while preserving meaning and intent.

🎯

writing-clearly-and-concisely🎯Skill

A comprehensive agent toolkit providing Claude Code skills for software diagramming, code review, QA planning, and professional communication workflows.

🎯

qa-test-planner🎯Skill

A comprehensive agent toolkit providing Claude Code skills for software diagramming, code review, QA planning, and professional communication workflows.

🎯

database-schema-designer🎯Skill

A comprehensive agent toolkit providing Claude Code skills for software diagramming, code review, QA planning, and professional communication workflows.

🎯

skill-judge🎯Skill

A comprehensive agent toolkit providing Claude Code skills for software diagramming, code review, QA planning, and professional communication workflows.

🎯

session-handoff🎯Skill

A comprehensive agent toolkit providing Claude Code skills for software diagramming, code review, QA planning, and professional communication workflows.

🎯

marp-slide🎯Skill

Creates professional presentation slides from Markdown using the Marp ecosystem within Claude Code.

🎯

codex🎯Skill

A comprehensive agent toolkit providing Claude Code skills for software diagramming, code review, QA planning, and professional communication workflows.

🎯

professional-communication🎯Skill

A comprehensive agent toolkit providing Claude Code skills for software diagramming, code review, QA planning, and professional communication workflows.