Theme Development

export { Layout };
export const sections = [hero, features, faq, cta];
export const stylesheet = "styles.css";

export const hero = defineSection({
  type: "hero",
  description: "Opening band with headline and optional CTA",
  guidance: "Use once near the top. Keep heading under ~12 words.",
  props: z.object({
    heading: z.string().min(1),
    subheading: z.string().optional(),
    ctaLabel: z.string().optional(),
    ctaHref: z.string().optional(),
  }),
  component: Hero,
  example: {
    type: "hero",
    heading: "Ship the site. Skip the retainer.",
    ctaLabel: "See the work",
    ctaHref: "/work",
  },
});

import { image, imageProps } from "aftercare";

props: z.object({
  heading: z.string(),
  image: image(),
})

// in component:
<img {...imageProps(image)} />

Content uses /images/team.webp; file lives at public/images/team.webp. Doctor checks local paths and alt text.

npx aftercare watch
npx aftercare sync

Do not hand-edit generated agent files. Change contracts, then re-run sync/watch.