react-component
Generates complete, production-ready React/TypeScript components using Tailwind CSS.
Skill by nateslabach
Chalk Labs
Need help deploying react-component?
Chalk Labs sets up agents like this inside real teams: connected to your tools, tested on your data, with a human in the loop where it matters.
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.
About
Use cases: design, frontend
Reviews
Write a reviewNo 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 modificationFrom nateslabach/skills, MIT.
More from nateslabach/skills
- 0.627score
openrouter
nateslabach
Choose OpenRouter models and routers, query live catalog data, use structured outputs and batch inference, and debug routing with metadata.
SkillAFreshness: A★ 6Claude Code +9 - 0.622score
deep-research
nateslabach
Produces thorough, multi-source cited research reports from web and news without paid APIs.
SkillAFreshness: A★ 6Claude Code +9 - 0.622score
ai-systems-review
nateslabach
Hostile self-review of recently written AI workflow code that then applies fixes (agents, tools, chat context, summarization, tokens, attachments).
SkillAFreshness: A★ 6Claude Code +9 - 0.622score
adversarial-challenge
nateslabach
Devil's-advocate attack on AI workflow designs — threat model, assumption challenges, code critiques, and hypothetical redesigns with no file edits.
SkillAFreshness: A★ 6Claude Code +9 - 0.622score
branding
nateslabach
Builds personal brand assets using Seth Godin's frameworks: signature symbol, slogan, surprise (Purple Cow), salient idea, and signature story.
SkillAFreshness: A★ 6Claude Code +9 - 0.622score
code-review
nateslabach
Structured 3-phase peer review of a diff or PR — intent, issues by severity, then pointed merge-readiness questions and a verdict.
SkillAFreshness: A★ 6Claude Code +9 - 0.582score
asd-ste100
nateslabach
Writes in ASD-STE100 simplified technical English — short sentences, plain words, active voice.
SkillBFreshness: B★ 6Claude Code +9 - 0.532score
model-bench
nateslabach
Run a 3-leg evaluation against a newly released LLM.
SkillCFreshness: C★ 6Claude Code +9 - 0.532score
adhd
nateslabach
Formats output for ADHD-friendly action — lead with the next step, number tasks, restate state, cut fluff.
SkillCFreshness: C★ 6Claude Code +9 - 0.532score
css-reset
nateslabach
Applies a modern CSS reset covering box-sizing, margin removal, text rendering, media defaults, and root stacking context.
SkillCFreshness: C★ 6Claude Code +9 - 0.532score
brutal-truth
nateslabach
Disables the AI's default hedging, diplomatic softening, and social-nicety layers to deliver cold, unfiltered, consequentialist analysis on any topic.
SkillCFreshness: C★ 6Claude Code +9 - 0.532score
prisma
nateslabach
TypeScript and Prisma ORM best practices for schema design, type-safe queries, migrations, and error handling.
SkillCFreshness: C★ 6Claude Code +9
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
- 0.627score
openrouter
nateslabach
Choose OpenRouter models and routers, query live catalog data, use structured outputs and batch inference, and debug routing with metadata.
SkillAFreshness: A★ 6Claude Code +9 - 0.622score
code-review
nateslabach
Structured 3-phase peer review of a diff or PR — intent, issues by severity, then pointed merge-readiness questions and a verdict.
SkillAFreshness: A★ 6Claude Code +9 - 0.622score
ai-systems-review
nateslabach
Hostile self-review of recently written AI workflow code that then applies fixes (agents, tools, chat context, summarization, tokens, attachments).
SkillAFreshness: A★ 6Claude Code +9 - 0.622score
adversarial-challenge
nateslabach
Devil's-advocate attack on AI workflow designs — threat model, assumption challenges, code critiques, and hypothetical redesigns with no file edits.
SkillAFreshness: A★ 6Claude Code +9 - 0.622score
deep-research
nateslabach
Produces thorough, multi-source cited research reports from web and news without paid APIs.
SkillAFreshness: A★ 6Claude Code +9 - 0.622score
branding
nateslabach
Builds personal brand assets using Seth Godin's frameworks: signature symbol, slogan, surprise (Purple Cow), salient idea, and signature story.
SkillAFreshness: A★ 6Claude Code +9
Done for you
Rather not set it up yourself?
Chalk Labs scopes, builds and runs agents for your team: the task audit, the eval harness, the integrations and the weekly ops report. Fixed scope, priced before we start.
See how we build AI agents →Read the case studies
Chalk Labs is a two-founder AI and growth studio. We build AI agents, CRMs and MVPs for Web3 and AI companies, and have shipped 50+ product and token launches.
- launches shipped
- 50+
- launches shipped
- media placements
- 500+
- media placements
- founders on every account
- 2
- founders on every account
Press we've placed: Forbes · CoinDesk · Decrypt · Cointelegraph · The Block
Rahil Jain, Co-founder, Chalk Labs. Ex-Goldman Sachs engineer. You talk to the person who builds it.
Get react-component running in your business
Tell us what you want to automate. A founder replies within one working day with a plan, not a pitch deck.
Cite this page
react-component skill. Agent Mart. https://agentmart.dev/skills/nateslabach-react-component (last updated 2026-10-24)