React Component Dev

# React Component Development — Skill

**Name:** `react-component-dev`
**Purpose:** Build reusable, accessible React components with predictable APIs and ref forwarding.
Use this skill when creating or refactoring components.

**Applies when:** Building new components, refactoring UI components, or defining component APIs.
**Do not use when:** Only editing styles or content in existing components without API changes.

## Rules

- **Composition over configuration:** Prefer `children`/slots over many boolean props.
- **Forward refs:** If a component renders a DOM element, use `forwardRef`.
- **Accessibility:** Use semantic HTML first; add ARIA only when needed.
- **Predictable props:** Follow controlled/uncontrolled conventions.
- **Small and testable:** Extract complex behavior into hooks.

## Workflow

1. Define the component’s responsibility and minimal usage.
2. Choose the API shape (controlled vs uncontrolled as needed).
3. Implement with semantic HTML and accessibility defaults.
4. Add `forwardRef` for DOM-rendering components.
5. Extract complex behavior into hooks if needed.

## Checklists

### Implementation checklist

- [ ] Component has a single responsibility
- [ ] DOM components forward refs
- [ ] Semantic HTML used
- [ ] Keyboard interaction works
- [ ] Props follow React conventions

### Review checklist

- [ ] API is small and composable
- [ ] Example usage is included

## Minimal examples

### forwardRef pattern

```tsx
import * as React from "react";

type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
  variant?: "default" | "ghost";
};

export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ variant = "default", className, ...props }, ref) => {
    return (
      <button
        ref={ref}
        className={[
          variant === "ghost" ? "bg-transparent" : "bg-black text-white",
          className,
        ]
          .filter(Boolean)
          .join(" ")}
        {...props}
      />
    );
  },
);
Button.displayName = "Button";
```

### Compound component

```tsx
export function Card({ children }: { children: React.ReactNode }) {
  return <div className="rounded-lg border p-4">{children}</div>;
}
export function CardHeader({ children }: { children: React.ReactNode }) {
  return <div className="mb-2 font-semibold">{children}</div>;
}
export function CardBody({ children }: { children: React.ReactNode }) {
  return <div>{children}</div>;
}
```

## Common mistakes / pitfalls

- Missing `forwardRef` on input-like components
- Using `div` for buttons/links
- Overloading components with boolean props
- Shipping components without a minimal usage example