Archetypes Mechanics Prompt Assembly Showcase Ecosystem Pitfalls Setup guide
← back to Archetypes

Mechanics library

16 reusable building blocks — self-contained HTML + CSS + JS (and one Streamlit/Python) snippets you can drop into any archetype. Each one has plain-English guidance on when to use, when to skip, and what past projects shipped it.

Click + Add to bundle on any mechanic, then jump to Prompt Assembly to get your ready-to-paste prompt.

Each mechanic is a small, reusable building block — usually under 200 lines of code. Mechanics include payments (PayNow QR with size-aware encoding), forms (Formspree with serverless validation), persistent state (localStorage with versioned schema migrations), admin gating (passcode auth with rate-limited retry), data visualisation (Chart.js dashboards), social previews (1200×630 OG thumbnails), structured data (schema.org JSON-LD generators), accessibility runners (axe-core in-page audits), semantic HTML auditing (the very tool used to score this page), and operational dashboards (Streamlit market trackers). They are deliberately decoupled from any one archetype so the same mechanic can power a brochure site, a webapp, or an admin tool. Pair mechanics with the matching archetype CLAUDE.md in Archetypes to get a complete starter prompt.

Step 3 · Showcase

See real builds

22 projects shipped using these archetypes + mechanics. Live sites, preview pieces on derrickteo.com, and works-in-progress.

Next · Showcase →