react-dev

Malicious tool definition detected

Tool: README.md [1/2] Description: # React TypeScript Development Skill ## Purpose The `react-dev` skill provides comprehensive TypeScript patterns and best practices for building type-safe React applications.

Tool: README.md [2/2] Description: const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => { e.preventDefault(); const formData = new FormData(e.currentTarget); console.log(Object.fromEntries(formData)); }; const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => { console.log(e.target.value); // Typed correctly!

Malicious tool definition detected

Tool: SKILL.md [1/2] Description: --- name: react-dev version: 1.0.0 description: 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.

Tool: SKILL.md [2/2]

Malicious tool definition detected

Tool: examples/generic-components.md [1/2] Description: # Generic Component Patterns Generic components provide type safety while maintaining reusability.

Tool: examples/generic-components.md [2/2] Description: {val.current}/{val.max} </span> )} />; ``` ## Generic Form Field Component Reusable form field with type-safe value handling.

Malicious tool definition detected

Tool: examples/server-components.md [1/2] Description: # Server Components and Server Actions React 19 Server Components run on server, can be async, enable zero-bundle data fetching.

Tool: examples/server-components.md [2/2] Description: wrong!</h2> <p>{error.message}</p> <button onClick={reset}>Try again</button> </div> ); } // Server Component throws error export default async function UserPage({ params }: Props) { const user = await fetchUser(params.id); if (!user) { throw new Error('User not found'); // Caught by error.tsx } return <div>{user.name}</div>; } ``` ## Loading States with loading.tsx ```typescript // app/users/[id]/loading.tsx export default function Loading(

Malicious tool definition detected

Tool: references/event-handlers.md [1/2] Description: # Event Handler TypeScript Patterns Proper event typing ensures type-safe access to event properties and target elements.

Tool: references/event-handlers.md [2/2]

Malicious tool definition detected

Tool: references/hooks.md [1/2] Description: # Hook TypeScript Patterns Type-safe hook patterns for useState, useRef, useReducer, useContext, and custom hooks.

Tool: references/hooks.md [2/2] Description: useMemo with explicit return type const sortedItems = useMemo((): Item[] => { return [...items].sort((a, b) => a.name.localeCompare(b.name)); }, [items]); // useMemo with complex computation const stats = useMemo(() => { return { total: items.length, average: items.reduce((a, b) => a + b.value, 0) / items.length, max: Math.max(...items.map((i) => i.value)), }; }, [items]); ``` ## useImperativeHandle Expose imperative methods from components.

Malicious tool definition detected

Tool: references/react-19-patterns.md [1/2] Description: # React 19 TypeScript Patterns React 19 introduces breaking changes and new APIs requiring updated TypeScript patterns.

Tool: references/react-19-patterns.md [2/2] Description: }: { messages: Message[] }) { const [optimisticMessages, addOptimisticMessage] = useOptimistic( messages, (state, newMessage: Message) => [...state, newMessage] ); async function sendMessage(formData: FormData) { const text = formData.get('message') as string; // Add optimistic message immediately addOptimisticMessage({ id: 'temp', text, sending: true }); // Send to server await fetch('/api/messages', { method: 'POST', body: JSON.stringify

Malicious tool definition detected

Tool: references/react-router.md [1/3] Description: # React Router v7 - Comprehensive Reference Guide ## Overview React Router is a modern routing library that provides flexible client-side and server-side routing for React applications.

Tool: references/react-router.md [2/3] Description: Route.ActionArgs) { const formData = await request.formData(); const email = String(formData.get("email")); const errors: Record<string, string> = {}; if (!email.includes("@")) { errors.email = "Invalid email"; } if (Object.keys(errors).length > 0) { return data({ errors }, { status: 400 }); // Don't revalidate } await createUser({ email }); return redirect("/dashboard"); } export default function Signup() { const fetcher = useFetcher(); const

Tool: references/react-router.md [3/3] Description: Similarities Both React Router v7 and TanStack Router offer first-class TypeScript support: | Feature | React Router v7 | TanStack Router | |---------|-----------------|-----------------| | Route type generation | ✓ Automatic `.react-router/types/` | ✓ Automatic | | Param typing | ✓ Auto-inferred from path | ✓ Auto-inferred | | Loader data typing | ✓ Via `Route.LoaderArgs` | ✓ Via `loader()` return type | | Action typing | ✓ Via `Route.ActionAr

Malicious tool definition detected

Tool: references/tanstack-router.md [1/2] Description: # TanStack Router TypeScript Patterns TanStack Router provides full type safety for routes, params, search params, and loader data.

Tool: references/tanstack-router.md [2/2]