Provides best practices and patterns for building robust, type-safe React applications with TypeScript.
Install
mkdir -p .claude/skills/react-dev-kscius && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/11302" && unzip -o skill.zip -d .claude/skills/react-dev-kscius && rm skill.zipInstalls to .claude/skills/react-dev-kscius
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
This skill should be used when building React components with TypeScript, typing hooks, handling events, or when React TypeScript, React 19, Server Components are mentioned. Covers type-safe patterns for React 18-19 including generic components, proper event typing, and routing integration (TanStack Router, React Router).Key capabilities
- →Type React components with TypeScript
- →Implement generic components
- →Type event handlers and hooks
- →Integrate React 19 features
- →Configure type-safe routing
How it works
It applies TypeScript patterns to React components, hooks, and events to ensure compile-time type safety.
Inputs & outputs
When to use react-dev
- →Build generic React components
- →Type complex event handlers
- →Migrate to React 19 patterns
About react-dev
Covers React 19 features, component typing, custom hooks, and router integration, focusing on compile-time type guarantees and maintainability.
This skill should be used when building React components with TypeScript, typing hooks, handling events, or when React TypeScript, React 19, Server Components are mentioned. Covers type-safe patterns for React 18-19 including generic components, proper event typing, and routing integration (TanStack
When not to use it
- →When working with vanilla JavaScript React projects
Prerequisites
Limitations
- →Requires TypeScript knowledge
- →Strictly for React TypeScript projects
How it compares
It enforces strict typing patterns that prevent runtime errors, unlike standard React development.
Compared to similar skills
react-dev side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| react-dev (this skill) | 0 | 3mo | No flags | Intermediate |
| zustand | 113 | 3mo | No flags | Intermediate |
| web-artifacts-builder | 49 | 5mo | Review | Intermediate |
| landing-page-guide-v2 | 48 | 10mo | Review | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
zustand
lobehub
Zustand state management guide. Use when working with store code (src/store/**), implementing actions, managing state, or creating slices. Triggers on Zustand store development, state management questions, or action implementation.
web-artifacts-builder
anthropics
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
landing-page-guide-v2
bear2u
Create distinctive, high-converting landing pages that combine proven conversion elements with exceptional design quality. Build beautiful, memorable landing pages using Next.js 14+ and ShadCN UI that avoid generic AI aesthetics while following the 11 essential elements framework.
react
lobehub
React component development guide. Use when working with React components (.tsx files), creating UI, using @lobehub/ui components, implementing routing, or building frontend features. Triggers on React component creation, modification, layout implementation, or navigation tasks.
frontend-prompt-generator
gharam1234
Generate structured prompts for frontend development tasks following established patterns. Use when the user requests prompts for wireframes, UI implementation, data binding, or routing functionality in React/Next.js projects with specific formatting requirements (Cursor rules, file paths, test-driven development).
react-dev
davila7
This skill should be used when building React components with TypeScript, typing hooks, handling events, or when React TypeScript, React 19, Server Components are mentioned. Covers type-safe patterns for React 18-19 including generic components, proper event typing, and routing integration (TanStack Router, React Router).