Scaffolding New Code & Features
Prompt the model to scaffold new code that matches your project's patterns instead of a generic tutorial skeleton.
TL;DR
- Scaffolding is where AI shines: generating the repetitive structure of a new feature.
- Show the model an existing example so new code matches your real patterns, not a generic template.
- Ask for the full set of files, wiring included, so you are not left connecting the pieces by hand.
Anchor To An Example
Point At A SiblingReference a similar existing feature as the template to copy.
"Mirror src/features/orders for a new
`invoices` feature."Match NamingAsk it to follow your file and symbol naming conventions.
"Use the same file names and export
style as the orders feature."Reuse ImportsHave it import the same shared utilities the example uses.
"Use the shared `apiClient` and
`useQuery` hook, like orders does."Ask For The Whole Slice
List The FilesName every file you expect so nothing in the slice is skipped.
"Create: type, api, hook, list view,
detail view, and an index export."Include WiringAsk it to connect the new code into routers, stores, or barrels.
"Register the route and add the
feature to the nav config."States Up FrontRequest loading, empty, and error states so they are not afterthoughts.
"Each view handles loading, empty,
and error states."Keep It Realistic
Real Data ShapeGive the actual types so the scaffold compiles against them.
"Invoice: { id, amount, dueDate,
status } (paste the full type)."No Placeholder LogicAsk it to flag TODOs clearly rather than hide fake implementations.
"Mark anything unimplemented with
// TODO, do not fake it."Minimal, Not MaximalScaffold the structure, not a kitchen sink of features you did not ask for.
"Just the CRUD slice; no export,
print, or filters yet."Review The Skeleton
Check The WiringConfirm the new files are actually connected and reachable.
Does the route render? Is the
export added to the barrel?Find The GapsLook for missing states, validation, and TODOs before building on it.
Empty list? Error path? Loading?Then RefineTreat the scaffold as step one, then prompt for the real logic.
"Now implement the real update
logic in the hook."Tips
- Paste a similar existing feature as the template and say 'follow this structure and naming'.
- List the files you expect so the model produces the whole slice, not just the happy-path component.
Warnings
- Generic scaffolds use conventions that clash with yours; anchor to an existing example to avoid rework.
- Scaffolds look complete but often skip error states, loading states, and wiring; check for the gaps.
In Practice
Rather than describing your conventions, point the model at a sibling feature and ask for a parallel slice. The output matches your real structure and needs only refinement, not reshaping.
- The prompt names an existing feature as the exact template to mirror.
- It lists every file in the slice so nothing is quietly skipped.
- It pastes the real data type so the scaffold compiles against it.
- It asks for states and TODO markers so gaps are visible, not hidden.
Scaffold a new `invoices` feature by mirroring the
existing `orders` feature in src/features/orders.
Match its structure, file names, and export style.
Reuse the shared apiClient and useQuery hook.
Type:
type Invoice = { id: string; amount: number;
dueDate: string; status: 'draft'|'sent'|'paid' };
Create: invoice.types.ts, invoices.api.ts,
useInvoices.ts, InvoiceList.tsx, InvoiceDetail.tsx,
index.ts. Register the route like orders does.
Each view handles loading, empty, and error states.
Mark any unimplemented logic with // TODO; do not fake it.FAQ
Give the model a concrete example from your codebase, a similar component, route, or module, and say 'mirror this structure, naming, and imports'. Pattern-matching an existing file produces far better fit than describing your conventions in words.
You can list all the files you want so the model produces the full slice, but review it as a scaffold, not finished code. It is a strong starting skeleton you then refine, not something to merge unread.
Error and loading states, empty states, input validation, and the wiring that connects the new code to routers, stores, or exports. Ask for these explicitly or they are often left as 'TODO' or omitted.
Yes. A multi-file scaffold is a natural agent task: it can create the files, follow an example you point to, and wire them together. Scope it to the feature's directory and review the resulting diff.