Agent skill

react-development

Specialized skill for React component development, hooks patterns, state management, context API, performance optimization, and modern React best practices.

View SKILL.md on GitHub Repository
Stars 514
Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/a5c-ai/babysitter/tree/main/library/specializations/web-development/skills/react-development

SKILL.md

React Development Skill

Expert assistance for building React applications with modern patterns, hooks, state management, and performance optimization.

Capabilities

  • Generate React components with TypeScript and proper typing
  • Implement custom hooks with composition patterns
  • Configure state management (Context API, Redux Toolkit, Zustand)
  • Optimize rendering performance with memoization
  • Set up component testing with React Testing Library
  • Create accessible, reusable component libraries

Usage

Invoke this skill when you need to:

  • Create new React components with best practices
  • Implement custom hooks for shared logic
  • Set up state management architecture
  • Optimize component rendering performance
  • Configure React project structure

Inputs

Parameter Type Required Description
componentName string Yes Name of the component (PascalCase)
componentType string No functional, class (default: functional)
stateManagement string No context, redux, zustand, jotai, none
typescript boolean No Use TypeScript (default: true)
testing boolean No Generate tests (default: true)
storybook boolean No Generate Storybook stories (default: false)

Component Configuration

json
{
  "componentName": "UserProfile",
  "componentType": "functional",
  "props": [
    { "name": "user", "type": "User", "required": true },
    { "name": "onUpdate", "type": "(user: User) => void", "required": false }
  ],
  "hooks": ["useState", "useEffect", "useCallback"],
  "typescript": true,
  "testing": true
}

Output Structure

src/
├── components/
│   └── UserProfile/
│       ├── index.ts                 # Barrel export
│       ├── UserProfile.tsx          # Component implementation
│       ├── UserProfile.types.ts     # Type definitions
│       ├── UserProfile.hooks.ts     # Custom hooks
│       ├── UserProfile.styles.ts    # Styled components or CSS modules
│       ├── UserProfile.test.tsx     # Unit tests
│       └── UserProfile.stories.tsx  # Storybook stories (optional)
├── hooks/
│   ├── index.ts                     # Hook exports
│   ├── useDebounce.ts              # Debounce hook
│   ├── useLocalStorage.ts          # LocalStorage hook
│   └── useFetch.ts                 # Data fetching hook
└── context/
    ├── index.ts                     # Context exports
    └── UserContext.tsx             # User context provider

Generated Code Patterns

Functional Component Template

typescript
import { memo, useCallback, useState } from 'react';
import type { UserProfileProps } from './UserProfile.types';
import { useUserData } from './UserProfile.hooks';

export const UserProfile = memo(function UserProfile({
  user,
  onUpdate,
}: UserProfileProps) {
  const [isEditing, setIsEditing] = useState(false);
  const { updateUser, isLoading } = useUserData();

  const handleSave = useCallback(async (data: UserData) => {
    await updateUser(data);
    onUpdate?.(data);
    setIsEditing(false);
  }, [updateUser, onUpdate]);

  return (
    <div className="user-profile" role="region" aria-label="User Profile">
      {/* Component content */}
    </div>
  );
});

UserProfile.displayName = 'UserProfile';

Custom Hook Template

typescript
import { useState, useEffect, useCallback } from 'react';

interface UseAsyncDataOptions<T> {
  initialData?: T;
  onError?: (error: Error) => void;
}

export function useAsyncData<T>(
  fetchFn: () => Promise<T>,
  deps: unknown[] = [],
  options: UseAsyncDataOptions<T> = {}
) {
  const [data, setData] = useState<T | undefined>(options.initialData);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<Error | null>(null);

  const execute = useCallback(async () => {
    setIsLoading(true);
    setError(null);
    try {
      const result = await fetchFn();
      setData(result);
      return result;
    } catch (err) {
      const error = err instanceof Error ? err : new Error(String(err));
      setError(error);
      options.onError?.(error);
    } finally {
      setIsLoading(false);
    }
  }, deps);

  useEffect(() => {
    execute();
  }, [execute]);

  return { data, isLoading, error, refetch: execute };
}

Context Provider Template

typescript
import {
  createContext,
  useContext,
  useReducer,
  useMemo,
  type ReactNode,
} from 'react';

interface State {
  user: User | null;
  isAuthenticated: boolean;
}

type Action =
  | { type: 'SET_USER'; payload: User }
  | { type: 'LOGOUT' };

const initialState: State = {
  user: null,
  isAuthenticated: false,
};

function reducer(state: State, action: Action): State {
  switch (action.type) {
    case 'SET_USER':
      return { ...state, user: action.payload, isAuthenticated: true };
    case 'LOGOUT':
      return initialState;
    default:
      return state;
  }
}

const UserContext = createContext<{
  state: State;
  dispatch: React.Dispatch<Action>;
} | null>(null);

export function UserProvider({ children }: { children: ReactNode }) {
  const [state, dispatch] = useReducer(reducer, initialState);
  const value = useMemo(() => ({ state, dispatch }), [state]);

  return (
    <UserContext.Provider value={value}>
      {children}
    </UserContext.Provider>
  );
}

export function useUser() {
  const context = useContext(UserContext);
  if (!context) {
    throw new Error('useUser must be used within a UserProvider');
  }
  return context;
}

Performance Optimization Patterns

Memoization

typescript
// Memoize expensive computations
const sortedItems = useMemo(() =>
  items.sort((a, b) => a.name.localeCompare(b.name)),
  [items]
);

// Memoize callbacks to prevent child re-renders
const handleClick = useCallback((id: string) => {
  setSelected(id);
}, []);

// Memoize components
const MemoizedChild = memo(ChildComponent);

Code Splitting

typescript
import { lazy, Suspense } from 'react';

const LazyComponent = lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <Suspense fallback={<LoadingSpinner />}>
      <LazyComponent />
    </Suspense>
  );
}

Dependencies

json
{
  "dependencies": {
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  },
  "devDependencies": {
    "@types/react": "^19.0.0",
    "@types/react-dom": "^19.0.0",
    "@testing-library/react": "^16.0.0",
    "@testing-library/jest-dom": "^6.0.0",
    "vitest": "^2.0.0"
  }
}

Workflow

  1. Analyze requirements - Determine component structure and state needs
  2. Create type definitions - Define props, state, and context types
  3. Implement component - Build with hooks and proper patterns
  4. Add custom hooks - Extract reusable logic
  5. Optimize performance - Apply memoization where needed
  6. Write tests - Component and hook unit tests
  7. Add accessibility - ARIA attributes and keyboard navigation

Best Practices Applied

  • TypeScript strict mode with proper typing
  • Functional components with hooks (no class components)
  • Custom hooks for shared logic
  • Context API for app-wide state
  • Memoization for performance
  • Proper error boundaries
  • Accessibility (a11y) compliance
  • Testing with React Testing Library

References

Target Processes

  • react-application-development
  • component-library-creation
  • state-management-setup
  • performance-optimization
  • frontend-testing

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

a5c-ai/babysitter

gsd-tools

Central utility skill for GSD operations. Provides config parsing, slug generation, timestamps, path operations, and orchestrates calls to other specialized skills. Acts as the unified entry point that the original gsd-tools.cjs provided via its lib/ modules (commands, config, core, init).

514 31
Explore
a5c-ai/babysitter

model-profile-resolution

Resolve model profile (quality/balanced/budget) at orchestration start and map agents to specific models. Enables cost/quality tradeoffs by selecting appropriate AI models for each agent role.

514 31
Explore
a5c-ai/babysitter

verification-suite

Plan structure validation, phase completeness checks, reference integrity verification, and artifact existence confirmation. Provides the structured verification layer ensuring GSD artifacts are well-formed and complete.

514 31
Explore
a5c-ai/babysitter

state-management

STATE.md reading, writing, and field-level updates. Provides cross-session state persistence via .planning/STATE.md with structured fields for current task, completed phases, blockers, decisions, and quick tasks.

514 31
Explore
a5c-ai/babysitter

git-integration

Git commit patterns, formats, and conventions for GSD methodology. Provides atomic commits per task, structured commit messages, planning file commits, branch management, and milestone tag operations.

514 31
Explore
a5c-ai/babysitter

frontmatter-parsing

YAML frontmatter parsing and manipulation for .planning/ documents. Provides read, write, update, query, and validation operations on frontmatter blocks in GSD markdown artifacts.

514 31
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results