Dev Playbooks

Reusable patterns and debugging lessons for building client marketing websites at Bonbon Dino. This directory (wiki/playbooks/) is the source of truth — edit here; the deployed wiki renders it.

Quick Start

Pick the checklist that matches what you're building:

Checklist	Purpose
website-checklist.md	Frontend marketing site patterns (header, hero, SEO, etc.)
mobile-responsive-checklist.md	Mobile-view QA: 375px rule, hamburger header, fluid sizing, no-nowrap text
admin-panel-checklist.md	Single-admin JWT auth, password reset, dashboard
qa-board-checklist.md	Public Q&A board, modal-by-query-param, URL-as-state
contact-form-checklist.md	Contact form: schema, Turnstile, server validation, Resend delivery
email-checklist.md	Resend transactional email, admin notifications, password reset
payment-gateway-guide.md	Square vs. Stripe: decision tree, implementation checklists, account ownership
db-and-deploy-checklist.md	Turso + Drizzle + Cloudflare Workers deployment
security-checklist.md	Pre-launch security gate: authz, rate limits, CAPTCHA, leak checks, OWASP
debugging-lessons.md	Cross-project bug log: symptoms, root causes, fixes

Living Documentation

These checklists grow with every project. At the end of each session, follow RETROSPECTIVE.md:

1. Identify patterns from your project that are transferable (not project-specific)
2. Propose the change — rewrite in place when an existing section covers the same area (the default), append a new section only when the topic is genuinely new
3. Wait for approval
4. Commit

Never append a new section that duplicates an existing one. If the existing section is stale (a "Fix" that no longer matches the current default, an env-var doc that still says Pages when the project moved to OpenNext, a renamed cookie, etc.), rewrite it in place. Outdated content is worse than no content.

For New Projects

Add this block to your project's CLAUDE.md so agents both use the checklists while building and feed them at session end:

## Agency checklists

Before building a feature, check the Bonbon Dino playbooks at
/Users/ja58968/Projects/bonbondino_company/wiki/playbooks/.
Start with README.md (the index) and read the one that matches what you're
building (e.g. contact form, admin panel, email, deploy, security) BEFORE
writing code — they hold patterns and known bugs from past client sites so we
don't re-solve them. When stuck on a "this is weird" bug, search
debugging-lessons.md first.

At end of session, follow that repo's RETROSPECTIVE.md and propose checklist
updates for anything transferable.

Reading happens before coding (that's when the patterns and gotchas save time); the retrospective at session end keeps the checklists growing. The path above is machine-specific — swap in the deployed wiki URL or a repo-relative path if other people or machines use these.

Structure

All checklists are flat markdown files in wiki/playbooks/ (part of the company wiki — see ../SCHEMA.md for how the wiki works):

wiki/playbooks/
├── README.md                       (you are here)
├── RETROSPECTIVE.md                (session-end ritual)
├── website-checklist.md
├── mobile-responsive-checklist.md
├── admin-panel-checklist.md
├── qa-board-checklist.md
├── contact-form-checklist.md
├── email-checklist.md
├── payment-gateway-guide.md
├── square-invoice-setup.md
├── db-and-deploy-checklist.md
├── security-checklist.md
├── pricing.md
└── debugging-lessons.md

When adding a checklist: create the file here, add it to this table, to nav: in mkdocs.yml, and to ../index.md.

Example Projects

• Add your project here after first use — <project-name> — short description of what it has

---

Each checklist has a "How to extend this file" footer. Follow it to keep changes consistent.