Skip to content
Agentmart
Submit a tool

react-component

Generates complete, production-ready React/TypeScript components using Tailwind CSS.

Skill by nateslabach

IndexedMIT★ 6
Write a review

Install

Works with Claude Code, Claude apps, Codex, Cursor, Gemini CLI, GitHub Copilot, VS Code, OpenCode, Goose, Windsurf. Read the repository before you give any tool access to your data.

npx agentmarket install skill/nateslabach-react-component

Asks which of your tools to add it to (Claude Code, Codex, Cursor, VS Code, Windsurf, Gemini CLI, Claude Desktop) and shows the change first. See https://agentmart.dev/cli.

Get the weekly diff

The weekly diff: one email a week with new agent tools, notable updates and grade changes, plus security alerts for tools you follow. Double opt-in, one-click unsubscribe.

We use your email only for this newsletter. Privacy

About

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.

Use cases: design, frontend

Reviews

Write a review

No reviews yet. Installed it? Reviews come from verified installers only. How reviews work

Permissions

What this skill can do and what it asks for, from its SKILL.md. Checked Oct 25, 2026.

Tools
No tools found
Secrets
None asked for
Install scripts
None found

Network hosts it talks to 1

  • codeload.github.com · found in install command

Files it touches

  • ~/.claude/skills/react-component

What's inside

Skill 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.
License
MIT
Instructions
28 lines in SKILL.md · view on GitHub

Files (1)

  • SKILL.md

SKILL.md (first lines)

# 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

From nateslabach/skills, MIT.

More from nateslabach/skills

Signals

Stars
6
Forks
0
Open issues
0
Last commit (this folder)
May 21, 2026 (5 months ago)

From GitHub (fetched Oct 24, 2026).

Details

License
MIT
Repository
github.com/nateslabach/skills
First seen
Oct 24, 2026
Last checked
Oct 24, 2026
Source
GitHubgithub-graphql

More from nateslabach

Cite this page

react-component skill. Agent Mart. https://agentmart.dev/skills/nateslabach-react-component (last updated 2026-10-24)