# Build Type-Safe React Components

React TypeScript work often needs precise event, hook, and route types. This skill provides focused patterns for typed components, React 19 APIs, and routing.

## Install

```bash
npx skillstore add softaworks/react-dev
```

## Metadata

- Status: approved
- Slug: softaworks-react-dev
- Version: 1.0.0
- Author version: 1.0.0
- Skillstore revision: r1
- Version status: valid
- Tree hash: 6d321e71ae5d920baf7c81c7e5f1b092bc194098a5e67551d566b3459362e294
- Author: softaworks
- GitHub username: softaworks
- License: MIT
- Repository: https://github.com/softaworks/agent-toolkit/tree/main/skills/react-dev/
- Ref: 3e4b6c31a74a3bd1a291c98cf585d720cb9fbc88
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: allowed
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: external\_commands, scripts, network, env\_access, filesystem
- Quality score: 82
- Quality tier: silver
- Public page: https://skillstore.pages.dev/skills/softaworks-react-dev
- Manifest: https://skillstore.pages.dev/api/skills/softaworks-react-dev/manifest

## Capabilities

- Provides TypeScript patterns for React props, children, refs, and discriminated unions.
- Shows typed event handlers for mouse, form, input, keyboard, clipboard, and related events.
- Explains React 19 patterns including ref as prop, useActionState, use\(\), and Server Components.
- Includes generic component examples for tables, selects, lists, form fields, and modals.
- Documents type-safe routing with TanStack Router and React Router v7.
- Shows typed hooks patterns for useState, useRef, useReducer, useContext, and custom hooks.

## Use Cases

- Create Typed Components: Build reusable React components with accurate props, children, refs, and variant types.
- Adopt React 19 Patterns: Use ref as prop, useActionState, use\(\), Server Components, and server actions with TypeScript.
- Implement Typed Routing: Apply type-safe route params, loader data, search params, and navigation patterns.

## Prompt Templates

### Type a Basic Component

```
Help me type a React component with TypeScript. It should extend native button props and support primary and secondary variants.
```

### Type Event Handlers

```
Review my React form handlers and replace broad event types with precise TypeScript event types for inputs, submit, and keyboard actions.
```

### Create a Generic Component

```
Design a generic React table component that infers column keys from the data type and supports custom render functions.
```

### Plan React 19 Routing

```
Help migrate this React TypeScript feature to React 19 with Server Components, useActionState, and type-safe router loader data.
```

## Limitations

- Does not cover React Native-specific APIs.
- Does not provide project-specific architecture or design system decisions.
- Examples require adaptation to each framework, data layer, and authorization model.
- Does not replace official React, router, or TypeScript release notes.

## Best Practices

- Use specific React event types and currentTarget for element-specific typing.
- Model component variants with discriminated unions instead of broad optional props.
- Keep Server Components and Client Components separated by file boundary and directive.

## Anti Patterns

- Using any for event handlers or generic render props.
- Using React 19 forwardRef or deprecated useFormState in new code.
- Mixing server-only APIs and client components in the same module.

## Security Audit

- Audited at: 2026-07-09T08:14:58.55\+00:00
- Summary: All 132 static findings were reviewed against the Markdown-only skill content. They are false positives caused by fenced code blocks, TypeScript template literals, React key and event terminology, normal fetch and dynamic import examples, server-only environment access examples, and generated router paths. No prompt injection, executable malware behavior, or malicious semantic intent was found.

## Stats

- Views: 524
- Downloads: 12
- Favorites: 0
- Popularity score: 0