# Add listing field

> Add a custom per-listing field to a ZeroDirs directory site via listing.customFields in site.config.ts, put the value in a listing's extra frontmatter, and s…

You are reading one page of the ZeroDirs documentation. ZeroDirs is a paid Astro + Cloudflare Workers starter for directory sites: every page is rendered to static HTML at build time, the site ships no client JavaScript outside `/search/`, and one file — `site.config.ts` — carries roughly 80% of the customisation.

Two things to hold on to before you act on anything below:

- `site.config.ts` is validated by a zod schema with ten cross-field rules. After any edit to it, run `pnpm check:config`; every problem is reported as `site.config.ts › <path>: <message>` and the whole file is checked at once.
- The repository ships its own `AGENTS.md` with twenty hard rules, and a machine-checked test suite behind them. If you are working inside a ZeroDirs project, read that file first — it overrides anything general you infer from this page.

Source: https://zerodirs.com/docs/agents/recipes/add-listing-field/

---

<!-- DO NOT EDIT — generated from zerodirs/zerodirs .agents/skills/ by .github/docs/generate.ts (docs-sync.yml). Edit the source, not this page. -->

`.agents/skills/add-listing-field/SKILL.md` — 119 lines of instruction that ship inside the starter. This page is generated from it, so it says what the skill does without republishing it.

## When an agent picks this up

The skill description, verbatim — this is the text an agent matches your request against:

> Add a custom per-listing field to a ZeroDirs directory site via listing.customFields in site.config.ts, put the value in a listing's extra frontmatter, and surface it on the detail page. Covers the scalars-only rendering trap that silently drops arrays and objects. Use when asked to add a field like "pricing from", "founded", "platforms" or "docs URL" to listings.

## What it walks through

1. The trap: values must be scalars
1. Steps
   - Declare the field
   - Put the value in frontmatter
   - The detail page needs no edit
   - `showOnCard` is a card-level flag
   - Importing the field
1. Verify
1. If you need a real database column

## Commands it runs

```sh
pnpm listings:import
pnpm check                     # cross rule 9: key shape, duplicates, built-in shadowing
pnpm build
pnpm db:generate
```

## Files it touches

`src/content/schema.ts` · `site.config.ts` · `src/components/listing/Detail.astro` · `src/lib/listing.ts` · `src/components/listing/Card.astro` · `src/config/schema.ts` · `scripts/import.ts` · `src/db/schema.ts` · `src/loaders/normalize.ts`

## Using it

Skills load themselves — you describe the outcome, not the skill. "Add a Compliance category with an icon and seed it" is enough for an agent that can see `.agents/skills/`; Claude Code reads `.claude/skills/`, which `pnpm skills:sync` mirrors from `.agents/` on every install. See [Working with an agent](https://zerodirs.com/docs/agents/overview/).