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> with explicit width/height/fetchPriority (or project's wrapper if it exists)	import { Link } from 'react-router'	~/

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.