Create Darkroom Component

Name: component
Rating: 88
Author: darkroomengineering

Create a React component following Darkroom conventions.

Structure

code

components/<name>/
├── index.tsx           # Component implementation
└── <name>.module.css   # Component styles

Template

index.tsx

tsx

// 'use client' - Only add if component needs:
// - useState, useEffect, or other hooks
// - Event handlers (onClick, onChange, etc.)
// - Browser APIs (window, document, etc.)

import s from './<name>.module.css'

interface <Name>Props {
  children?: React.ReactNode
  className?: string
}

export function <Name>({ children, className }: <Name>Props) {
  return (
    <div className={`${s.<name>} ${className ?? ''}`}>
      {children}
    </div>
  )
}

<name>.module.css

css

.<name> {
  /* Component styles */
}

Conventions

•Server Component by default - Only add 'use client' if needed
•CSS Module as s - Always import as s for consistency
•Props interface - Define explicitly, include className for composition
•Named export - Use export function, not export default
•Image wrapper - Use import { Image } from '@/components/image'
•Link wrapper - Use import { Link } from '@/components/link'

Arguments

•$ARGUMENTS - Component name (e.g., "Button", "Header")
•--client flag - Force client component

Example

code

User: "create a Button component"
→ Creates components/button/index.tsx and button.module.css