react-component-development

React Component Development

Overview

This skill provides patterns, conventions, and best practices for building React components with TypeScript. It covers the full spectrum from primitive UI components to complex composed layouts, custom hooks, state management integration, and React 19 server components.

All patterns assume:

• React 18+ or React 19 (server components)
• TypeScript in strict mode
• Tailwind CSS for styling
• ESLint with @typescript-eslint and eslint-plugin-react-hooks

When to Use

Use this skill when:

• Creating new React components
• Refactoring existing components for better patterns
• Implementing custom hooks
• Setting up state management (local or global)
• Building compound component APIs
• Working with React 19 server components
• Implementing form handling logic

Trigger phrases:

• "Create a React component"
• "Build a custom hook"
• "Set up state management"
• "TypeScript component pattern"
• "Compound component"
• "Server component"
• "Form handling in React"

Component Patterns

Functional Component with TypeScript

The standard pattern for all components:

import { type HTMLAttributes, forwardRef } from "react";
import { cn } from "@/lib/utils";

interface CardProps extends HTMLAttributes<HTMLDivElement> {
  variant?: "default" | "outlined" | "elevated";
  padding?: "none" | "sm" | "md" | "lg";
}

const Card = forwardRef<HTMLDivElement, CardProps>(
  ({ className, variant = "default", padding = "md", children, ...props }, ref) => {
    return (
      <div
        ref={ref}
        className={cn(
          "rounded-lg",
          {
            "bg-card text-card-foreground": variant === "default",
            "border border-border bg-transparent": variant === "outlined",
            "bg-card text-card-foreground shadow-lg": variant === "elevated",
          },
          {
            "p-0": padding === "none",
            "p-4": padding === "sm",
            "p-6": padding === "md",
            "p-8": padding === "lg",
          },
          className
        )}
        {...props}
      >
        {children}
      </div>
    );
  }
);
Card.displayName = "Card";

export { Card, type CardProps };