Name: Create Component
Author: Wndburst

Create Component

Create a new React UI component following the project's established patterns. Use when the user asks to create, add, or build a new component, UI element, or widget. Covers component file, types, styling with Tailwind + CSS variables, and ref forwarding.

Wndburst0 星标2026年3月19日

职业
分类: 前端

When to Use

Use this skill when the user asks to create a new UI component for the project. This includes buttons, cards, modals, form elements, data displays, or any reusable React component.

Project Conventions

File Location

UI primitives: src/components/ui/{ComponentName}.tsx
Feature-specific components: src/components/{feature}/{ComponentName}.tsx
Page-level components: src/app/{route}/_components/{ComponentName}.tsx

Component Structure Pattern

Every component must follow this structure:

import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
import { cn } from '@/lib/utils/cn';

// 1. Export types first
export type ComponentVariant = 'primary' | 'secondary';
export type ComponentSize = 'sm' | 'md' | 'lg';

export interface ComponentProps extends HTMLAttributes<HTMLDivElement> {
  /** JSDoc for every prop */
  variant?: ComponentVariant;
  size?: ComponentSize;
}

// 2. Define style maps as Record<Variant, string>
const variantStyles: Record<ComponentVariant, string> = {
  primary: cn('bg-(--color-primary) text-(--color-primary-fg)', 'hover:bg-(--color-primary-hover)'),
  secondary: cn('bg-(--color-bg) text-(--color-fg)', 'border border-(--color-border)'),
};

const sizeStyles: Record<ComponentSize, string> = {
  sm: 'h-9 px-4 text-sm',
  md: 'h-11 px-5 text-base',
  lg: 'h-13 px-7 text-lg',
};

// 3. Component with forwardRef
export const Component = forwardRef<HTMLDivElement, ComponentProps>(
  ({ className, variant = 'primary', size = 'md', children, ...props }, ref) => {
    return (
      <div
        ref={ref}
        className={cn(
          // Base styles
          'inline-flex items-center justify-center',
          'rounded-xl',
          'transition-all duration-200',
          // Variant and size
          variantStyles[variant],
          sizeStyles[size],
          // Custom classes (always last)
          className
        )}
        {...props}
      >
        {children}
      </div>
    );
  }
);

Component.displayName = 'Component';

// 4. Default export
export default Component;

Create Component

Wndburst0 星标2026年3月19日

职业
分类: 前端

Project Conventions

File Location

UI primitives: src/components/ui/{ComponentName}.tsx

Feature-specific components: src/components/{feature}/{ComponentName}.tsx

Page-level components: src/app/{route}/_components/{ComponentName}.tsx

Component Structure Pattern

Every component must follow this structure:

import { forwardRef, type HTMLAttributes, type ReactNode } from 'react'; import { cn } from '@/lib/utils/cn'; // 1. Export types first export type ComponentVariant = 'primary' | 'secondary'; export type ComponentSize = 'sm' | 'md' | 'lg'; export interface ComponentProps extends HTMLAttributes<HTMLDivElement> { /** JSDoc for every prop */ variant?: ComponentVariant; size?: ComponentSize; } // 2. Define style maps as Record<Variant, string> const variantStyles: Record<ComponentVariant, string> = { primary: cn('bg-(--color-primary) text-(--color-primary-fg)', 'hover:bg-(--color-primary-hover)'), secondary: cn('bg-(--color-bg) text-(--color-fg)', 'border border-(--color-border)'), }; const sizeStyles: Record<ComponentSize, string> = { sm: 'h-9 px-4 text-sm', md: 'h-11 px-5 text-base', lg: 'h-13 px-7 text-lg', }; // 3. Component with forwardRef export const Component = forwardRef<HTMLDivElement, ComponentProps>( ({ className, variant = 'primary', size = 'md', children, ...props }, ref) => { return ( <div ref={ref} className={cn( // Base styles 'inline-flex items-center justify-center', 'rounded-xl', 'transition-all duration-200', // Variant and size variantStyles[variant], sizeStyles[size], // Custom classes (always last) className )} {...props} > {children} </div> ); } ); Component.displayName = 'Component'; // 4. Default export export default Component;

Create Component

When to Use

Project Conventions

File Location

Component Structure Pattern

Create Component

When to Use

Project Conventions

File Location

Component Structure Pattern

Compound Component Pattern (for complex components)

Styling Rules

Available CSS Variables

Accessibility Requirements

Icons

After Creating the Component

Extract Errors

Frontend Patterns

Coding Standards

Coding Standards

Coding Standards

Frontend Patterns