Modern React 19 with TypeScript development. Use for creating React components, hooks, context providers, and applications with strict TypeScript typing. Triggers on requests for React components, functional components, hooks, state management, event handling, or TypeScript interfaces/types for React.
Inherits all available tools
Additional assets for this skill
This skill inherits all available tools. When active, it can use any tool Claude has access to.
references/advanced-patterns.mdimport { type FC, type ReactNode } from 'react';
interface ComponentProps {
children?: ReactNode;
variant?: 'primary' | 'secondary';
disabled?: boolean;
onClick?: () => void;
}
export const Component: FC<ComponentProps> = ({
children,
variant = 'primary',
disabled = false,
onClick,
}) => {
return (
<div
className={`component component--${variant}`}
data-disabled={disabled}
onClick={disabled ? undefined : onClick}
>
{children}
</div>
);
};
| Pattern | Use |
|---|---|
FC<Props> | Standard functional components |
ReactNode | Children, any renderable content |
ComponentPropsWithoutRef<'button'> | Extend native HTML element props |
forwardRef<HTMLDivElement, Props> | Components needing ref forwarding |
onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
onSubmit?: (event: React.FormEvent<HTMLFormElement>) => void;
onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
import { useState, useCallback } from 'react';
interface UseToggleReturn {
value: boolean;
toggle: () => void;
setTrue: () => void;
setFalse: () => void;
}
export const useToggle = (initialValue = false): UseToggleReturn => {
const [value, setValue] = useState(initialValue);
const toggle = useCallback(() => setValue(v => !v), []);
const setTrue = useCallback(() => setValue(true), []);
const setFalse = useCallback(() => setValue(false), []);
return { value, toggle, setTrue, setFalse };
};
import { createContext, useContext, type FC, type ReactNode } from 'react';
interface ThemeContextValue {
theme: 'light' | 'dark';
toggleTheme: () => void;
}
const ThemeContext = createContext<ThemeContextValue | null>(null);
export const useTheme = (): ThemeContextValue => {
const context = useContext(ThemeContext);
if (!context) throw new Error('useTheme must be used within ThemeProvider');
return context;
};
ComponentName/
├── ComponentName.tsx # Implementation
├── ComponentName.types.ts # Types (optional)
├── ComponentName.stories.tsx # Storybook
├── index.ts # Exports
as const for literal types