CtrlK
BlogDocsLog inGet started
Tessl Logo

react-dev

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).

Install with Tessl CLI

npx tessl i github:softaworks/agent-toolkit --skill react-dev
What are skills?

95

1.15x

Does it follow best practices?

Evaluation95%

1.15x

Agent success when using this skill

Validation for skill structure

SKILL.md
Review
Evals

Evaluation results

95%

27%

Build a Contact Form Component Library

React 19 form component with ref and actions

Criteria
Without context
With context

ref as prop pattern

0%

100%

No forwardRef usage

0%

100%

ComponentPropsWithoutRef

0%

100%

useActionState for form

100%

100%

No useFormState

100%

100%

isPending from useActionState

100%

100%

'use client' directive

100%

100%

'use server' directive

100%

100%

Specific event types

100%

62%

Discriminated union for Button

100%

100%

ReactNode for children

100%

75%

80%

3%

Build a Generic Data Display Component Kit

Generic typed data components

Criteria
Without context
With context

Generic type parameter

100%

100%

keyof T for columns

100%

100%

Render prop on columns

100%

100%

keyExtractor pattern

100%

100%

Constrained generic

0%

0%

Render prop on ItemList

100%

100%

ReactNode for rendering

100%

100%

as const for hook return

0%

0%

Explicit useState generic

100%

100%

SelectDropdown generic

70%

100%

No any types

100%

100%

100%

18%

Build a Theme and Notification System with Typed Hooks

Custom hooks and state management typing

Criteria
Without context
With context

as const on useToggle

0%

100%

Context null guard

100%

100%

createContext with null

0%

100%

Discriminated union actions

100%

100%

Typed reducer function

100%

100%

Mutable ref for timeout

100%

100%

Explicit useState generic

100%

100%

ReactNode for children

100%

100%

Notification type union

100%

100%

No any types

100%

100%

Proper ref cleanup

100%

100%

100%

Build a Task Management Page with Server and Client Components

Server/client component architecture

Criteria
Without context
With context

'use server' directive

100%

100%

'use client' directives

100%

100%

No directive mixing

100%

100%

page.tsx is server component

100%

100%

useActionState for form

100%

100%

useOptimistic for toggle

100%

100%

Promise handoff without await

100%

100%

Specific event types

100%

100%

Server action prevState param

100%

100%

Typed form state

100%

100%

No any types

100%

100%

100%

16%

Set Up Type-Safe Routing for a Product Catalog

TanStack Router type-safe routing setup

Criteria
Without context
With context

validateSearch with Zod

100%

100%

Zod search param types

100%

100%

createRoute usage

100%

100%

Typed loader function

100%

100%

useLoaderData with from

20%

100%

useSearch with from

100%

100%

useParams with from

0%

100%

Type-safe navigation

100%

100%

Route tree construction

100%

100%

getParentRoute defined

100%

100%

$param syntax

100%

100%

Evaluated
Agent
Claude Code

Table of Contents

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.