feat: fullscreen toggle on playgrounds, reorder chapters, add Agent Skills

- Add fullscreen button (expand icon) to all playground cells with
  Escape key to exit; body scroll locked while fullscreen
- Rewrite MCP Skills chapter as "Agent Skills" — focuses on how
  skill documents (SKILL.md) teach the agent to write code: decision
  tree, response format selection, design system tokens
- Reorder chapters: Introduction → Deep Agent → Agent Skills →
  CopilotKit → Widget Renderer → Putting It Together

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: jerelvelarde

apps/notebook/src/components/playground-cell.tsx

@@ -7,7 +7,7 @@ import {
   SandpackLayout,
   useSandpack,
 } from "@codesandbox/sandpack-react";
-import { useEffect, useState } from "react";
+import { useEffect, useState, useCallback } from "react";
 
 function ResetButton() {
   const { sandpack } = useSandpack();
@@ -36,6 +36,7 @@ export function PlaygroundCell({
   title?: string;
 }) {
   const [isDark, setIsDark] = useState(false);
+  const [isFullscreen, setIsFullscreen] = useState(false);
 
   useEffect(() => {
     const check = () =>
@@ -49,6 +50,23 @@ export function PlaygroundCell({
     return () => observer.disconnect();
   }, []);
 
+  // Close fullscreen on Escape
+  useEffect(() => {
+    if (!isFullscreen) return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setIsFullscreen(false);
+    };
+    document.addEventListener("keydown", handler);
+    // Prevent body scroll while fullscreen
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.removeEventListener("keydown", handler);
+      document.body.style.overflow = "";
+    };
+  }, [isFullscreen]);
+
+  const toggleFullscreen = useCallback(() => setIsFullscreen((v) => !v), []);
+
   const sandpackTheme = {
     colors: {
       surface1: isDark ? "#1a1a2e" : "#ffffff",
@@ -70,26 +88,89 @@ export function PlaygroundCell({
     },
   };
 
+  const wrapperClass = isFullscreen
+    ? "fixed inset-0 z-50 flex flex-col"
+    : "notebook-cell overflow-hidden";
+
+  const wrapperStyle = isFullscreen
+    ? {
+        background: isDark ? "#0a0a0a" : "#ffffff",
+        borderColor: "var(--color-mint)",
+      }
+    : { borderColor: "var(--color-mint)" };
+
   return (
-    <div className="notebook-cell overflow-hidden" style={{ borderColor: "var(--color-mint)" }}>
+    <div className={wrapperClass} style={wrapperStyle}>
+      {/* Header bar */}
       {title && (
         <div
-          className="px-4 py-2.5 text-sm font-semibold flex items-center gap-2 border-b"
+          className="px-4 py-2.5 text-sm font-semibold flex items-center gap-2 border-b shrink-0"
           style={{
             borderColor: "var(--color-border-glass)",
-            background: "var(--color-glass-subtle)",
+            background: isFullscreen
+              ? isDark
+                ? "#1a1a2e"
+                : "#f7f7f9"
+              : "var(--color-glass-subtle)",
           }}
         >
           <span
             className="inline-flex items-center justify-center w-5 h-5 rounded text-xs"
             style={{
-              background: "linear-gradient(135deg, var(--color-lilac), var(--color-mint))",
+              background:
+                "linear-gradient(135deg, var(--color-lilac), var(--color-mint))",
               color: "#fff",
             }}
           >
             &#9654;
           </span>
-          <span style={{ color: "var(--text-primary)" }}>{title}</span>
+          <span className="flex-1" style={{ color: "var(--text-primary)" }}>
+            {title}
+          </span>
+          <button
+            onClick={toggleFullscreen}
+            className="flex items-center justify-center w-7 h-7 rounded-md transition-colors cursor-pointer"
+            style={{
+              background: "var(--color-glass-subtle)",
+              border: "1px solid var(--color-border-glass)",
+              color: "var(--text-secondary)",
+            }}
+            title={isFullscreen ? "Exit fullscreen (Esc)" : "Fullscreen"}
+          >
+            {isFullscreen ? (
+              <svg
+                width="14"
+                height="14"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <polyline points="4 14 10 14 10 20" />
+                <polyline points="20 10 14 10 14 4" />
+                <line x1="14" y1="10" x2="21" y2="3" />
+                <line x1="3" y1="21" x2="10" y2="14" />
+              </svg>
+            ) : (
+              <svg
+                width="14"
+                height="14"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <polyline points="15 3 21 3 21 9" />
+                <polyline points="9 21 3 21 3 15" />
+                <line x1="21" y1="3" x2="14" y2="10" />
+                <line x1="3" y1="21" x2="10" y2="14" />
+              </svg>
+            )}
+          </button>
         </div>
       )}
 
@@ -111,25 +192,27 @@ export function PlaygroundCell({
         }}
       >
         <SandpackLayout
+          className={isFullscreen ? "flex-1" : ""}
           style={{
             border: "none",
             borderRadius: 0,
             background: "transparent",
+            ...(isFullscreen ? { height: "100%" } : {}),
           }}
         >
           <SandpackCodeEditor
             showLineNumbers
             showTabs
-            style={{ minHeight: 280 }}
+            style={{ minHeight: isFullscreen ? undefined : 280 }}
           />
           <SandpackPreview
             showOpenInCodeSandbox={false}
             showRefreshButton
-            style={{ minHeight: 280 }}
+            style={{ minHeight: isFullscreen ? undefined : 280 }}
           />
         </SandpackLayout>
         <div
-          className="flex items-center gap-2 px-4 py-2 border-t"
+          className="flex items-center gap-2 px-4 py-2 border-t shrink-0"
           style={{ borderColor: "var(--color-border-glass)" }}
         >
           <ResetButton />