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 ```tsx // 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) { ...