Context

Use this skill when the task is to create a new React component from scratch. All new files live under one folder per component, grouped by category.

Inputs (placeholders)

Root path for all files:

src/components/CATEGORY_NAME/COMPONENT_NAME/

Step 1 — COMPONENT_NAME.types.ts

Create a props interface named COMPONENT_NAME_CAPProps that:

• Puts required props first, then optional props (with ?).
• Adds children?: React.ReactNode only when the component must accept children (omit for a minimal placeholder component).
• Uses handler shapes like onAction?: () => void when event-style callbacks are needed.

Import React types as required (e.g. import type { ReactNode } from 'react' or rely on React.ReactNode with import React from 'react' depending on project style).

Step 2 — COMPONENT_NAME.tsx

Build a functional component:

1. Import React and COMPONENT_NAME_CAPProps from ./COMPONENT_NAME.types.
2. Declare: const COMPONENT_NAME_CAP: React.FC<COMPONENT_NAME_CAPProps> = (props) => { ... } (or destructure props as needed).
3. Export default COMPONENT_NAME_CAP.
4. Minimal behavior: render a short placeholder such as a visible label including the component name (e.g. “Hi from …”) so the file is obviously wired; expand only when the manifest or user asks for more.
5. Styling: Tailwind only via className. Do not use inline style={{ ... }}.

Step 3 — index.ts

Export with:

export { default as COMPONENT_NAME_CAP } from './COMPONENT_NAME';
export type { COMPONENT_NAME_CAPProps } from './COMPONENT_NAME.types';

Adjust export names to match the exact COMPONENT_NAME_CAP and file basenames in the repo.

File checklist

src/components/CATEGORY_NAME/COMPONENT_NAME/COMPONENT_NAME.types.ts
src/components/CATEGORY_NAME/COMPONENT_NAME/COMPONENT_NAME.tsx
src/components/CATEGORY_NAME/COMPONENT_NAME/index.ts

Rules

1. Keep one component per folder; name files consistently with COMPONENT_NAME.
2. Prefer typed props over any; align with existing project conventions for React.FC vs plain functions if the codebase has a standard.
3. No inline styles for this scaffold—Tailwind className only.
4. When tools are available, create or edit real files in the workspace; do not only paste code in chat.

Goal

A consistent, importable component: types + default export + barrel file, under the correct CATEGORY_NAME path, ready for composition or for follow-up tasks (e.g. wiring a service).