# Component Scaffold

> Scaffold a new UI component following Pierre design system patterns

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

---


# Component Scaffold

Create a new React component following the Pierre design system conventions.

## Component: $ARGUMENTS

Generate a component with:

1. **File Location**: `frontend/src/components/[ComponentName].tsx`

2. **Standard Structure**:
```tsx
// ABOUTME: [Brief description of what this component does]
// ABOUTME: Part of the Pierre admin dashboard

import React from 'react';
import clsx from 'clsx';
import { Button, Card, CardHeader, Badge } from './ui';

interface [ComponentName]Props {
  // Define props with TypeScript
  className?: string;
}

export const [ComponentName]: React.FC<[ComponentName]Props> = ({
  className,
  ...props
}) => {
  return (
    <Card className={clsx('', className)}>
      {/* Component content */}
    </Card>
  );
};
```

3. **Requirements**:
   - Use design system components (Button, Card, Badge, etc.)
   - Use `pierre-*` color classes only
   - Follow Tailwind spacing scale
   - Include loading and error states if applicable
   - Add TypeScript interfaces for all props

4. **If this is a form component**:
   - Use `input-field` class for inputs
   - Use `label` class for labels
   - Include validation error display
   - Use `Button variant="primary"` for submit

5. **If this is a list component**:
   - Use `Card` for each item
   - Include empty state
   - Include loading skeleton state
   - Use `Badge` for status indicators

After scaffolding, run `/design-review` to validate compliance.