React TypeScript Development Skill

React TypeScript Development

Core Patterns

Component Structure

import { 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>
  );
};

Typing Guidelines

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

Event Handler Types

onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
onSubmit?: (event: React.FormEvent<HTMLFormElement>) => void;
onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;

Custom Hooks Pattern

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 };
};

Context Pattern

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;
};

File Naming

ComponentName/
├── ComponentName.tsx          # Implementation
├── ComponentName.types.ts     # Types (optional)
├── ComponentName.stories.tsx  # Storybook
├── index.ts                   # Exports

Best Practices

Explicit return types for public functions
Discriminated unions for complex state
as const for literal types
Generic components for reusable patterns
Handle undefined explicitly

Integration

Atomic Design: See atomic-design skill for hierarchy
CSS Tokens: See css-tokens skill for styling
Storybook: See storybook skill for docs

Agent Skills: React TypeScript Development

Install this agent skill to your local

Skill Files