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