Guide

One design = one folder under src/designs/<slug>/ containing component.tsx (the real thing) and meta.json (name, description, AI Script, etc.). The gallery page, /api/components.json, /r/<slug>.json, and llms.txt are all generated from it automatically.

Steps: (1) copy an existing folder and rename the slug (2) implement component.tsx (3) write meta.json (4) check with npm run dev (5) push to main to deploy.

• Used in (or generalized from) real client work, with client-specific copy and images removed.

• Follows the white-base brand with amber accents; experimental designs must be tagged as such.

• Responsive, with visible focus rings (focus-visible).

• The AI Script must be precise enough that pasting it into an AI reproduces the design — list concrete class names.

Every week, review the week's client work for designs worth keeping, generalize them, and add them here — the same rhythm as First CH Tools.

Target: one design per week. A week with no candidates is fine; just note the decision.

• Full registry: /api/components.json (metadata + source code + AI Script)

• Single item (shadcn format): /r/<slug>.json — install with npx shadcn@latest add https://designs.first-ch.com/r/<slug>.json

• Site overview: /llms.txt

• Add a note to each project's CLAUDE.md pointing at the registry so AI assistants use this gallery automatically.