component

Create Darkroom Component

Create a React component following Darkroom conventions. Detect the stack first — satus (Next.js) and novus (React Router) have different conventions for client/server boundaries, image/link wrappers, and path aliases.

Step 1 — Detect stack

Read package.json:

• dependencies.next present → Next.js / satus conventions
• dependencies["react-router"] or devDependencies["@react-router/dev"] → React Router / novus conventions
• Neither → ask user, or assume satus if unclear

Step 2 — Resolve target paths

Stack	Component path	CSS module path	Image wrapper	Link wrapper	Path alias
satus (Next.js)	components/<name>/index.tsx	components/<name>/<name>.module.css	import { Image } from '@/components/image'	import { Link } from '@/components/link'	@/
novus (React Router)	components/<name>/index.tsx	components/<name>/<name>.module.css	Native <img> (or project's wrapper if it exists)	import { Link } from 'react-router'	~/

Step 3 — Emit template

satus / Next.js

// components/<name>/index.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>
  )
}

novus / React Router

// components/<name>/index.tsx
// React Router components are isomorphic — no directive needed.
// They run on server during SSR and on client after hydration.

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>
  )
}