react-component-builder

by AgentsRoomVerified by AgentsRoomNo install yetNo like yetUpdated May 7, 2026Category: Engineering

What it does

Use when creating new React components. Generates them with TypeScript, Tailwind, and colocated tests.

Install opens this entry in your AgentsRoom desktop app. If the app is not installed yet, you will be sent to the download page.

SKILL.md

---
name: react-component-builder
description: Use when creating new React components. Generates them with TypeScript, Tailwind, and colocated tests.
---

# React component builder

When asked to create a new component:

1. Place it in `src/components/<Name>.tsx` unless told otherwise.
2. Use `forwardRef` if the component accepts a `ref` prop.
3. Type props with an exported interface named `<Name>Props`.
4. Style with Tailwind utility classes.
5. Add a colocated `<Name>.test.tsx` covering the happy path and one edge case.

Avoid:
- `React.FC` (prefer typed function declarations)
- Index re-exports unless explicitly requested
- Inline objects in JSX props (extract to `useMemo` if needed)