blog: an interactive UI for the grill-me skill

apps/marketing/src/content/blog/an-interactive-ui-for-the-grill-me-skill.md

@@ -0,0 +1,33 @@
+---
+title: "An interactive UI for the grill-me skill"
+description: "Run /plannotator-last on a grill-me round: the questions open in your browser, you strike out assumptions and comment on fragments, and the feedback goes straight back to the agent."
+date: 2026-08-15
+author: "backnotprop"
+tags: ["annotate", "grill-me", "skills", "workflow"]
+---
+
+[Matt Pocock](https://www.aihero.dev)'s [`/grill-me`](https://www.aihero.dev/skills-grill-me) skill interviews you about a loose idea until it is sharp enough to commit to. It asks in rounds: a batch of numbered questions, each with a recommended answer, and then it waits. Answering that in a terminal is cramped. You reply serially by number, scroll up to re-read Q7 while typing about Q3, and edit long answers in a prompt box.
+
+Plannotator fixes this with one command. `/plannotator-last` opens the agent's last message in your browser and makes it annotatable. Works in Claude Code, Codex CLI, OpenCode, and Pi. Mark up the round, hit Send Feedback, and the annotations go straight back to the agent as its next input.
+
+![A grill-me round open in Plannotator: question text highlighted, several recommended answers struck through, comments listed in the sidebar](/assets/blog/grilling.jpeg)
+
+```bash
+/grill-me            # start the interview
+/plannotator-last    # when a round arrives, open it in the browser
+                     # mark it up, Send Feedback, agent computes the next round
+```
+
+That is the whole workflow. Review the questions, annotate or strike through parts of a question or an answer, send feedback, and iterate through each round of the session.
+
+We are exploring more questionnaire-style input too, starting from shadcn's new [questionnaire component](https://ui.shadcn.com/docs/components/base/questionnaire). But what we keep finding is that the ability to annotate each part of a question or answer, rather than just selecting answers, is where the power is.
+
+Codex ships annotation in its native app now too, and it is good. It has been fun iterating on these ideas with their team in the open on X, down to some of the naming, and if you live in the Codex app their version is worth using.
+
+We posted a marked-up session here: [@plannotator on X](https://x.com/plannotator/status/2088688374790160503).
+
+```bash
+curl -fsSL https://plannotator.ai/install.sh | bash
+```
+
+Then run a grill session and hit `/plannotator-last` on the first round.

apps/marketing/src/layouts/Blog.astro

@@ -48,4 +48,67 @@ const formattedDate = date.toLocaleDateString('en-US', {
     </div>
     <Footer />
   </div>
+  <dialog id="img-lightbox" aria-label="Enlarged image">
+    <img alt="" />
+  </dialog>
+  <script is:inline>
+    // Click a post image to view it full-size in a native <dialog>.
+    (function () {
+      var dialog = document.getElementById('img-lightbox');
+      if (!dialog || !dialog.showModal) return;
+      var dialogImg = dialog.querySelector('img');
+      document.querySelectorAll('.prose img').forEach(function (img) {
+        img.classList.add('lightboxable');
+        img.addEventListener('click', function () {
+          dialogImg.src = img.src;
+          dialogImg.alt = img.alt || '';
+          dialog.showModal();
+        });
+      });
+      // Native <dialog> handles Escape; this covers click-anywhere-to-close.
+      dialog.addEventListener('click', function () {
+        dialog.close();
+      });
+    })();
+  </script>
+  <style is:global>
+    .prose img.lightboxable {
+      cursor: zoom-in;
+    }
+    #img-lightbox {
+      /* Re-assert UA centering; the global reset zeroes dialog margins,
+         which shifts the box top-left. Size to the image exactly so the
+         click-to-close surface has no dead area around it. */
+      margin: auto;
+      inset: 0;
+      width: fit-content;
+      height: fit-content;
+      padding: 0;
+      border: none;
+      background: transparent;
+      max-width: 96vw;
+      max-height: 96vh;
+      cursor: zoom-out;
+    }
+    #img-lightbox img {
+      display: block;
+      max-width: 96vw;
+      max-height: 96vh;
+      width: auto;
+      height: auto;
+      border-radius: 6px;
+    }
+    #img-lightbox::backdrop {
+      background: rgba(0, 0, 0, 0.82);
+    }
+    @media (prefers-reduced-motion: no-preference) {
+      #img-lightbox[open] {
+        animation: lightbox-in 120ms ease-out;
+      }
+      @keyframes lightbox-in {
+        from { opacity: 0; transform: scale(0.97); }
+        to { opacity: 1; transform: scale(1); }
+      }
+    }
+  </style>
 </Base>