Apex: Product Playbook MVP

.Jules/apex.md

@@ -22,3 +22,5 @@ Prefer visitor-facing craft on live surfaces (Home, Work, Biography, Contact, an
 ## 2026-05-26 - Product Manifesto | Signal: Product Leadership "Guiding Principles" trend | Lean Implementation: Isolated experimental route, uses Hero/Icon primitives, ~45 lines delta.
 
 ## 2026-05-27 - Strategic Reading List | Signal: Portfolio "Bookshelf" trend | Lean Implementation: Isolated experimental route, static data array, uses Hero/Pill/Icon primitives, ~48 lines delta.
+
+## 2026-08-30 - Product Playbook | Signal: Product Leadership "Decision Frameworks" trend | Lean Implementation: Isolated experimental route /experimental/playbook, flagged enable_product_playbook, < 50 lines total delta.

src/content.config.ts

@@ -27,6 +27,7 @@ export const collections = {
       enable_logo_wobble_v1: z.boolean().default(false),
       enable_cta_tactile_v1: z.boolean().default(false),
       enable_theme_toggle_tactile_v1: z.boolean().default(false),
+      enable_product_playbook: z.boolean().default(false),
     }),
   }),
 };

src/content/flags/config.json

@@ -7,5 +7,6 @@
   "enable_reading_list": true,
   "enable_logo_wobble_v1": true,
   "enable_cta_tactile_v1": true,
-  "enable_theme_toggle_tactile_v1": true
+  "enable_theme_toggle_tactile_v1": true,
+  "enable_product_playbook": true
 }

src/pages/experimental/manifesto.astro

@@ -4,7 +4,7 @@ import BaseLayout from '../../layouts/BaseLayout.astro';
 import Hero from '../../components/Hero.astro';
 import Icon from '../../components/Icon.astro';
 
-const flags = await getEntry('flags', 'index');
+const flags = await getEntry('flags', 'config');
 if (!flags?.data.enable_product_manifesto) return Astro.redirect('/404/');
 
 const principles = [

src/pages/experimental/playbook.astro

@@ -0,0 +1,67 @@
+---
+import { getEntry } from 'astro:content';
+import BaseLayout from '../../layouts/BaseLayout.astro';
+import Hero from '../../components/Hero.astro';
+import CallToAction from '../../components/CallToAction.astro';
+
+const flags = await getEntry('flags', 'config');
+if (!flags?.data.enable_product_playbook) return Astro.redirect('/404/');
+
+const pillars = [
+  { t: 'Continuous Discovery', d: 'Validate user problems with data & feedback before building.' },
+  { t: 'Systems Over Silos', d: 'Architect reusable primitives & APIs to scale dev velocity.' },
+  { t: 'Measurable Value', d: 'Deliver quantifiable business ROI & high-impact outcomes.' },
+];
+---
+
+<BaseLayout
+  title="Product Playbook"
+  description="Product Management decision frameworks."
+  robots="noindex"
+>
+  <main id="main-content" class="wrapper stack gap-8">
+    <Hero
+      title="Product Playbook"
+      tagline="Decision frameworks for product strategy."
+      align="start"
+    />
+    <div class="grid">
+      {
+        pillars.map((p) => (
+          <div class="card">
+            <strong>{p.t}</strong>
+            <p>{p.d}</p>
+          </div>
+        ))
+      }
+    </div>
+    <CallToAction
+      href="https://www.linkedin.com/in/alehar/"
+      target="_blank"
+      rel="noopener noreferrer">Get in touch</CallToAction
+    >
+  </main>
+</BaseLayout>
+
+<style>
+  .grid {
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  }
+  .card {
+    padding: 1rem;
+    border: 1px solid var(--gray-800);
+    border-radius: 0.5rem;
+    background: var(--gradient-subtle);
+  }
+  .card strong {
+    display: block;
+    color: var(--gray-0);
+  }
+  .card p {
+    margin: 0.25rem 0 0;
+    color: var(--gray-300);
+    font-size: var(--text-sm);
+  }
+</style>