Enforce component design system in React

nextjsreacttypescript
All design system components must use forwardRef pattern, CVA for variants, and follow the established component structure.
Bad:
```typescript
interface ButtonProps {
  className?: string
  variant?: string
  size?: string

Install this rule for wispbit

Add this rule to wispbit and it will run when you open a pull request

Install this rule for Coderabbit

Copy the configuration below and add it to your repository as .coderabbit.yml in your project root.

reviews:
  path_instructions:
    - path: "*.ts,*.tsx"
      instructions: |
                
        All design system components must use forwardRef pattern, CVA for variants, and follow the established component structure.
        
        Bad:
        
        ```typescript
        interface ButtonProps {
          className?: string
          variant?: string
          size?: string
          children: React.ReactNode
        }
        
        const Button = ({ className, variant, size, children, ...props }: ButtonProps) => {
          let baseClasses = "inline-flex items-center justify-center rounded-md text-sm font-medium"
        
          if (variant === "destructive") {
            baseClasses += " bg-red-500 text-white"
          } else {
            baseClasses += " bg-blue-500 text-white"
          }
        
          if (size === "sm") {
            baseClasses += " h-9 px-3"
          } else {
            baseClasses += " h-10 px-4 py-2"
          }
        
          return (
            <button className={`${baseClasses} ${className}`} {...props}>
              {children}
            </button>
          )
        }
        ```
        
        Good:
        
        ```typescript
        import { cva, type VariantProps } from "class-variance-authority"
        import { clx } from "../utils"
        
        const buttonVariants = cva(
          "inline-flex items-center justify-center rounded-md text-sm font-medium",
          {
            variants: {
              variant: {
                default: "bg-primary text-primary-foreground hover:bg-primary/90",
                destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
              },
              size: {
                default: "h-10 px-4 py-2",
                sm: "h-9 rounded-md px-3",
              },
            },
            defaultVariants: {
              variant: "default",
              size: "default",
            },
          }
        )
        
        export interface ButtonProps
          extends React.ButtonHTMLAttributes<HTMLButtonElement>,
            VariantProps<typeof buttonVariants> {}
        
        const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
          ({ className, variant, size, ...props }, ref) => {
            return (
              <button
                className={clx(buttonVariants({ variant, size }), className)}
                ref={ref}
                {...props}
              />
            )
          }
        )
        Button.displayName = "Button"
        
        export { Button, buttonVariants }
        ```

Install this rule for Greptile

Greptile rules can be added through the web interface. Please see this documentation for details on how to add custom rules and context.

All design system components must use forwardRef pattern, CVA for variants, and follow the established component structure.
Bad:
```typescript
interface ButtonProps {
  className?: string
  variant?: string
  size?: string
  children: React.ReactNode
}
const Button = ({ className, variant, size, children, ...props }: ButtonProps) => {
  let baseClasses = "inline-flex items-center justify-center rounded-md text-sm font-medium"
  if (variant === "destructive") {
    baseClasses += " bg-red-500 text-white"
  } else {
    baseClasses += " bg-blue-500 text-white"
  }
  if (size === "sm") {
    baseClasses += " h-9 px-3"
  } else {
    baseClasses += " h-10 px-4 py-2"
  }
  return (
    <button className={`${baseClasses} ${className}`} {...props}>
      {children}
    </button>
  )
}
```
Good:
```typescript
import { cva, type VariantProps } from "class-variance-authority"
import { clx } from "../utils"
const buttonVariants = cva(
  "inline-flex items-center justify-center rounded-md text-sm font-medium",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
      },
      size: {
        default: "h-10 px-4 py-2",
        sm: "h-9 rounded-md px-3",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)
export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {}
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, ...props }, ref) => {
    return (
      <button
        className={clx(buttonVariants({ variant, size }), className)}
        ref={ref}
        {...props}
      />
    )
  }
)
Button.displayName = "Button"
export { Button, buttonVariants }
```

File Path Patterns:

*.ts
*.tsx

Install this rule for GitHub Copilot

Copilot instructions can be added through the interface. See the documentation for details on how to create coding guidelines.

All design system components must use forwardRef pattern, CVA for variants, and follow the established component structure.
Bad:
```typescript
interface ButtonProps {
  className?: string
  variant?: string
  size?: string
  children: React.ReactNode
}
const Button = ({ className, variant, size, children, ...props }: ButtonProps) => {
  let baseClasses = "inline-flex items-center justify-center rounded-md text-sm font-medium"
  if (variant === "destructive") {
    baseClasses += " bg-red-500 text-white"
  } else {
    baseClasses += " bg-blue-500 text-white"
  }
  if (size === "sm") {
    baseClasses += " h-9 px-3"
  } else {
    baseClasses += " h-10 px-4 py-2"
  }
  return (
    <button className={`${baseClasses} ${className}`} {...props}>
      {children}
    </button>
  )
}
```
Good:
```typescript
import { cva, type VariantProps } from "class-variance-authority"
import { clx } from "../utils"
const buttonVariants = cva(
  "inline-flex items-center justify-center rounded-md text-sm font-medium",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
      },
      size: {
        default: "h-10 px-4 py-2",
        sm: "h-9 rounded-md px-3",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)
export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {}
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, ...props }, ref) => {
    return (
      <button
        className={clx(buttonVariants({ variant, size }), className)}
        ref={ref}
        {...props}
      />
    )
  }
)
Button.displayName = "Button"
export { Button, buttonVariants }
```

File Path Patterns:

*.ts
*.tsx

Install this rule for Graphite Diamond

Diamond custom rules can be added through the interface. See the documentation for details on how to create custom rules.

All design system components must use forwardRef pattern, CVA for variants, and follow the established component structure.
Bad:
```typescript
interface ButtonProps {
  className?: string
  variant?: string
  size?: string
  children: React.ReactNode
}
const Button = ({ className, variant, size, children, ...props }: ButtonProps) => {
  let baseClasses = "inline-flex items-center justify-center rounded-md text-sm font-medium"
  if (variant === "destructive") {
    baseClasses += " bg-red-500 text-white"
  } else {
    baseClasses += " bg-blue-500 text-white"
  }
  if (size === "sm") {
    baseClasses += " h-9 px-3"
  } else {
    baseClasses += " h-10 px-4 py-2"
  }
  return (
    <button className={`${baseClasses} ${className}`} {...props}>
      {children}
    </button>
  )
}
```
Good:
```typescript
import { cva, type VariantProps } from "class-variance-authority"
import { clx } from "../utils"
const buttonVariants = cva(
  "inline-flex items-center justify-center rounded-md text-sm font-medium",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
      },
      size: {
        default: "h-10 px-4 py-2",
        sm: "h-9 rounded-md px-3",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)
export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {}
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, ...props }, ref) => {
    return (
      <button
        className={clx(buttonVariants({ variant, size }), className)}
        ref={ref}
        {...props}
      />
    )
  }
)
Button.displayName = "Button"
export { Button, buttonVariants }
```

File Path Patterns:

*.ts
*.tsx

Use with Cline

Copy the rule below and ask Cline to review your code using this rule

All design system components must use forwardRef pattern, CVA for variants, and follow the established component structure.
Bad:
```typescript
interface ButtonProps {
  className?: string
  variant?: string
  size?: string
  children: React.ReactNode
}
const Button = ({ className, variant, size, children, ...props }: ButtonProps) => {
  let baseClasses = "inline-flex items-center justify-center rounded-md text-sm font-medium"
  if (variant === "destructive") {
    baseClasses += " bg-red-500 text-white"
  } else {
    baseClasses += " bg-blue-500 text-white"
  }
  if (size === "sm") {
    baseClasses += " h-9 px-3"
  } else {
    baseClasses += " h-10 px-4 py-2"
  }
  return (
    <button className={`${baseClasses} ${className}`} {...props}>
      {children}
    </button>
  )
}
```
Good:
```typescript
import { cva, type VariantProps } from "class-variance-authority"
import { clx } from "../utils"
const buttonVariants = cva(
  "inline-flex items-center justify-center rounded-md text-sm font-medium",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
      },
      size: {
        default: "h-10 px-4 py-2",
        sm: "h-9 rounded-md px-3",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)
export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {}
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, ...props }, ref) => {
    return (
      <button
        className={clx(buttonVariants({ variant, size }), className)}
        ref={ref}
        {...props}
      />
    )
  }
)
Button.displayName = "Button"
export { Button, buttonVariants }
```

Use with OpenAI Codex

Copy the rule below and ask OpenAI Codex to review your code using this rule

All design system components must use forwardRef pattern, CVA for variants, and follow the established component structure.
Bad:
```typescript
interface ButtonProps {
  className?: string
  variant?: string
  size?: string
  children: React.ReactNode
}
const Button = ({ className, variant, size, children, ...props }: ButtonProps) => {
  let baseClasses = "inline-flex items-center justify-center rounded-md text-sm font-medium"
  if (variant === "destructive") {
    baseClasses += " bg-red-500 text-white"
  } else {
    baseClasses += " bg-blue-500 text-white"
  }
  if (size === "sm") {
    baseClasses += " h-9 px-3"
  } else {
    baseClasses += " h-10 px-4 py-2"
  }
  return (
    <button className={`${baseClasses} ${className}`} {...props}>
      {children}
    </button>
  )
}
```
Good:
```typescript
import { cva, type VariantProps } from "class-variance-authority"
import { clx } from "../utils"
const buttonVariants = cva(
  "inline-flex items-center justify-center rounded-md text-sm font-medium",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
      },
      size: {
        default: "h-10 px-4 py-2",
        sm: "h-9 rounded-md px-3",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)
export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {}
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, ...props }, ref) => {
    return (
      <button
        className={clx(buttonVariants({ variant, size }), className)}
        ref={ref}
        {...props}
      />
    )
  }
)
Button.displayName = "Button"
export { Button, buttonVariants }
```

Use with Cursor

Copy the rule below and ask Cursor to review your code using this rule

All design system components must use forwardRef pattern, CVA for variants, and follow the established component structure.
Bad:
```typescript
interface ButtonProps {
  className?: string
  variant?: string
  size?: string
  children: React.ReactNode
}
const Button = ({ className, variant, size, children, ...props }: ButtonProps) => {
  let baseClasses = "inline-flex items-center justify-center rounded-md text-sm font-medium"
  if (variant === "destructive") {
    baseClasses += " bg-red-500 text-white"
  } else {
    baseClasses += " bg-blue-500 text-white"
  }
  if (size === "sm") {
    baseClasses += " h-9 px-3"
  } else {
    baseClasses += " h-10 px-4 py-2"
  }
  return (
    <button className={`${baseClasses} ${className}`} {...props}>
      {children}
    </button>
  )
}
```
Good:
```typescript
import { cva, type VariantProps } from "class-variance-authority"
import { clx } from "../utils"
const buttonVariants = cva(
  "inline-flex items-center justify-center rounded-md text-sm font-medium",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
      },
      size: {
        default: "h-10 px-4 py-2",
        sm: "h-9 rounded-md px-3",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)
export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {}
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, ...props }, ref) => {
    return (
      <button
        className={clx(buttonVariants({ variant, size }), className)}
        ref={ref}
        {...props}
      />
    )
  }
)
Button.displayName = "Button"
export { Button, buttonVariants }
```

Use with Claude Code

Copy the rule below and ask Claude Code to review your code using this rule

All design system components must use forwardRef pattern, CVA for variants, and follow the established component structure.
Bad:
```typescript
interface ButtonProps {
  className?: string
  variant?: string
  size?: string
  children: React.ReactNode
}
const Button = ({ className, variant, size, children, ...props }: ButtonProps) => {
  let baseClasses = "inline-flex items-center justify-center rounded-md text-sm font-medium"
  if (variant === "destructive") {
    baseClasses += " bg-red-500 text-white"
  } else {
    baseClasses += " bg-blue-500 text-white"
  }
  if (size === "sm") {
    baseClasses += " h-9 px-3"
  } else {
    baseClasses += " h-10 px-4 py-2"
  }
  return (
    <button className={`${baseClasses} ${className}`} {...props}>
      {children}
    </button>
  )
}
```
Good:
```typescript
import { cva, type VariantProps } from "class-variance-authority"
import { clx } from "../utils"
const buttonVariants = cva(
  "inline-flex items-center justify-center rounded-md text-sm font-medium",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
      },
      size: {
        default: "h-10 px-4 py-2",
        sm: "h-9 rounded-md px-3",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)
export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {}
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, ...props }, ref) => {
    return (
      <button
        className={clx(buttonVariants({ variant, size }), className)}
        ref={ref}
        {...props}
      />
    )
  }
)
Button.displayName = "Button"
export { Button, buttonVariants }
```

Install this rule for Windsurf

To set up rules for Windsurf Reviews, please see this documentation 

All design system components must use forwardRef pattern, CVA for variants, and follow the established component structure.
Bad:
```typescript
interface ButtonProps {
  className?: string
  variant?: string
  size?: string
  children: React.ReactNode
}
const Button = ({ className, variant, size, children, ...props }: ButtonProps) => {
  let baseClasses = "inline-flex items-center justify-center rounded-md text-sm font-medium"
  if (variant === "destructive") {
    baseClasses += " bg-red-500 text-white"
  } else {
    baseClasses += " bg-blue-500 text-white"
  }
  if (size === "sm") {
    baseClasses += " h-9 px-3"
  } else {
    baseClasses += " h-10 px-4 py-2"
  }
  return (
    <button className={`${baseClasses} ${className}`} {...props}>
      {children}
    </button>
  )
}
```
Good:
```typescript
import { cva, type VariantProps } from "class-variance-authority"
import { clx } from "../utils"
const buttonVariants = cva(
  "inline-flex items-center justify-center rounded-md text-sm font-medium",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
      },
      size: {
        default: "h-10 px-4 py-2",
        sm: "h-9 rounded-md px-3",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)
export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {}
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, ...props }, ref) => {
    return (
      <button
        className={clx(buttonVariants({ variant, size }), className)}
        ref={ref}
        {...props}
      />
    )
  }
)
Button.displayName = "Button"
export { Button, buttonVariants }
```