| name | react-component |
| description | 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. |
react-component
Generates self-contained React/TypeScript components — plan first, confirm, then produce complete code with no placeholders.
Workflow
- Plan: Present a concise pseudocode implementation plan covering structure, state, and key logic.
- Confirm: Verify requirements and constraints with the user before writing code.
- 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
