HustleCoding · HustleCoding · Jul 14, 2026 · Jul 13, 2026 · Jul 13, 2026
diff --git a/README.md b/README.md
@@ -26,6 +26,8 @@ Open `index.html` or `changelog.html` in any browser, or run `python3 -m http.se
 
 `changelog.html` is the standalone, pre-rendered changelog page.
 
+`agent-templates.html` is a standalone page explaining the [lionbenjamin/agent-templates](https://github.com/lionbenjamin/agent-templates) toolkit.
+
 `changelog.md` is a plain Markdown version of the changelog for AI agents.
 
 `llms.txt` and `llms-full.txt` provide LLM-readable context about the whole site.

diff --git a/agent-templates.html b/agent-templates.html
@@ -0,0 +1,294 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+<title>Agent Templates · a companion to pstack</title>
+<meta name="description" content="A companion toolkit by lionbenjamin: spec-driven agent workflows for Antigravity, Cursor, and Claude Code.">
+<meta property="og:title" content="Agent Templates · a companion to pstack">
+<meta property="og:description" content="A companion toolkit by lionbenjamin: spec-driven agent workflows for Antigravity, Cursor, and Claude Code.">
+<meta property="og:type" content="website">
+<meta property="og:url" content="https://hustlecoding.github.io/pstack-explained/agent-templates.html">
+<meta property="og:image" content="https://hustlecoding.github.io/pstack-explained/og.png">
+<meta property="og:image:width" content="1200">
+<meta property="og:image:height" content="640">
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:image" content="https://hustlecoding.github.io/pstack-explained/og.png">
+<link rel="canonical" href="https://hustlecoding.github.io/pstack-explained/agent-templates.html">
+<link rel="alternate" type="text/plain" href="llms.txt" title="LLM context for this site">
+<link rel="icon" type="image/svg+xml" href="favicon.svg">
+<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
+<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
+<link rel="shortcut icon" href="favicon.ico">
+<meta name="theme-color" content="#ffffff">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
+<style>
+  :root{
+    --bg:#ffffff; --ink:#1a1a1a; --soft:#3d3d3d; --dim:#6b6b6b; --faint:#9b9b9b;
+    --rule:#ededed; --rule2:#e0e0e0;
+    --accent:#b45309; --accent-soft:#fdf4ea; --accent-line:#e8c39a;
+    --t-setup:#7c4d9e; --t-sdlc:#b45309; --t-orch:#b13a5a; --t-special:#1f6f8b;
+    --maxw:880px; --navh:54px;
+    --ff:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
+    --ff-mono:"IBM Plex Mono",ui-monospace,monospace;
+  }
+  *{box-sizing:border-box}
+  html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
+  body{
+    margin:0; background:var(--bg); color:var(--ink);
+    font-family:var(--ff); font-size:17px; line-height:1.65;
+    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
+  }
+  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,40px); position:relative}
+  code{font-family:var(--ff-mono); font-size:.92em; color:var(--accent)}
+
+  header.mast{padding:clamp(56px,9vw,96px) 0 clamp(36px,5vw,52px)}
+  .mark{display:flex; align-items:center; gap:13px; margin-bottom:22px}
+  .glyph{width:26px; height:26px; position:relative; flex:none}
+  .glyph i{position:absolute; left:0; height:20%; background:var(--accent); border-radius:1px}
+  .glyph i:nth-child(1){bottom:0; width:100%; opacity:.4}
+  .glyph i:nth-child(2){bottom:40%; width:68%; opacity:.65}
+  .glyph i:nth-child(3){bottom:80%; width:40%}
+  h1.wordmark{font-family:var(--ff); font-weight:700; font-size:clamp(36px,6vw,50px); letter-spacing:-.025em; margin:0; line-height:1}
+  h1.wordmark span{color:var(--accent)}
+  .count{font-family:var(--ff-mono); font-size:13px; color:var(--faint); margin:0 0 26px; letter-spacing:.02em}
+  .tagline{font-size:clamp(19px,2.6vw,23px); line-height:1.45; color:var(--soft); max-width:52ch; margin:0 0 18px; font-weight:500; letter-spacing:-.005em}
+  .tagline em{font-style:normal; color:var(--ink); border-bottom:2px solid var(--accent-line)}
+  .intro-lead{color:var(--dim); font-size:16px; line-height:1.6; max-width:62ch; margin:0}
+
+  nav.bar{position:sticky; top:0; z-index:20; background:rgba(255,255,255,.9); backdrop-filter:blur(8px); border-bottom:1px solid var(--rule)}
+  nav.bar .wrap{display:flex; gap:2px; padding-top:7px; padding-bottom:7px; overflow-x:auto; scrollbar-width:none}
+  nav.bar .wrap::-webkit-scrollbar{display:none}
+  nav.bar a{color:var(--dim); text-decoration:none; font-size:14px; font-weight:500; white-space:nowrap; padding:8px 13px; border-radius:8px; transition:background .15s,color .15s}
+  nav.bar a:hover,nav.bar a:focus-visible{background:var(--accent-soft); color:var(--accent); outline:none}
+  nav.bar a[aria-current="page"]{background:var(--accent-soft); color:var(--accent)}
+
+  section{padding:clamp(52px,8vw,84px) 0; border-bottom:1px solid var(--rule); scroll-margin-top:var(--navh)}
+  .sh{margin-bottom:clamp(26px,4vw,38px); max-width:64ch}
+  .sh .num{color:var(--accent); font-family:var(--ff-mono); font-size:12px; letter-spacing:.04em}
+  .sh h2{font-weight:600; font-size:clamp(24px,3.6vw,31px); margin:7px 0 12px; letter-spacing:-.018em; line-height:1.15}
+  .sh .lead{color:var(--dim); font-size:16px; line-height:1.6; margin:0; max-width:60ch}
+  .sh .lead a{color:var(--accent); text-decoration:none; border-bottom:1px solid var(--accent-line)}
+  .sh .lead a:hover{border-bottom-color:var(--accent)}
+
+  .flow{margin:0 0 28px; font-size:15px; color:var(--dim); line-height:1.9}
+  .flow .cmd-tok{font-family:var(--ff-mono); color:var(--accent); font-size:14px}
+  .flow .arr{color:var(--faint); margin:0 2px}
+
+  .band{margin-bottom:clamp(34px,5vw,52px); animation:rise .5s both}
+  .band:last-child{margin-bottom:0}
+  .band-head{display:flex; align-items:center; gap:10px; margin-bottom:8px}
+  .band-head .tick{width:9px; height:9px; border-radius:2px; flex:none}
+  .band-head h3{font-weight:600; font-size:18px; margin:0; letter-spacing:-.01em}
+  .band-head .ct{color:var(--faint); font-family:var(--ff-mono); font-size:12px}
+  .band-head .ln{flex:1; height:1px; background:var(--rule)}
+  .band-desc{color:var(--dim); font-size:14.5px; margin:0 0 16px; max-width:60ch}
+  .bricks{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px}
+  .brick{
+    text-align:left; background:var(--bg); border:1px solid var(--rule); border-left:3px solid var(--c);
+    color:var(--ink); padding:13px 15px; border-radius:3px 12px 12px 3px; cursor:pointer; font-family:var(--ff);
+    transition:background .18s,transform .18s; animation:rise .5s both;
+  }
+  .brick:hover{background:#fafafa; transform:translateY(-1px)}
+  .brick:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
+  .brick .pn{font-weight:600; font-size:15px; line-height:1.25}
+  .brick .pa{color:var(--faint); font-size:12.5px; margin-top:6px; line-height:1.45}
+  .tmpl-note{color:var(--faint); font-size:13.5px; margin-top:20px; max-width:60ch; line-height:1.6}
+  .tmpl-note a{color:var(--accent); text-decoration:none; border-bottom:1px solid var(--accent-line)}
+  .tmpl-note a:hover{border-bottom-color:var(--accent)}
+
+  footer{padding:clamp(40px,6vw,60px) 0 calc(40px + env(safe-area-inset-bottom)); color:var(--faint); font-size:14px; line-height:1.7}
+  footer p{margin:0 0 8px; max-width:62ch}
+  footer a{color:var(--accent); text-decoration:none; border-bottom:1px solid var(--accent-line)}
+  footer a:hover{border-bottom-color:var(--accent)}
+
+  .overlay{position:fixed; inset:0; background:rgba(20,20,20,.45); backdrop-filter:blur(4px); display:none; align-items:center; justify-content:center; z-index:60; padding:clamp(16px,4vw,24px)}
+  .overlay.open{display:flex; animation:fade .2s}
+  .dialog{background:var(--bg); border:1px solid var(--rule2); border-radius:14px; max-width:540px; width:100%; padding:clamp(24px,4vw,32px); position:relative; animation:rise .26s both; max-height:86vh; overflow:auto; box-shadow:0 16px 48px -16px rgba(0,0,0,.22)}
+  .dialog .cat{font-family:var(--ff-mono); font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--accent)}
+  .dialog h3{font-weight:600; font-size:clamp(22px,3.5vw,27px); margin:8px 0 18px; line-height:1.15; letter-spacing:-.015em}
+  .dialog .field{margin:15px 0}
+  .dialog .field .k{color:var(--faint); font-size:11px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:5px; font-family:var(--ff-mono)}
+  .dialog .field .v{color:var(--ink); font-size:15.5px; line-height:1.6}
+  .dialog .close{position:absolute; top:13px; right:13px; background:var(--bg); border:1px solid var(--rule2); color:var(--dim); width:34px; height:34px; border-radius:9px; cursor:pointer; font-family:var(--ff); font-size:18px; line-height:1; display:flex; align-items:center; justify-content:center}
+  .dialog .close:hover{color:var(--accent); border-color:var(--accent-line)}
+
+  @keyframes rise{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
+  @keyframes fade{from{opacity:0} to{opacity:1}}
+  @media (prefers-reduced-motion:reduce){
+    *{animation:none !important; transition:none !important}
+    html{scroll-behavior:auto}
+  }
+  @media (max-width:640px){
+    .bricks{grid-template-columns:1fr}
+    .flow{line-height:2}
+  }
+</style>
+</head>
+<body>
+
+<header class="mast">
+  <div class="wrap">
+    <div class="mark">
+      <div class="glyph" aria-hidden="true"><i></i><i></i><i></i></div>
+      <h1 class="wordmark">agent<span>·templates</span></h1>
+    </div>
+    <p class="count">31 templates · 4 groups</p>
+    <p class="tagline">A companion toolkit for coding agents: spec-driven workflows that turn an idea into a deployed change.</p>
+    <p class="intro-lead">Install the workflows into Antigravity, Cursor, and Claude Code. Each named command carries the project from constitution through specification, planning, implementation, review, and deployment.</p>
+  </div>
+</header>
+
+<nav class="bar">
+  <div class="wrap">
+    <a href="index.html">Home</a>
+    <a href="agent-templates.html" aria-current="page">Agent Templates</a>
+    <a href="changelog.html">Changelog</a>
+  </div>
+</nav>
+
+<section id="templates">
+  <div class="wrap">
+    <div class="sh">
+      <span class="num">01</span>
+      <h2>Agent Templates</h2>
+      <p class="lead">A companion toolkit by <a href="https://github.com/lionbenjamin/agent-templates" target="_blank" rel="noopener">lionbenjamin</a>: spec-driven agent workflows you install into Antigravity, Cursor, and Claude Code. Same idea as pstack — named workflows a coding agent runs — but organized as a spec-first SDLC, from a written constitution through spec, plan, code, and deploy.</p>
+    </div>
+    <p class="flow"><span class="cmd-tok">/constitute</span> <span class="arr">→</span> <span class="cmd-tok">/specify</span> <span class="arr">→</span> <span class="cmd-tok">/plan</span> <span class="arr">→</span> <span class="cmd-tok">/implement</span> <span class="arr">→</span> <span class="cmd-tok">/deploy</span> <span class="arr">→</span> <span class="cmd-tok">/retro</span></p>
+    <div id="tmplgroups"></div>
+    <p class="tmpl-note">Install every workflow with <code>./install-workflows.sh</code>, which copies them into <code>~/.claude/commands/</code>, <code>~/.cursor/commands/</code>, and the Antigravity dirs. Every step reads a shared technical constitution and a lessons-learned memory file, so the spec, the plan, the code, and the review stay consistent across sessions — spec-driven rigor with an auditable trail instead of one-shot vibe coding. Source and full docs: <a href="https://github.com/lionbenjamin/agent-templates" target="_blank" rel="noopener">lionbenjamin/agent-templates</a>.</p>
+  </div>
+</section>
+
+<footer>
+  <div class="wrap">
+    <p>Agent Templates is an unofficial companion to <a href="https://github.com/HustleCoding/pstack-explained" target="_blank" rel="noopener">pstack-explained</a>, documenting <a href="https://github.com/lionbenjamin/agent-templates" target="_blank" rel="noopener">lionbenjamin/agent-templates</a>.</p>
+    <p>Source and deploy: <a href="https://github.com/HustleCoding/pstack-explained" target="_blank" rel="noopener">HustleCoding/pstack-explained</a>, live at this URL via GitHub Actions.</p>
+  </div>
+</footer>
+
+<div class="overlay" id="overlay" role="dialog" aria-modal="true" aria-labelledby="dtitle">
+  <div class="dialog">
+    <button class="close" id="close" aria-label="Close">×</button>
+    <div class="cat" id="dcat"></div>
+    <h3 id="dtitle"></h3>
+    <div id="dbody"></div>
+  </div>
+</div>
+
+<script>
+const TEMPLATE_GROUPS = [
+  {key:"setup", label:"Project setup", color:"var(--t-setup)", desc:"Lock the tech stack and domain model before any feature work, then stress-test both."},
+  {key:"sdlc", label:"The agentic SDLC", color:"var(--t-sdlc)", desc:"An eleven-step pipeline from a written spec to a deployed change, each step handing off to the next."},
+  {key:"orch", label:"Orchestrators", color:"var(--t-orch)", desc:"Run the whole pipeline for you — with approval gates, without them, or straight from a raw idea."},
+  {key:"special", label:"Specialists", color:"var(--t-special)", desc:"Single-purpose reviewers and fixers you call directly for security, performance, accessibility, docs, and cleanup."}
+];
+
+const TEMPLATES = [
+  {g:"setup", cmd:"/constitute", d:"Define the non-negotiable tech stack and architecture constraints, written to a technical constitution the other agents read."},
+  {g:"setup", cmd:"/review_constitution", d:"Play devil's advocate against the constitution — challenge and stress-test every constraint before you build on it."},
+  {g:"setup", cmd:"/domain_model", d:"Model the domain with DDD bounded contexts so the data shape is settled before any logic is written."},
+  {g:"setup", cmd:"/review_domain", d:"Architectural review of the domain model to catch shape problems early."},
+  {g:"sdlc", cmd:"/specify", d:"Draft a comprehensive product specification from your idea."},
+  {g:"sdlc", cmd:"/clarify", d:"Review the spec for product clarity, completeness, and edge cases, writing a recommendation per gap."},
+  {g:"sdlc", cmd:"/plan", d:"Turn the spec into a TDD-first technical implementation plan."},
+  {g:"sdlc", cmd:"/review_plan", d:"A principal-engineer architectural review of the plan before any code is written."},
+  {g:"sdlc", cmd:"/tasks", d:"Break the plan into actionable tasks, marked [P] to run in parallel or [B] when blocking."},
+  {g:"sdlc", cmd:"/implement", d:"Generate code test-first, following the plan and the technical constitution."},
+  {g:"sdlc", cmd:"/code_review", d:"Security and quality analysis of the newly written code."},
+  {g:"sdlc", cmd:"/quality", d:"Verify correctness and audit the result against the spec."},
+  {g:"sdlc", cmd:"/commit", d:"Stage the changes and write conventional commits."},
+  {g:"sdlc", cmd:"/deploy", d:"Test, build, and deploy the application."},
+  {g:"sdlc", cmd:"/retro", d:"Retrospective that loops lessons learned back into the instructions."},
+  {g:"orch", cmd:"/feature", d:"Orchestrate the full SDLC cycle with manual approval gates between steps."},
+  {g:"orch", cmd:"/autopilot", d:"Run the whole pipeline with no gates, skipping stages that are already complete."},
+  {g:"orch", cmd:"/full_auto", d:"Go from a raw idea to working code in one fully autonomous pass."},
+  {g:"special", cmd:"/analyze", d:"Pre-implementation consistency check across the spec, plan, and tasks."},
+  {g:"special", cmd:"/skeptical_review", d:"A hard skeptic's critical architectural review."},
+  {g:"special", cmd:"/security_agent", d:"Security-focused code analysis against the OWASP Top 10."},
+  {g:"special", cmd:"/fix", d:"Root-cause analysis and a surgical bug fix."},
+  {g:"special", cmd:"/optimize", d:"Performance analysis and improvement."},
+  {g:"special", cmd:"/janitor", d:"Code cleanup and maintenance."},
+  {g:"special", cmd:"/document", d:"Keep READMEs, JSDoc/TSDoc, and inline docs in sync with the code."},
+  {g:"special", cmd:"/a11y_check", d:"WCAG accessibility compliance check."},
+  {g:"special", cmd:"/ux_redesign", d:"A principal designer's user-experience redesign."},
+  {g:"special", cmd:"/design_audit", d:"A comprehensive UX design audit."},
+  {g:"special", cmd:"/wireframe", d:"Markdown wireframes with UX descriptions drawn from the spec."},
+  {g:"special", cmd:"/tech_review", d:"Technical architecture review."},
+  {g:"special", cmd:"/release_gate", d:"Release-readiness validation before shipping."}
+];
+
+const $ = s => document.querySelector(s);
+const el = (tag, cls) => { const e = document.createElement(tag); if(cls) e.className = cls; return e; };
+
+function renderTemplates(){
+  const root = $("#tmplgroups");
+  TEMPLATE_GROUPS.forEach((g, gi) => {
+    const band = el("div", "band");
+    band.style.animationDelay = (gi * 60) + "ms";
+    const head = el("div", "band-head");
+    const tick = el("span", "tick"); tick.style.background = g.color;
+    const h3 = el("h3"); h3.textContent = g.label;
+    const ct = el("span", "ct"); ct.textContent = TEMPLATES.filter(t => t.g === g.key).length + " templates";
+    const ln = el("span", "ln");
+    head.append(tick, h3, ct, ln);
+    band.appendChild(head);
+    const desc = el("p", "band-desc"); desc.textContent = g.desc;
+    band.appendChild(desc);
+    const bricks = el("div", "bricks");
+    TEMPLATES.filter(t => t.g === g.key).forEach((t, i) => {
+      const bk = el("button", "brick");
+      bk.type = "button";
+      bk.style.setProperty("--c", g.color);
+      bk.style.animationDelay = (i * 35) + "ms";
+      const pn = el("div", "pn"); pn.textContent = t.cmd;
+      const pa = el("div", "pa"); pa.textContent = t.d;
+      bk.append(pn, pa);
+      bk.addEventListener("click", () => openDialog("template", { ...t, group: g.label }));
+      bricks.appendChild(bk);
+    });
+    band.appendChild(bricks);
+    root.appendChild(band);
+  });
+}
+
+function openDialog(kind, data){
+  const cat = $("#dcat"), title = $("#dtitle"), body = $("#dbody");
+  body.innerHTML = "";
+  if(kind === "template"){
+    cat.textContent = "Agent template";
+    title.textContent = data.cmd;
+    addField(body, "What it does", data.d);
+    addField(body, "Where it fits", data.group);
+  }
+  $("#overlay").classList.add("open");
+  document.body.style.overflow = "hidden";
+  $("#close").focus();
+}
+
+function addField(parent, k, v){
+  const f = el("div", "field");
+  const kk = el("div", "k"); kk.textContent = k;
+  const vv = el("div", "v"); vv.textContent = v;
+  f.append(kk, vv);
+  parent.appendChild(f);
+}
+
+function closeDialog(){
+  $("#overlay").classList.remove("open");
+  document.body.style.overflow = "";
+}
+
+function init(){
+  renderTemplates();
+  $("#close").addEventListener("click", closeDialog);
+  $("#overlay").addEventListener("click", e => { if(e.target === $("#overlay")) closeDialog(); });
+  document.addEventListener("keydown", e => { if(e.key === "Escape") closeDialog(); });
+}
+
+init();
+</script>
+</body>
+</html>
diff --git a/index.html b/index.html
@@ -218,6 +218,7 @@ <h1 class="wordmark">p<span>stack</span></h1>
     <a href="#skills">Skills</a>
     <a href="#principles">Principles</a>
     <a href="#models">Models</a>
+    <a href="agent-templates.html">Agent Templates</a>
     <a href="changelog.html">Changelog</a>
   </div>
 </nav>

diff --git a/sitemap.xml b/sitemap.xml
@@ -4,6 +4,10 @@
     <loc>https://hustlecoding.github.io/pstack-explained/</loc>
     <lastmod>2026-07-13</lastmod>
   </url>
+  <url>
+    <loc>https://hustlecoding.github.io/pstack-explained/agent-templates.html</loc>
+    <lastmod>2026-07-13</lastmod>
+  </url>
   <url>
     <loc>https://hustlecoding.github.io/pstack-explained/changelog.html</loc>
     <lastmod>2026-07-13</lastmod>