From 516fba6cfeaff9b4e670e13d7f3b129f7421ffc3 Mon Sep 17 00:00:00 2001
From: dprevoznik <58714078+dprevoznik@users.noreply.github.com>
Date: Thu, 24 Sep 2026 13:51:40 +0000
Subject: [PATCH] Split cookbooks page into common patterns and harnesses &
 models sections

The common patterns cards were only discoverable via the mobile nav
drawer sidebar grouping; the page itself showed one undifferentiated
grid. Group cards under matching headings so common patterns are
visible directly on the page on mobile without opening the navbar.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 cookbooks.mdx | 31 +++++++++++++++++++------------
 1 file changed, 19 insertions(+), 12 deletions(-)

diff --git a/cookbooks.mdx b/cookbooks.mdx
index b0b2a02a..44984ef2 100644
--- a/cookbooks.mdx
+++ b/cookbooks.mdx
@@ -10,11 +10,9 @@ import { CookbookSearch } from '/snippets/cookbook-search.jsx';
 
 <CookbookSearch />
 
+## Common patterns
+
 <Columns className="responsive-columns" cols={3}>
-<Card title="Jev Browser Use" img="/images/cookbooks/jev.png" href="https://github.com/kernel/browser-loop/tree/main/packages/browser-loop/examples/jev-system-one">
-    <div className="cookbook-tag">harnesses & models</div>
-    Run a browser use loop with Jev System One.
-  </Card>
   <Card title="Human-in-the-loop Credentials" img="/images/cookbooks/hitl-creds.png" href="/browsers/use-vault-credentials-in-browser-agent">
     <div className="cookbook-tag">common patterns</div>
     Collect credentials from a human, then let your agent fill the form.
@@ -23,6 +21,23 @@ import { CookbookSearch } from '/snippets/cookbook-search.jsx';
     <div className="cookbook-tag">common patterns</div>
     Enable Payments in a Browser Agent.
   </Card>
+  <Card title="Playwright & Computer Use" img="/images/cookbooks/playwright.png" href="/browsers/playwright-computer-use-fallback">
+    <div className="cookbook-tag">common patterns</div>
+    Using Playwright with computer use fallback.
+  </Card>
+  <Card title="Pausing for Captcha Solves" img="/images/cookbooks/captcha-solving.png" href="/browsers/telemetry/pausing-for-captcha-solves">
+    <div className="cookbook-tag">common patterns</div>
+    Hold an agent while Kernel's captcha solver works, and tell it what actually happened.
+  </Card>
+</Columns>
+
+## Harnesses & models
+
+<Columns className="responsive-columns" cols={3}>
+  <Card title="Jev Browser Use" img="/images/cookbooks/jev.png" href="https://github.com/kernel/browser-loop/tree/main/packages/browser-loop/examples/jev-system-one">
+    <div className="cookbook-tag">harnesses & models</div>
+    Run a browser use loop with Jev System One.
+  </Card>
   <Card title="AI SDK Agent" img="/images/cookbooks/vercel.png" href="https://github.com/kernel/cookbooks/tree/main/integrations/ai-sdk-agent">
     <div className="cookbook-tag">harnesses & models</div>
     Browser automation with the Vercel AI SDK and KERNEL's Playwright execution API.
@@ -55,14 +70,6 @@ import { CookbookSearch } from '/snippets/cookbook-search.jsx';
     <div className="cookbook-tag">harnesses & models</div>
     Build a browser agent with eve and KERNEL managed auth.
   </Card>
-  <Card title="Playwright & Computer Use" img="/images/cookbooks/playwright.png" href="/browsers/playwright-computer-use-fallback">
-    <div className="cookbook-tag">common patterns</div>
-    Using Playwright with computer use fallback.
-  </Card>
-  <Card title="Pausing for Captcha Solves" img="/images/cookbooks/captcha-solving.png" href="/browsers/telemetry/pausing-for-captcha-solves">
-    <div className="cookbook-tag">common patterns</div>
-    Hold an agent while Kernel's captcha solver works, and tell it what actually happened.
-  </Card>
   <Card title="Stagehand Google CUA Agent" img="/images/cookbooks/stagehand.png" href="https://github.com/kernel/cookbooks/tree/main/integrations/stagehand-google-cua-agent">
     <div className="cookbook-tag">harnesses & models</div>
     Computer use agent with Google's Gemini 2.5 and Stagehand.