ui-component-create

Create UI Component

Create a production-ready UI component with TypeScript, variants, comprehensive tests, and preview integration.

What it does

1. Parses component name and summary from arguments
2. Creates component file with TypeScript and variants
3. Generates comprehensive test file
4. Adds component to preview page
5. Runs quality checks (linting, type checking, tests)
6. Verifies accessibility compliance

Usage

/ui-component Button "Primary action button with variants"
/ui-component Modal "Dialog component for user interactions"
/ui-component Input "Text input field with validation"

💡 Tip: For safer planning, activate Plan Mode (press Shift+Tab twice) before running this command to review the component structure before creation.

Context

Parse $ARGUMENTS to extract:

• [name]: Component name (converted to PascalCase)
• [summary]: Component purpose/description

Example: /ui-component Card "Display content in a card layout"

• [name] = Card
• [summary] = Display content in a card layout

Component Creation

File Structure

Create in: src/components/ui/[name]/[name].tsx

import { FC } from 'react';

interface [name]Props {
  variant?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning';
  size?: 'sm' | 'md' | 'lg';
  disabled?: boolean;
  className?: string;
  children?: React.ReactNode;
}

/**
 * [name] Component
 *
 * [summary]
 *
 * @example
 * ```tsx
 * <[name] variant="primary" size="md">
 *   Content here
 * </[name]>
 * ```
 */
export const [name]: FC<[name]Props> = ({
  variant = 'primary',
  size = 'md',
  disabled = false,
  className,
  children,
}) => {
  // Implementation
  return (
    <div
      className={cn(baseStyles, variantStyles[variant], sizeStyles[size], className)}
      aria-disabled={disabled}
    >
      {children}
    </div>
  );
};

Required Variants

Use theme colors from @src/app/globals.css:

1. primary - Main brand color (primary action)
2. secondary - Secondary brand color (less emphasis)
3. success - Success/confirmation actions (green)
4. danger - Destructive/error actions (red)
5. warning - Caution/warning states (orange)