aftercare

Aftercare

LLM-native static sites for agencies that build once and hand off maintenance.

Docs · License · npm · GitHub

Aftercare separates a locked React theme (agency) from TOON/JSON content (site owner). Section contracts defined with Zod become validation rules and agent docs—so an LLM can update copy and pages without touching layout code.

defineSection({ type, description, props, component, example })
        │
        ▼
 aftercare sync / watch
        │
        ├─ AGENTS.md              site-owner agent guide
        ├─ CLAUDE.md              Claude Code entry (@AGENTS.md)
        ├─ agent/catalog.toon     token-cheap section catalog
        ├─ agent/schemas/*.json   prop schemas
        ├─ .cursor/skills/…       Cursor skills + tools
        └─ .claude/skills/…       Claude Code content skill

Quick start

npx aftercare init my-site
cd my-site
npm install
npx aftercare watch

In another terminal:

npx aftercare serve

Open http://localhost:4173.

Two personas

	Agency developer	Site owner
Goal	Ship a locked React theme	Change copy without calling the agency
Edits	theme/** + defineSection	content/**/*.toon (or .json)
AI help	aftercare watch regenerates agent docs	Follows generated AGENTS.md / CLAUDE.md + content skill
UI	—	Optional local studio: aftercare ui (see docs/studio.md)

Documentation

Browse the Cobalt Grid HTML manual: karpe29.github.io/aftercare/docs or open docs/html/index.html locally.

Guide	Markdown	HTML
Concepts	docs/concepts.md	html
Getting started	docs/getting-started.md	html
Theme development	docs/theme.md	html
Content	docs/content.md	html
Plugins	docs/plugins.md	—
Studio	docs/studio.md	—
CLI reference	docs/cli.md	html
Deploy	docs/deploy.md	html
Publishing	docs/publishing.md	—

Visual system: docs/DESIGN.md (Cobalt Grid — cream paper, cobalt ink, graph grid).

Defining a section

import { z } from "zod";
import { defineSection } from "aftercare";
import { Hero } from "./components/Hero.js";

export const hero = defineSection({
  type: "hero",
  description: "Opening band with headline and optional CTA",
  props: z.object({
    heading: z.string(),
    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",
  },
});

Export all contracts from theme/index.tsx as sections. See Theme development.

Example site

examples/studio/ is the starter theme (Northline Studio). After sync, its generated AGENTS.md is what a site-owner agent should follow.

Monorepo development

npm install
npm install --prefix ui
npm run watch:example
# other terminal:
npm run serve:example

Build the publishable package:

npm run build
npm pack --dry-run

License

FSL-1.1-ALv2 (Functional Source License → Apache-2.0 after two years). See LICENSE.md and COMMERCIAL.md.

Use	Cost
Agency / freelance client sites, your own sites	Free
Open-source themes and plugins	Free
Competing framework or hosted “Aftercare Cloud”	Paid grant — email saagarkarpe@gmail.com