# Getting started

## Requirements

- Node.js 20+ (22 recommended; deploy recipes pin Node 22)
- npm

## Create a new site (published package)

```powershell
npx aftercare init my-site
cd my-site
npm install
```

`init` copies the studio starter (theme, sample content, config).

### Developer loop

```powershell
npx aftercare watch
```

In another terminal:

```powershell
npx aftercare serve
```

Open [http://localhost:4173](http://localhost:4173).

Optional local content studio:

```powershell
npx aftercare ui
```

See [Studio](./studio.md).

## Try the example (monorepo)

From the Aftercare repository root:

```powershell
npm install
npm run watch:example
```

In a second terminal:

```powershell
npm run serve:example
```

Open [http://localhost:4173](http://localhost:4173). Watch monitors `examples/studio` theme, content, and public assets; it syncs agent files, validates, and rebuilds HTML on change.

Optional local content studio (edit TOON via shadcn UI):

```powershell
npm run build:ui
npm run ui:example
```

See [Studio](./studio.md).

One-shot commands from the repo root:

```powershell
npm run sync:example
npm run validate:example
npm run doctor:example
npm run build:example
```

## Create a new site from a local checkout

If you are developing Aftercare itself and have not published yet:

```powershell
# from a sibling folder, after `npm run build` in the aftercare repo:
npx --package=file:../aftercare aftercare init my-site
```

Or use the curated example directly under `examples/studio`.

While you edit `theme/**`, watch regenerates `AGENTS.md`, schemas, and Cursor skills so the site-owner agent stays aligned with your contracts.

### Site-owner loop (after handoff)

```powershell
npx aftercare validate
npx aftercare build
npx aftercare serve
```

Or use the scripts generated under `.cursor/skills/aftercare-content/scripts/`.

## Site layout

A site looks like this:

```
my-site/
  aftercare.config.ts     # paths (content, theme, public, out)
  content/
    site.toon             # name, nav, footer
    pages/
      index.toon          # one file per page
      about.toon
  theme/
    index.tsx             # Layout + sections[]
    Layout.tsx
    styles.css
    components/           # React section UI
    sections/             # defineSection contracts
  public/                 # static assets (images, etc.)
  dist/                   # build output (gitignored)
  AGENTS.md               # generated — do not hand-edit
  agent/                  # generated schemas + catalog
  .cursor/skills/         # generated Cursor skills
```

## Configuration

`aftercare.config.ts` (defaults shown):

```ts
export default {
  contentDir: "content",
  themeDir: "theme",
  publicDir: "public",
  outDir: "dist",
  // basePath: "/my-repo",  // optional; also settable via AFTERCARE_BASE_PATH
};
```

Also accepted: `aftercare.config.mjs` or `aftercare.config.js`.

## Health check

Before you hand off or deploy:

```powershell
npx aftercare doctor
```

Use `--json --write` to emit `agent/doctor.json` for tooling.

## Next

- [Theme development](./theme.md) — add sections and layout
- [Content](./content.md) — edit pages and nav
- [CLI reference](./cli.md)
- [Deploy](./deploy.md)