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

Step 3 — Emit template

// components/<name>/index.tsx
// satus (Next.js): Server Component by default. Add 'use client' only if the
// component needs hooks, event handlers, or browser APIs (--client forces it).
// novus (React Router): components are isomorphic, never add 'use client'.

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

/* components/<name>/<name>.module.css */
.<name> {
  /* Component styles */
}

Before you start

If this component wraps or uses an external library (Radix, Framer Motion, GSAP, etc.):

1. Fetch docs first — use Context7 MCP (mcp__context7__resolve-library-id → get-library-docs) for the current API in Claude or when the user configured it in standalone Codex. Otherwise use official docs through native browsing or inspect the pinned local package. cc-settings does not auto-run unpinned registry MCP packages in Codex.
2. Check version — run bun info <package> before installing.

Never implement against external library APIs from memory.

Conventions

1. CSS Module as s — always import as s for consistency.
2. Props interface — define explicitly, include className for composition.
3. Named export — use export function, not export default.
4. No memoization — React Compiler handles it.

Arguments

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