Organize a section's files beyond the four reserved

Goal

Structure a section beyond the four files.

The delta

Starting from the starter’s hero section, add a components/ folder and pull a piece of markup out into its own module — the same shape as the starter’s own components/Feature.tsx, which the starter’s Renderer.tsx already imports and renders.

sections/hero/components/Feature.tsx

import type { ReactNode } from "react";

export function Feature({ label, value }: { label: string; value: string }): ReactNode {
  return (
    <div className="rounded-lg border border-ink/10 p-4">
      <div className="text-sm text-ink/60">{label}</div>
      <div className="text-lg font-semibold text-ink">{value}</div>
    </div>
  );
}

Renderer.tsx

import { Feature } from "./components/Feature";
// …
<Feature label="Status" value="For sale" />

Exactly four files are reserved, and only at the section folder’s root: schema.ts, fill-spec.ts, fixtures.ts, Renderer.tsx. Everything else in the folder is yours — components/, hooks/, utils/, stylesheets, any nesting, any number of support modules, and "use client" islands. A binary asset (an image, a font, an archive) may live under an assets/ folder too, but only if something in the section references it — see bundle-binary-asset for the rule and what an unreferenced one costs you.

Every file under templates/<template>/ — not only the four reserved files — feeds pack’s content hash of the template tree, stamped into pack-manifest.json. Editing a component, a util, or even a comment inside a section folder changes that hash on the next pack, exactly as editing Renderer.tsx would.

Commands

None — this is a pure content edit. No CLI command beyond the author loop below.

Verify

Verify with the author loop.

See also

• Adding templates and sections — template-kit new scaffolds a starter section that already includes a components/ folder and an island.
• Islands — a "use client" file is one more kind of file the section folder is free to hold.
• template-kit pack — what produces the content hash and what it refuses to pack.
• bundle-binary-asset — when a binary file in the folder must be referenced, and what happens if it isn’t.