React component

Skill nateslabach/skills/skills/react-component

Reusable skills for your AI agents: better judgement, tighter responses, and production-grade patterns. Make your agents think, not just comply.

Install

npx -y skills add nateslabach/skills --skill react-component

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

4 stars4 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

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.md

1.6 KB, as published. Nobody here has run it

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