From darkroom
Builds new features, pages, components, or integrations from scratch in Next.js (satus) or React Router (novus) projects via research-plan-implement workflow with GO/NO-GO gate.
npx claudepluginhub darkroomengineering/cc-settingsThis skill uses the workspace's default tool permissions.
Before starting work, create a marker: `mkdir -p ~/.claude/tmp && echo "build" > ~/.claude/tmp/heavy-skill-active && date -u +"%Y-%m-%dT%H:%M:%SZ" >> ~/.claude/tmp/heavy-skill-active`
Builds React/Next.js web frontends: components, pages, design systems, state management, typed API clients. Uses structured phases and engagement modes.
Guides React and Next.js 14+ app development with App Router, Server Components, TypeScript, Tailwind CSS, and modern frontend patterns across setup, components, styling, data fetching, and routing.
Guides selection of AI coding tools (Claude Code, Lovable, Replit, Cursor) for building features, with prompting strategies, iterative workflows, and tips for non-technical users.
Share bugs, ideas, or general feedback.
Before starting work, create a marker: mkdir -p ~/.claude/tmp && echo "build" > ~/.claude/tmp/heavy-skill-active && date -u +"%Y-%m-%dT%H:%M:%SZ" >> ~/.claude/tmp/heavy-skill-active
Before any implementation, complete this research phase:
package.json. next dep → satus / Next.js; react-router dep → novus / React Router. Note any starter signal (name field, darkroom.starter marker)./docs <library> for any external library. Never code from memory.bun info <package> for the latest version.GO/NO-GO Verdict: After research, state one of:
Do not proceed past this gate without an explicit GO verdict.
Create a brief implementation plan:
lib/hooks/ for satus, hooks/ for novus, etc.)Follow standard Maestro workflow: scaffold → implement → test → review.
Use the right primitives for the stack:
| Concern | satus (Next.js) | novus (React Router) |
|---|---|---|
| Page | app/<path>/page.tsx | app/routes/<path>.tsx |
| Layout | app/<path>/layout.tsx | app/root.tsx or nested route |
| Data fetching | Server Component async function | loader() route export |
| Mutations | Server Actions ('use server') | action() route export |
| Routing | File-based app/ | File-based app/routes/ |
| Image | next/image | <img> (or Vite plugin) |
| Link | @/components/link (project wrapper) | react-router Link |
Return a concise summary:
next ^16.0.0)If you catch yourself thinking any of the following, STOP — you are skipping the research gate:
| Rationalization | Why It's Wrong |
|---|---|
| "I already know how to do this" | The codebase may have existing patterns, wrappers, or conventions you'd miss |
| "The requirements are obvious" | Obvious requirements have hidden edge cases; the GO/NO-GO gate catches them |
| "Research would take too long" | Building the wrong thing takes longer than 5 minutes of research |
| "I'll figure it out as I go" | This leads to mid-implementation pivots that waste context and leave dead code |
| "It's just a small feature" | Small features in the wrong place create architectural debt |
| "The user seems impatient" | Shipping broken code is worse than a brief research pause |
| "Both starters are similar enough" | They diverge on routing, data fetching, mutations, and asset handling. The wrong shape compiles but doesn't fit |
s, path alias @/ for satus / ~/ for novus).