# Scaffold Component

> Generate a new React component following project conventions. Use when creating new components or UI features.

- Skill: `majiayu000/scaffold-component` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/scaffold-component`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/scaffold-component/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/scaffold-component

---


Create a new React component named `$ARGUMENTS` following project conventions:

1. **Create the component file** at `client/src/components/$ARGUMENTS.tsx`

2. **Follow this structure:**
   ```typescript
   import React from 'react';
   // Icons (if needed)
   // Types (if needed)

   interface Props {
     // Define props here
   }

   export function $ARGUMENTS({ ...props }: Props) {
     // State hooks

     // Handler functions

     return (
       <section className="bg-white rounded border border-slate-200 p-4">
         <h3 className="font-bold text-brand-navy mb-4">Title</h3>
         {/* Content */}
       </section>
     );
   }
   ```

3. **Conventions:**
   - Use function components (not arrow functions for exports)
   - Interface for Props comes first
   - Imports order: React, Icons, Types, local imports
   - Use Tailwind CSS classes
   - Use `brand-navy` for headings

4. **After creation:**
   - Add export to `client/src/components/index.ts` if it exists
   - Run build to verify no type errors