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:

// 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.