# React Component

> Generates complete, production-ready React/TypeScript components using Tailwind CSS. Use when building UI components in a React or Next.js project that requires TypeScript, Tailwind styling, and accessible interactions.

- Skill: `nateslabach/react-component` (Agent Skill)
- Install (CLI): `npx skillmds@latest add nateslabach/react-component`
- Raw SKILL.md: https://api.skillmd.com/api/skills/nateslabach/react-component/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: nateslabach (https://skillmd.com/u/nateslabach)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/nateslabach/react-component

---


# react-component

Generates self-contained React/TypeScript components — plan first, confirm, then produce complete code with no placeholders.

## Workflow

1. **Plan**: Present a concise pseudocode implementation plan covering structure, state, and key logic.
2. **Confirm**: Verify requirements and constraints with the user before writing code.
3. **Code**: Write the full implementation. Leave no TODOs, placeholders, or missing pieces.

## Code Rules

- **Tailwind only** — no CSS files, no inline styles. All styling via Tailwind classes.
- **Conditional classes** — use `clsx` or concise template literals; avoid complex nested ternaries.
- **Handler naming** — prefix all event handlers with `handle`: `handleClick`, `handleKeyDown`.
- **Early returns** — use them wherever they improve readability.
- **Accessibility** — non-native interactive elements (e.g., `<div>`, `<span>`) must have `tabIndex={0}`, `aria-label`, `onClick`, and `onKeyDown`.
- **Types** — define prop types explicitly; avoid `any`.
- **Naming** — descriptive variable and function names throughout.

## Output Format

- One self-contained `.tsx` file with a default export
- All imports included, component properly named
- No prose outside the code block in the final answer
- Must compile in a standard React/Next.js project without modification