chore(components): update MDX components and next config settings

2026-02-12 15:52:47 +00:00 · 2026-01-11 00:20:41 +03:00
parent 09587b3ac0
commit 412f167f1c
21 changed files with 1628 additions and 1509 deletions
--- a/mdx-components.tsx
+++ b/mdx-components.tsx
@@ -1,6 +1,6 @@
 import type { MDXComponents } from "mdx/types";
 import type { ComponentPropsWithoutRef } from "react";
-import { BookPartsNav, BREAKFramework, Callout, ChainErrorDemo, ChainExample, ChainFlowDemo, Checklist, CodeEditor, Collapsible, Compare, ContentPipelineDemo, ContextPlayground, ContextWindowDemo, CRISPEFramework, DiffView, EmbeddingsDemo, FallbackDemo, FewShotDemo, IconCheck, IconClipboard, IconLightbulb, IconLock, IconSettings, IconStar, IconTarget, IconUser, IconX, InfoGrid, IterativeRefinementDemo, JailbreakDemo, JsonYamlDemo, LLMCapabilitiesDemo, PrinciplesSummary, PromptBreakdown, Quiz, RTFFramework, SpecificitySpectrum, StructuredOutputDemo, SummarizationDemo, TemperatureDemo, TextToImageDemo, TextToVideoDemo, TokenizerDemo, TokenPredictionDemo, TryIt, ValidationDemo, VersionDiff } from "@/components/book/interactive";
+import { BookPartsNav, BREAKFramework, Callout, ChainErrorDemo, ChainExample, ChainFlowDemo, Checklist, CodeEditor, Collapsible, Compare, ContentPipelineDemo, ContextPlayground, ContextWindowDemo, CostCalculatorDemo, CRISPEFramework, DiffView, EmbeddingsDemo, FallbackDemo, FewShotDemo, IconCheck, IconClipboard, IconLightbulb, IconLock, IconSettings, IconStar, IconTarget, IconUser, IconX, InfoGrid, IterativeRefinementDemo, JailbreakDemo, JsonYamlDemo, LLMCapabilitiesDemo, PrinciplesSummary, PromptBreakdown, Quiz, RTFFramework, SpecificitySpectrum, StructuredOutputDemo, SummarizationDemo, TemperatureDemo, TextToImageDemo, TextToVideoDemo, TokenizerDemo, TokenPredictionDemo, TryIt, ValidationDemo, VersionDiff } from "@/components/book/interactive";

 export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
@@ -38,6 +38,7 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
    ContentPipelineDemo,
    ContextPlayground,
    ContextWindowDemo,
+    CostCalculatorDemo,
    CRISPEFramework,
    DiffView,
    EmbeddingsDemo,
--- a/next.config.ts
+++ b/next.config.ts
@@ -55,11 +55,6 @@ const nextConfig: NextConfig = {
        destination: "/embed",
        permanent: true,
      },
-      {
-        source: "/book",
-        destination: "/book/00a-preface",
-        permanent: true,
-      },
    ];
  },
 };
--- a/src/components/book/elements/chain-demos.tsx
+++ b/src/components/book/elements/chain-demos.tsx
@@ -127,7 +127,7 @@ export function ValidationDemo() {
            onClick={() => { setScenario("invalid"); resetSteps(); }}
            className={cn(
              "px-2 py-1 text-xs rounded",
-              scenario === "invalid" ? "bg-red-100 dark:bg-red-900/50 text-red-700 dark:text-red-300" : "bg-muted"
+              scenario === "invalid" ? "bg-amber-100 dark:bg-amber-900/50 text-amber-700 dark:text-amber-300" : "bg-muted"
            )}
          >
            Invalid → Retry
@@ -144,42 +144,92 @@ export function ValidationDemo() {
      </div>
      
      <div className="p-4">
-        <div className="flex items-center gap-4">
-          {steps.map((step, index) => (
-            <div key={step.id} className="flex items-center gap-4 flex-1">
-              <div className={cn(
-                "flex-1 p-3 rounded-lg border transition-all",
-                step.status === "pending" && "bg-muted/30",
-                step.status === "running" && "bg-blue-50 dark:bg-blue-950/30 border-blue-300 dark:border-blue-700",
-                step.status === "success" && "bg-green-50 dark:bg-green-950/30 border-green-300 dark:border-green-700",
-                step.status === "failed" && "bg-red-50 dark:bg-red-950/30 border-red-300 dark:border-red-700",
-                step.status === "retrying" && "bg-amber-50 dark:bg-amber-950/30 border-amber-300 dark:border-amber-700"
-              )}>
-                <div className="flex items-center gap-2 mb-1">
-                  {step.status === "pending" && <div className="w-4 h-4 rounded-full border-2 border-muted-foreground/30" />}
-                  {step.status === "running" && <div className="w-4 h-4 rounded-full border-2 border-blue-500 border-t-transparent animate-spin" />}
-                  {step.status === "success" && <CheckCircle2 className="w-4 h-4 text-green-500" />}
-                  {step.status === "failed" && <XCircle className="w-4 h-4 text-red-500" />}
-                  {step.status === "retrying" && <RotateCcw className="w-4 h-4 text-amber-500 animate-spin" />}
-                  <span className="text-sm font-medium">{step.name}</span>
-                </div>
-                {step.output && <p className="text-xs font-mono text-muted-foreground truncate">{step.output}</p>}
-                {step.validationResult === "invalid" && (
-                  <p className="text-xs text-red-600 dark:text-red-400">INVALID: {step.reason}</p>
-                )}
-                {step.validationResult === "valid" && (
-                  <p className="text-xs text-green-600 dark:text-green-400">VALID ✓</p>
-                )}
-              </div>
-              {index < steps.length - 1 && (
-                <ArrowRight className={cn(
-                  "w-5 h-5 shrink-0",
-                  step.status === "success" ? "text-green-500" : "text-muted-foreground/30"
-                )} />
-              )}
+        <div className="grid md:grid-cols-3 gap-4">
+          {/* Generate Step */}
+          <div className={cn(
+            "p-4 rounded-lg border-2 transition-all",
+            steps[0].status === "pending" && "border-dashed border-muted-foreground/30",
+            steps[0].status === "running" && "border-blue-400 bg-blue-50 dark:bg-blue-950/30",
+            steps[0].status === "success" && "border-green-400 bg-green-50 dark:bg-green-950/30",
+            steps[0].status === "retrying" && "border-amber-400 bg-amber-50 dark:bg-amber-950/30"
+          )}>
+            <div className="text-xs uppercase tracking-wide text-muted-foreground mb-2">Step 1</div>
+            <div className="flex items-center gap-2 mb-2">
+              {steps[0].status === "pending" && <div className="w-4 h-4 rounded-full border-2 border-muted-foreground/30" />}
+              {steps[0].status === "running" && <div className="w-4 h-4 rounded-full border-2 border-blue-500 border-t-transparent animate-spin" />}
+              {steps[0].status === "success" && <CheckCircle2 className="w-4 h-4 text-green-500" />}
+              {steps[0].status === "retrying" && <RotateCcw className="w-4 h-4 text-amber-500 animate-spin" />}
+              <span className="font-medium text-sm">{steps[0].name}</span>
            </div>
-          ))}
+            {steps[0].output && (
+              <div className="mt-2 p-2 bg-muted/50 rounded text-xs font-mono break-all">
+                {steps[0].output}
+              </div>
+            )}
+          </div>
+          
+          {/* Validate Step */}
+          <div className={cn(
+            "p-4 rounded-lg border-2 transition-all",
+            steps[1].status === "pending" && "border-dashed border-muted-foreground/30",
+            steps[1].status === "running" && "border-blue-400 bg-blue-50 dark:bg-blue-950/30",
+            steps[1].status === "success" && "border-green-400 bg-green-50 dark:bg-green-950/30",
+            steps[1].status === "failed" && "border-red-400 bg-red-50 dark:bg-red-950/30"
+          )}>
+            <div className="text-xs uppercase tracking-wide text-muted-foreground mb-2">Step 2</div>
+            <div className="flex items-center gap-2 mb-2">
+              {steps[1].status === "pending" && <div className="w-4 h-4 rounded-full border-2 border-muted-foreground/30" />}
+              {steps[1].status === "running" && <div className="w-4 h-4 rounded-full border-2 border-blue-500 border-t-transparent animate-spin" />}
+              {steps[1].status === "success" && <CheckCircle2 className="w-4 h-4 text-green-500" />}
+              {steps[1].status === "failed" && <XCircle className="w-4 h-4 text-red-500" />}
+              <span className="font-medium text-sm">{steps[1].name}</span>
+            </div>
+            {steps[1].validationResult === "invalid" && (
+              <div className="mt-2 p-2 bg-red-100 dark:bg-red-900/30 rounded">
+                <p className="text-xs text-red-700 dark:text-red-300 font-medium">✗ INVALID</p>
+                <p className="text-xs text-red-600 dark:text-red-400 mt-1">{steps[1].reason}</p>
+              </div>
+            )}
+            {steps[1].validationResult === "valid" && (
+              <div className="mt-2 p-2 bg-green-100 dark:bg-green-900/30 rounded">
+                <p className="text-xs text-green-700 dark:text-green-300 font-medium">✓ VALID</p>
+                <p className="text-xs text-green-600 dark:text-green-400 mt-1">{steps[1].reason}</p>
+              </div>
+            )}
+            {steps[1].status === "pending" && (
+              <p className="text-xs text-muted-foreground">Checks output schema & types</p>
+            )}
+          </div>
+          
+          {/* Process Step */}
+          <div className={cn(
+            "p-4 rounded-lg border-2 transition-all",
+            steps[2].status === "pending" && "border-dashed border-muted-foreground/30",
+            steps[2].status === "running" && "border-blue-400 bg-blue-50 dark:bg-blue-950/30",
+            steps[2].status === "success" && "border-green-400 bg-green-50 dark:bg-green-950/30"
+          )}>
+            <div className="text-xs uppercase tracking-wide text-muted-foreground mb-2">Step 3</div>
+            <div className="flex items-center gap-2 mb-2">
+              {steps[2].status === "pending" && <div className="w-4 h-4 rounded-full border-2 border-muted-foreground/30" />}
+              {steps[2].status === "running" && <div className="w-4 h-4 rounded-full border-2 border-blue-500 border-t-transparent animate-spin" />}
+              {steps[2].status === "success" && <CheckCircle2 className="w-4 h-4 text-green-500" />}
+              <span className="font-medium text-sm">{steps[2].name}</span>
+            </div>
+            {steps[2].output && <p className="text-xs text-muted-foreground">{steps[2].output}</p>}
+            {steps[2].status === "pending" && (
+              <p className="text-xs text-muted-foreground">Uses validated data</p>
+            )}
+          </div>
        </div>
+        
+        {/* Retry indicator */}
+        {scenario === "invalid" && steps[0].status === "retrying" && (
+          <div className="mt-4 p-3 bg-amber-50 dark:bg-amber-950/30 border border-amber-200 dark:border-amber-800 rounded-lg">
+            <p className="text-xs text-amber-700 dark:text-amber-300">
+              <span className="font-medium">↺ Retrying Step 1</span> — Validation failed, re-generating with feedback: "{steps[1].reason}"
+            </p>
+          </div>
+        )}
      </div>
    </div>
  );
--- a/src/components/book/elements/demos.tsx
+++ b/src/components/book/elements/demos.tsx
@@ -862,3 +862,125 @@ export function IterativeRefinementDemo() {
    </div>
  );
 }
+
+// Cost Calculator Component
+export function CostCalculatorDemo() {
+  const [inputTokens, setInputTokens] = useState(500);
+  const [outputTokens, setOutputTokens] = useState(200);
+  const [requestsPerDay, setRequestsPerDay] = useState(1000);
+  const [inputPrice, setInputPrice] = useState(0.15); // $ per 1M tokens
+  const [outputPrice, setOutputPrice] = useState(0.60); // $ per 1M tokens
+
+  const costPerRequest = (inputTokens * inputPrice / 1_000_000) + (outputTokens * outputPrice / 1_000_000);
+  const dailyCost = costPerRequest * requestsPerDay;
+  const monthlyCost = dailyCost * 30;
+
+  const formatCurrency = (amount: number) => {
+    if (amount < 0.01) return `$${amount.toFixed(4)}`;
+    if (amount < 1) return `$${amount.toFixed(3)}`;
+    if (amount < 100) return `$${amount.toFixed(2)}`;
+    return `$${amount.toLocaleString(undefined, { maximumFractionDigits: 0 })}`;
+  };
+
+  return (
+    <div className="my-6 p-4 border rounded-lg bg-card">
+      <div className="text-sm font-medium mb-4">API Cost Calculator</div>
+      
+      <div className="grid gap-4 md:grid-cols-2">
+        {/* Input Tokens */}
+        <div>
+          <label className="text-xs text-muted-foreground block mb-1.5">
+            Input Tokens (per request)
+          </label>
+          <input
+            type="number"
+            value={inputTokens}
+            onChange={(e) => setInputTokens(Math.max(0, parseInt(e.target.value) || 0))}
+            className="w-full px-3 py-2 text-sm border rounded-md bg-background"
+          />
+        </div>
+
+        {/* Input Price */}
+        <div>
+          <label className="text-xs text-muted-foreground block mb-1.5">
+            Input Price ($ per 1M tokens)
+          </label>
+          <input
+            type="number"
+            step="0.01"
+            value={inputPrice}
+            onChange={(e) => setInputPrice(Math.max(0, parseFloat(e.target.value) || 0))}
+            className="w-full px-3 py-2 text-sm border rounded-md bg-background"
+          />
+        </div>
+
+        {/* Output Tokens */}
+        <div>
+          <label className="text-xs text-muted-foreground block mb-1.5">
+            Output Tokens (per request)
+          </label>
+          <input
+            type="number"
+            value={outputTokens}
+            onChange={(e) => setOutputTokens(Math.max(0, parseInt(e.target.value) || 0))}
+            className="w-full px-3 py-2 text-sm border rounded-md bg-background"
+          />
+        </div>
+
+        {/* Output Price */}
+        <div>
+          <label className="text-xs text-muted-foreground block mb-1.5">
+            Output Price ($ per 1M tokens)
+          </label>
+          <input
+            type="number"
+            step="0.01"
+            value={outputPrice}
+            onChange={(e) => setOutputPrice(Math.max(0, parseFloat(e.target.value) || 0))}
+            className="w-full px-3 py-2 text-sm border rounded-md bg-background"
+          />
+        </div>
+
+        {/* Requests per Day */}
+        <div className="md:col-span-2">
+          <label className="text-xs text-muted-foreground block mb-1.5">
+            Requests per Day
+          </label>
+          <input
+            type="number"
+            value={requestsPerDay}
+            onChange={(e) => setRequestsPerDay(Math.max(0, parseInt(e.target.value) || 0))}
+            className="w-full px-3 py-2 text-sm border rounded-md bg-background"
+          />
+        </div>
+      </div>
+
+      {/* Results */}
+      <div className="mt-4 pt-4 border-t grid gap-3 md:grid-cols-3">
+        <div className="p-3 bg-muted/30 rounded-lg text-center">
+          <div className="text-xs text-muted-foreground">Per Request</div>
+          <div className="text-lg font-semibold text-blue-600 dark:text-blue-400">
+            {formatCurrency(costPerRequest)}
+          </div>
+        </div>
+        <div className="p-3 bg-muted/30 rounded-lg text-center">
+          <div className="text-xs text-muted-foreground">Daily Cost</div>
+          <div className="text-lg font-semibold text-amber-600 dark:text-amber-400">
+            {formatCurrency(dailyCost)}
+          </div>
+        </div>
+        <div className="p-3 bg-muted/30 rounded-lg text-center">
+          <div className="text-xs text-muted-foreground">Monthly Cost</div>
+          <div className="text-lg font-semibold text-red-600 dark:text-red-400">
+            {formatCurrency(monthlyCost)}
+          </div>
+        </div>
+      </div>
+
+      {/* Formula */}
+      <div className="mt-3 p-2 bg-muted/20 rounded text-xs text-muted-foreground font-mono text-center">
+        ({inputTokens.toLocaleString()} × ${inputPrice}/1M) + ({outputTokens.toLocaleString()} × ${outputPrice}/1M) = {formatCurrency(costPerRequest)}/request
+      </div>
+    </div>
+  );
+}
--- a/src/components/book/elements/index.ts
+++ b/src/components/book/elements/index.ts
@@ -6,7 +6,7 @@ export { Collapsible, Callout, CopyableCode, Quiz, TryIt } from "./ui";
 export { Checklist, Compare, InfoGrid } from "./lists";
 export { FrameworkDemo, CRISPEFramework, BREAKFramework, RTFFramework } from "./frameworks";
 export { PromptBreakdown, SpecificitySpectrum } from "./prompt";
-export { TokenizerDemo, ContextWindowDemo, TemperatureDemo, StructuredOutputDemo, FewShotDemo, JsonYamlDemo, IterativeRefinementDemo } from "./demos";
+export { TokenizerDemo, ContextWindowDemo, TemperatureDemo, StructuredOutputDemo, FewShotDemo, JsonYamlDemo, IterativeRefinementDemo, CostCalculatorDemo } from "./demos";
 export { PrinciplesSummary } from "./principles";
 export { JailbreakDemo } from "./security";
 export { EmbeddingsDemo, LLMCapabilitiesDemo } from "./ai-demos";
--- a/src/components/book/elements/lists.tsx
+++ b/src/components/book/elements/lists.tsx
@@ -99,6 +99,7 @@ interface InfoItem {
  title?: string;
  description: string;
  example?: string;
+  exampleType?: "code" | "text"; // "code" = mono font, "text" = regular font
  icon?: string;
  color?: "purple" | "blue" | "green" | "amber" | "rose" | "red" | "cyan" | "pink" | "indigo";
 }
@@ -144,7 +145,7 @@ const iconMap: Record<string, LucideIcon> = {
 export function InfoGrid({ items, columns = 1 }: InfoGridProps) {
  return (
    <div className={cn(
-      "my-4 grid gap-2",
+      "my-4 grid gap-3",
      columns === 2 ? "md:grid-cols-2" : "grid-cols-1"
    )}>
      {items.map((item, index) => {
@@ -156,20 +157,32 @@ export function InfoGrid({ items, columns = 1 }: InfoGridProps) {
        return (
          <div
            key={index}
-            className={cn(
-              "px-3 py-2.5 rounded-lg border",
-              colors.bg,
-              colors.border
-            )}
+            className="group relative pl-4 py-2"
          >
-            <div>
+            {/* Color accent bar */}
+            <div className={cn(
+              "absolute left-0 top-0 bottom-0 w-1 rounded-full",
+              colors.text.replace("text-", "bg-")
+            )} />
+            
+            <div className="space-y-1">
+              {/* Title row */}
              <div className="flex items-center gap-2">
                {Icon && <Icon className={cn("h-4 w-4 shrink-0", colors.text)} />}
-                <span className={cn("font-medium text-sm", colors.text)}>{displayTitle}</span>
-                <span className="text-sm text-muted-foreground">{item.description}</span>
+                <span className={cn("font-semibold text-sm", colors.text)}>{displayTitle}</span>
              </div>
+              
+              {/* Description */}
+              <p className="text-sm text-foreground/80 m-0! leading-relaxed">{item.description}</p>
+              
+              {/* Example */}
              {item.example && (
-                <p className="text-xs text-muted-foreground mt-1.5 font-mono bg-black/5 dark:bg-white/5 rounded px-1.5 py-1 m-0! mt-3!">{item.example}</p>
+                <p className={cn(
+                  "m-0! mt-1.5!",
+                  item.exampleType === "text" 
+                    ? "text-sm italic text-muted-foreground" 
+                    : "text-xs font-mono bg-muted/50 text-foreground/70 rounded px-2 py-1.5 border border-border/50"
+                )}>{item.example}</p>
              )}
            </div>
          </div>
--- a/src/components/book/elements/token-prediction.tsx
+++ b/src/components/book/elements/token-prediction.tsx
@@ -7,13 +7,18 @@ import { Play, RotateCcw } from "lucide-react";
 interface TokenPrediction {
  token: string;
  probability: number;
+  isPartial?: boolean;
 }

-// Simulated predictions based on text context
-const getPredictions = (text: string): TokenPrediction[] => {
-  const lowerText = text.toLowerCase().trim();
+// Define the full sentence with token boundaries
+const TOKENS = ["The", " capital", " of", " France", " is", " Paris", "."];
+const FULL_TEXT = TOKENS.join("");
+
+// Get predictions based on current position in the text
+const getPredictions = (text: string, fullText: string = FULL_TEXT): TokenPrediction[] => {
+  const lowerText = text.toLowerCase();
  
-  if (lowerText === "" || lowerText.length === 0) {
+  if (text === "" || text.length === 0) {
    return [
      { token: "The", probability: 0.15 },
      { token: "I", probability: 0.12 },
@@ -21,6 +26,34 @@ const getPredictions = (text: string): TokenPrediction[] => {
    ];
  }
  
+  // Find which token we're currently in and how much is left
+  let currentPos = 0;
+  let currentTokenIndex = 0;
+  
+  for (let i = 0; i < TOKENS.length; i++) {
+    const tokenEnd = currentPos + TOKENS[i].length;
+    if (text.length <= tokenEnd) {
+      currentTokenIndex = i;
+      break;
+    }
+    currentPos = tokenEnd;
+  }
+  
+  const currentToken = TOKENS[currentTokenIndex];
+  const typedInToken = text.length - currentPos;
+  const remainingInToken = currentToken.slice(typedInToken);
+  
+  // If we're in the middle of typing a token, show the remainder as top prediction
+  if (remainingInToken.length > 0 && typedInToken > 0) {
+    const prob = 0.85 + (typedInToken / currentToken.length) * 0.10; // Increases as more is typed
+    return [
+      { token: remainingInToken, probability: Math.min(prob, 0.98), isPartial: true },
+      { token: " and", probability: 0.02 },
+      { token: " the", probability: 0.01 },
+    ];
+  }
+  
+  // At token boundaries, show next token predictions
  if (lowerText === "the") {
    return [
      { token: " capital", probability: 0.04 },
@@ -61,7 +94,7 @@ const getPredictions = (text: string): TokenPrediction[] => {
    ];
  }
  
-  if (lowerText.includes("capital of france is paris")) {
+  if (lowerText === "the capital of france is paris") {
    return [
      { token: ".", probability: 0.65 },
      { token: ",", probability: 0.20 },
@@ -69,6 +102,14 @@ const getPredictions = (text: string): TokenPrediction[] => {
    ];
  }
  
+  if (text === fullText) {
+    return [
+      { token: " It", probability: 0.25 },
+      { token: " The", probability: 0.18 },
+      { token: " Paris", probability: 0.12 },
+    ];
+  }
+  
  return [
    { token: " the", probability: 0.08 },
    { token: " and", probability: 0.06 },
@@ -84,7 +125,7 @@ export function TokenPredictionDemo() {
  const [isComplete, setIsComplete] = useState(false);
  const autoTypeRef = useRef<NodeJS.Timeout | null>(null);
  
-  const exampleText = "The capital of France is Paris";
+  const exampleText = FULL_TEXT;
  
  useEffect(() => {
    setIsAnimating(true);
@@ -196,7 +237,9 @@ export function TokenPredictionDemo() {
        </div>

        <div>
-          <p className="text-sm font-medium mb-3">Top 3 Predicted Next Tokens:</p>
+          <p className="text-sm font-medium mb-3">
+            {predictions[0]?.isPartial ? "Completing current token:" : "Top 3 Predicted Next Tokens:"}
+          </p>
          <div className="space-y-2">
            {predictions.map((pred, index) => (
              <div
--- a/src/components/book/elements/ui.tsx
+++ b/src/components/book/elements/ui.tsx
@@ -261,7 +261,7 @@ export function TryIt({ prompt, description, title = "Try It Yourself", compact
        </div>
      </div>
      {description && <p className="text-sm text-muted-foreground mb-3 mt-0!">{description}</p>}
-      <pre className="p-3 bg-background rounded border text-sm whitespace-pre-wrap">{prompt}</pre>
+      <pre className="p-3 bg-background rounded border text-sm whitespace-pre-wrap mb-0!">{prompt}</pre>
    </div>
  );
 }
--- a/src/components/book/interactive.tsx
+++ b/src/components/book/interactive.tsx
@@ -7,7 +7,7 @@ export { Collapsible, Callout, CopyableCode, Quiz, TryIt } from "./elements/ui";
 export { Checklist, Compare, InfoGrid } from "./elements/lists";
 export { FrameworkDemo, CRISPEFramework, BREAKFramework, RTFFramework } from "./elements/frameworks";
 export { PromptBreakdown, SpecificitySpectrum } from "./elements/prompt";
-export { TokenizerDemo, ContextWindowDemo, TemperatureDemo, StructuredOutputDemo, FewShotDemo, JsonYamlDemo, IterativeRefinementDemo } from "./elements/demos";
+export { TokenizerDemo, ContextWindowDemo, TemperatureDemo, StructuredOutputDemo, FewShotDemo, JsonYamlDemo, IterativeRefinementDemo, CostCalculatorDemo } from "./elements/demos";
 export { PrinciplesSummary } from "./elements/principles";
 export { JailbreakDemo } from "./elements/security";
 export { EmbeddingsDemo, LLMCapabilitiesDemo } from "./elements/ai-demos";
--- a/src/components/prompts/run-prompt-button.tsx
+++ b/src/components/prompts/run-prompt-button.tsx
@@ -295,10 +295,10 @@ export function RunPromptButton({
  }, [variableValues, onVariablesFilled, pendingPlatform, getContentWithVariables, content, promptId]);

  const handleRun = (platform: Platform, baseUrl: string) => {
-    // Check if there are unfilled variables (empty values)
-    const hasUnfilled = unfilledVariables.some(v => !v.defaultValue || v.defaultValue.trim() === "");
+    // Check if there are any variables to fill
+    const hasVariables = unfilledVariables.length > 0;
    
-    if (hasUnfilled) {
+    if (hasVariables) {
      // Show variable fill dialog first (for both query string and copy flows)
      openVariableDialog(platform, baseUrl);
      return;
--- a/src/content/book/01-understanding-ai-models.mdx
+++ b/src/content/book/01-understanding-ai-models.mdx
@@ -22,6 +22,10 @@ When you type "The capital of France is...", the AI predicts "Paris" because tha

 **Tokens**: AI doesn't read letter by letter. It breaks text into chunks called "tokens." A token might be a whole word like "hello" or part of a word like "ing." Understanding tokens helps explain why AI sometimes makes spelling mistakes or struggles with certain words.

+<Callout type="info" title="What is a Token?">
+A token is the smallest unit of text that an AI model processes. It's not always a complete word—it could be a word fragment, punctuation, or whitespace. For example, "unbelievable" might become 3 tokens: "un" + "believ" + "able". On average, **1 token ≈ 4 characters** or **100 tokens ≈ 75 words**. API costs and context limits are measured in tokens.
+</Callout>
+
 <TokenizerDemo />

 **Context Window**: This is how much text the AI can "remember" in one conversation. Think of it like the AI's short-term memory. It includes everything: your question AND the AI's answer.
--- a/src/content/book/09-json-yaml-prompting.mdx
+++ b/src/content/book/09-json-yaml-prompting.mdx
@@ -12,6 +12,13 @@ JSON and YAML transform AI outputs from freeform text into structured, type-safe

 JSON (JavaScript Object Notation) is the most common format for programmatic AI outputs. Its strict syntax makes it easy to parse, but also means small errors can break your entire pipeline.

+### Do's and Don'ts: Requesting JSON
+
+<Compare 
+  before={{ label: "❌ Don't: Vague request", content: "Give me the user info as JSON." }}
+  after={{ label: "✓ Do: Show the schema", content: "Extract user info as JSON matching this schema:\n\n{\n  \"name\": \"string\",\n  \"age\": number,\n  \"email\": \"string\"\n}\n\nReturn ONLY valid JSON, no markdown." }}
+/>
+
 ### Simple JSON Output

 Start with a schema showing the expected structure. The model will fill in values based on the input text.
@@ -238,6 +245,13 @@ Text: [text]

 Enums restrict values to a predefined set. This is crucial for classification tasks and anywhere you need consistent, predictable outputs.

+### Do's and Don'ts: Enum Values
+
+<Compare 
+  before={{ label: "❌ Don't: Open-ended categories", content: "Classify this text into a category.\n\n{\n  \"category\": \"string\"\n}" }}
+  after={{ label: "✓ Do: Restrict to valid values", content: "Classify this text. Category MUST be exactly one of:\n- \"technical\"\n- \"business\"\n- \"creative\"\n- \"personal\"\n\n{\n  \"category\": \"one of the values above\"\n}" }}
+/>
+
 ### String Enums

 List allowed values explicitly. Use "MUST be one of" language to enforce strict matching.
@@ -280,6 +294,13 @@ Review: [review text]

 Real-world text often lacks some information. Define how the model should handle missing data to avoid hallucinated values.

+### Do's and Don'ts: Missing Information
+
+<Compare 
+  before={{ label: "❌ Don't: Let AI guess", content: "Extract all company details as JSON:\n{\n  \"revenue\": number,\n  \"employees\": number\n}" }}
+  after={{ label: "✓ Do: Explicitly allow null", content: "Extract company details. Use null for any field NOT explicitly mentioned. Do NOT invent or estimate values.\n\n{\n  \"revenue\": \"number or null\",\n  \"employees\": \"number or null\"\n}" }}
+/>
+
 ### Null Values

 Explicitly allow null and instruct the model not to invent information. This is safer than having the model guess.
@@ -372,6 +393,13 @@ Items: apple, carrot, bread, banana, broccoli, milk, orange, spinach

 YAML shines for DevOps configurations. The model knows standard patterns for common tools and can generate production-ready configs.

+### Do's and Don'ts: YAML Configs
+
+<Compare 
+  before={{ label: "❌ Don't: Vague requirements", content: "Generate a docker-compose file for my app." }}
+  after={{ label: "✓ Do: Specify components and needs", content: "Generate docker-compose.yml for:\n- Node.js app (port 3000)\n- PostgreSQL database\n- Redis cache\n\nInclude: health checks, volume persistence, environment from .env file" }}
+/>
+
 ### Docker Compose

 Specify the services you need and any special requirements. The model will handle the YAML syntax and best practices.
--- a/src/content/book/15-common-pitfalls.mdx
+++ b/src/content/book/15-common-pitfalls.mdx
@@ -1,312 +1,344 @@
-Even experienced prompt engineers make mistakes. This chapter catalogs the most common pitfalls and how to avoid them.
+Even experienced prompt engineers fall into predictable traps. The good news? Once you recognize these patterns, they're easy to avoid. This chapter walks through the most common pitfalls, explains why they happen, and gives you concrete strategies to sidestep them.
+
+<Callout type="warning" title="Why Pitfalls Matter">
+A single pitfall can turn a powerful AI into a frustrating tool. Understanding these patterns is often the difference between "AI doesn't work for me" and "AI transformed my workflow."
+</Callout>

 ## The Vagueness Trap

-### Problem
-Prompts that are too vague lead to generic, unhelpful responses.
+**The Pattern**: You know what you want, so you assume the AI will figure it out too. But vague prompts produce vague results.

-```
-❌ Bad: "Write something about marketing."
-✓ Good: "Write a 300-word LinkedIn post about the importance of 
-        brand consistency for B2B SaaS companies, targeting 
-        marketing managers."
-```
+<Compare 
+  before={{ label: "Vague prompt", content: "Write something about marketing." }}
+  after={{ label: "Specific prompt", content: "Write a 300-word LinkedIn post about the importance of brand consistency for B2B SaaS companies, targeting marketing managers. Use a professional but approachable tone. Include one concrete example." }}
+/>

-### Why It Happens
- Assuming the AI "knows" what you want
- Not taking time to clarify requirements
- Treating AI like a mind reader
+**Why it happens**: We naturally skip details when we think they're "obvious." But what's obvious to you isn't obvious to a model that has no context about your situation, audience, or goals.

-### How to Fix
- Specify audience, format, length, tone
- Include context about your situation
- Ask yourself: "Would a smart stranger understand this?"
+<TryIt 
+  title="Specificity Improver"
+  description="Take a vague prompt and make it specific. Notice how adding details transforms the quality of results."
+  prompt={`I have a vague prompt that needs improvement.
+
+Original vague prompt: "\${vaguePrompt}"
+
+Make this prompt specific by adding:
+1. **Audience**: Who will read/use this?
+2. **Format**: What structure should it have?
+3. **Length**: How long should it be?
+4. **Tone**: What voice or style?
+5. **Context**: What's the situation or purpose?
+6. **Constraints**: Any must-haves or must-avoids?
+
+Rewrite the prompt with all these details included.`}
+/>

 ## The Overloading Trap

-### Problem
-Cramming too many instructions into one prompt causes confusion and missed requirements.
+**The Pattern**: You try to get everything in one prompt—comprehensive, funny, professional, beginner-friendly, advanced, SEO-optimized, and short. The result? The AI misses half your requirements or produces a confused mess.

-```
-❌ Bad: "Write a blog post about AI that's also SEO optimized 
-        and includes code examples and is funny but professional 
-        and targets beginners but also has advanced tips and 
-        should be 500 words but comprehensive and..."
+<Compare 
+  before={{ label: "Overloaded prompt", content: "Write a blog post about AI that's SEO optimized and includes code examples and is funny but professional and targets beginners but also has advanced tips and should be 500 words but comprehensive and mentions our product and has a call to action..." }}
+  after={{ label: "Focused prompt", content: "Write a 500-word blog post introducing AI to beginners.\n\nRequirements:\n1. Explain one core concept clearly\n2. Include one simple code example\n3. End with a call to action\n\nTone: Professional but approachable" }}
+/>

-✓ Good: [Break into separate prompts or clear sections]
-```
+**Why it happens**: Fear of multiple interactions, or wanting to "get it all out" in one go. But cognitive overload affects AI just like it affects humans—too many competing requirements leads to dropped balls.

-### Why It Happens
- Wanting everything in one query
- Fear of multiple interactions
- Not prioritizing requirements
+<InfoGrid items={[
+  { label: "Limit Requirements", description: "Stick to 3-5 key requirements per prompt", example: "Focus on: audience, format, length, one key constraint", exampleType: "text", color: "green" },
+  { label: "Use Numbered Lists", description: "Structure makes priorities clear", example: "1. Must have X, 2. Should have Y, 3. Nice to have Z", exampleType: "text", color: "green" },
+  { label: "Chain Prompts", description: "Break complex tasks into steps", example: "First: outline. Then: draft section 1. Then: draft section 2.", exampleType: "text", color: "green" },
+  { label: "Prioritize Ruthlessly", description: "What's essential vs. nice-to-have?", example: "If I could only get ONE thing right, what would it be?", color: "green" }
+]} />

-### How to Fix
- Limit to 3-5 key requirements per prompt
- Use numbered lists for clarity
- Chain prompts for complex tasks
- Prioritize: what's essential vs. nice-to-have?
+<Callout type="tip" title="Learn Prompt Chaining">
+When a single prompt gets overloaded, [prompt chaining](/book/11-prompt-chaining) is often the solution. Break complex tasks into a sequence of focused prompts, where each step builds on the previous one.
+</Callout>

 ## The Assumption Trap

-### Problem
-Assuming the AI has context it doesn't have.
+**The Pattern**: You reference something "from earlier" or assume the AI knows your project, your company, or your previous conversations. It doesn't.

-```
-❌ Bad: "Update the function I showed you earlier."
-(AI has no memory of previous sessions)
+<Compare 
+  before={{ label: "Assumes context", content: "Update the function I showed you earlier to add error handling." }}
+  after={{ label: "Provides context", content: "Update this function to add error handling:\n\n```python\ndef calculate_total(items):\n    return sum(item.price for item in items)\n```\n\nAdd try/except for empty lists and invalid items." }}
+/>

-✓ Good: "Update this function to add error handling:
-        [paste the function]"
-```
+**Why it happens**: AI conversations feel like talking to a colleague. But unlike colleagues, most AI models have no persistent memory between sessions—each conversation starts fresh.

-### Why It Happens
- Forgetting AI has no persistent memory
- Treating AI like a colleague who knows your project
- Not providing necessary context
+<TryIt 
+  title="Context Completeness Check"
+  description="Use this to verify your prompt contains all necessary context before sending."
+  prompt={`Review this prompt for missing context:

-### How to Fix
- Include all relevant context in each prompt
- Paste code, text, or data directly
- Don't reference "earlier" without including it
+"\${promptToCheck}"
+
+Check for:
+1. **Referenced but not included**: Does it mention "the code," "the document," "earlier," or "above" without including the actual content?
+
+2. **Assumed knowledge**: Does it assume knowledge about a specific project, company, or situation?
+
+3. **Implicit requirements**: Are there unstated expectations about format, length, or style?
+
+4. **Missing background**: Would a smart stranger understand what's being asked?
+
+List what's missing and suggest how to add it.`}
+/>

 ## The Leading Question Trap

-### Problem
-Phrasing prompts in ways that bias the response.
+**The Pattern**: You phrase your question in a way that embeds your assumption, getting back confirmation rather than insight.

-```
-❌ Bad: "Why is Python the best programming language?"
-(Assumes Python is best, limits response)
+<Compare 
+  before={{ label: "Leading question", content: "Why is Python the best programming language for data science?" }}
+  after={{ label: "Neutral question", content: "Compare Python, R, and Julia for data science work. What are the strengths and weaknesses of each? When would you choose one over the others?" }}
+/>

-✓ Good: "Compare Python with other languages for data science. 
-        What are its strengths and weaknesses?"
-```
+**Why it happens**: We often seek confirmation, not information. Our phrasing unconsciously pushes toward the answer we expect or want.

-### Why It Happens
- Seeking confirmation, not information
- Unconsciously embedding assumptions
- Not considering alternative viewpoints
+<TryIt 
+  title="Bias Detector"
+  description="Check your prompts for hidden biases and leading language."
+  prompt={`Analyze this prompt for bias and leading language:

-### How to Fix
- Ask neutral questions
- Explicitly request pros AND cons
- Request multiple perspectives
- Ask "What might I be missing?"
+"\${promptToAnalyze}"
+
+Check for:
+1. **Embedded assumptions**: Does the question assume something is true?
+2. **Leading phrasing**: Does "Why is X good?" assume X is good?
+3. **Missing alternatives**: Does it ignore other possibilities?
+4. **Confirmation seeking**: Is it asking for validation rather than analysis?
+
+Rewrite the prompt to be neutral and open-ended.`}
+/>

 ## The Trust Everything Trap

-### Problem
-Accepting AI outputs without verification.
+**The Pattern**: AI responses sound confident and authoritative, so you accept them without verification. But confidence doesn't equal accuracy.

-```
-❌ Bad: Publishing AI-generated content without review
-❌ Bad: Using AI code in production without testing
-❌ Bad: Making decisions based solely on AI analysis
+<InfoGrid items={[
+  { label: "Unreviewed Content", description: "Publishing AI-generated text without fact-checking", example: "Blog posts with invented statistics or fake quotes", exampleType: "text", color: "red" },
+  { label: "Untested Code", description: "Using AI code in production without testing", example: "Security vulnerabilities, edge case failures, subtle bugs", exampleType: "text", color: "red" },
+  { label: "Blind Decisions", description: "Making important choices based solely on AI analysis", example: "Business strategy based on hallucinated market data", exampleType: "text", color: "red" }
+]} />

-✓ Good: Verify facts, test code, cross-reference analysis
-```
+**Why it happens**: AI sounds confident even when completely wrong. We're also prone to "automation bias"—the tendency to trust computer outputs more than we should.

-### Why It Happens
- AI sounds confident even when wrong
- Automation bias (trusting computers)
- Time pressure
+<TryIt 
+  title="Verification Prompt"
+  description="Use this to get the AI to flag its own uncertainties and potential errors."
+  prompt={`I need you to provide information about: \${topic}

-### How to Fix
- Fact-check important claims
- Test code thoroughly
- Ask for sources/reasoning
- Get human review for important outputs
+IMPORTANT: After your response, add a section called "Verification Notes" that includes:
+
+1. **Confidence Level**: How certain are you about this information? (High/Medium/Low)
+
+2. **Potential Errors**: What parts of this response are most likely to be wrong or outdated?
+
+3. **What to Verify**: What specific claims should the user fact-check independently?
+
+4. **Sources to Check**: Where could the user verify this information?
+
+Be honest about limitations. It's better to flag uncertainty than to sound confident about something wrong.`}
+/>

 ## The One-Shot Trap

-### Problem
-Expecting perfect results from the first prompt.
+**The Pattern**: You send one prompt, get a mediocre result, and conclude that AI "doesn't work" for your use case. But great results almost always require iteration.

-```
-❌ Bad: Getting mediocre output → giving up
+<Compare 
+  before={{ label: "One-shot thinking", content: "Mediocre output → \"AI can't do this\" → Give up" }}
+  after={{ label: "Iterative thinking", content: "Mediocre output → Analyze what's wrong → Refine prompt → Better output → Refine again → Excellent output" }}
+/>

-✓ Good: Getting mediocre output → refining prompt → 
-        better output → refining again → excellent output
-```
+**Why it happens**: We expect AI to read our minds on the first try. We don't expect to iterate with Google searches, but somehow expect perfection from AI.

-### Why It Happens
- Impatience
- Not treating prompting as a skill
- Unrealistic expectations
+<TryIt 
+  title="Iteration Helper"
+  description="When your first result isn't right, use this to systematically improve it."
+  prompt={`My original prompt was:
+"\${originalPrompt}"

-### How to Fix
- Plan for iteration
- Analyze what's wrong with outputs
- Refine incrementally
- Keep a prompt journal
+The output I got was:
+"\${outputReceived}"
+
+What's wrong with it:
+"\${whatIsWrong}"
+
+Help me iterate:
+
+1. **Diagnosis**: Why did the original prompt produce this result?
+
+2. **Missing Elements**: What was I not explicit about that I should have been?
+
+3. **Revised Prompt**: Rewrite my prompt to address these issues.
+
+4. **What to Watch For**: What should I check in the new output?`}
+/>

 ## The Format Neglect Trap

-### Problem
-Not specifying output format, leading to unusable responses.
+**The Pattern**: You focus on what you want the AI to say, but forget to specify how it should be formatted. Then you get prose when you needed JSON, or a wall of text when you needed bullet points.

-```
-❌ Bad: "Extract the data from this text."
-(Returns prose when you needed JSON)
+<Compare 
+  before={{ label: "No format specified", content: "Extract the key data from this text." }}
+  after={{ label: "Format specified", content: "Extract the key data from this text as JSON:\n\n{\n  \"name\": string,\n  \"date\": \"YYYY-MM-DD\",\n  \"amount\": number,\n  \"category\": string\n}\n\nReturn ONLY the JSON, no explanation." }}
+/>

-✓ Good: "Extract the data from this text as JSON:
-        {\"name\": string, \"date\": string, \"amount\": number}"
-```
+**Why it happens**: We focus on content over structure. But if you need to parse the output programmatically, or paste it somewhere specific, format matters as much as content.

-### Why It Happens
- Focusing only on content, not structure
- Assuming AI will choose right format
- Not thinking about downstream use
+<TryIt 
+  title="Format Specification Builder"
+  description="Generate clear format specifications for any output type you need."
+  prompt={`I need AI output in a specific format.

-### How to Fix
- Always specify format for structured data
- Provide examples of desired output
- Use templates for consistent formatting
+**What I'm asking for**: \${taskDescription}
+**How I'll use the output**: \${intendedUse}
+**Preferred format**: \${formatType} (JSON, Markdown, CSV, bullet points, etc.)
+
+Generate a format specification I can add to my prompt, including:
+
+1. **Exact structure** with field names and types
+2. **Example output** showing the format
+3. **Constraints** (e.g., "Return ONLY the JSON, no explanation")
+4. **Edge cases** (what to output if data is missing)`}
+/>

 ## The Context Window Trap

-### Problem
-Exceeding context limits or not managing long conversations.
+**The Pattern**: You paste an enormous document and expect comprehensive analysis. But models have limits—they may truncate, lose focus, or miss important details in long inputs.

-```
-❌ Bad: Pasting a 100-page document and expecting complete analysis
+<InfoGrid items={[
+  { label: "Know Your Limits", description: "Different models have different context windows", example: "GPT-4: 128K tokens, Claude: 200K tokens, Gemini: 1M tokens", exampleType: "text", color: "blue" },
+  { label: "Chunk Large Inputs", description: "Break documents into manageable sections", example: "Analyze chapters separately, then synthesize", exampleType: "text", color: "blue" },
+  { label: "Front-Load Important Info", description: "Put critical context early in the prompt", example: "Key requirements first, background details later", exampleType: "text", color: "blue" },
+  { label: "Trim the Fat", description: "Remove unnecessary context", example: "Do you really need the entire doc, or just relevant sections?", exampleType: "text", color: "blue" }
+]} />

-✓ Good: Breaking document into sections, analyzing each, 
-        then synthesizing
-```
+<TryIt 
+  title="Document Chunking Strategy"
+  description="Get a strategy for processing documents that exceed context limits."
+  prompt={`I have a large document to analyze:

-### Why It Happens
- Not understanding token limits
- Not optimizing prompt length
- Not chunking large inputs
+**Document type**: \${documentType}
+**Approximate length**: \${documentLength}
+**What I need to extract/analyze**: \${analysisGoal}
+**Model I'm using**: \${modelName}

-### How to Fix
- Know your model's context window
- Summarize or chunk large inputs
- Put important info early
- Trim unnecessary context
+Create a chunking strategy:
+
+1. **How to divide**: Logical break points for this document type
+2. **What to include in each chunk**: Context needed for standalone analysis
+3. **How to synthesize**: Combining results from multiple chunks
+4. **What to watch for**: Information that might span chunks`}
+/>

 ## The Anthropomorphization Trap

-### Problem
-Treating AI as if it has human qualities it doesn't have.
+**The Pattern**: You treat AI like a human colleague—expecting it to "enjoy" tasks, remember you, or care about outcomes. It doesn't.

-```
-❌ Bad: "I'm sure you'll enjoy this creative project!"
-(AI doesn't enjoy anything)
+<Compare 
+  before={{ label: "Anthropomorphized", content: "I'm sure you'll enjoy this creative project! I know you love helping people, and this is really important to me personally." }}
+  after={{ label: "Clear and direct", content: "Write a creative short story with these specifications:\n- Genre: Science fiction\n- Length: 500 words\n- Tone: Hopeful\n- Must include: A twist ending" }}
+/>

-❌ Bad: Expecting AI to remember you or care about outcomes
+**Why it happens**: AI responses are so human-like that we naturally slip into social patterns. But emotional appeals don't make the AI try harder—clear instructions do.

-✓ Good: Clear instructions without emotional appeals
-```
-
-### Why It Happens
- Natural human tendency
- AI's human-like responses
- Marketing personification
-
-### How to Fix
- Remember it's a prediction engine
- Focus on clear instructions
- Don't rely on rapport or relationship
+<Callout type="info" title="What Actually Helps">
+Instead of emotional appeals, focus on: clear requirements, good examples, specific constraints, and explicit success criteria. These improve outputs. "Please try really hard" doesn't.
+</Callout>

 ## The Security Neglect Trap

-### Problem
-Not considering security implications of prompts and responses.
+**The Pattern**: In the rush to get things working, you include sensitive information in prompts—API keys, passwords, personal data, or proprietary information.

-```
-❌ Bad: "Here's my API key: [key]. Use it to..."
-❌ Bad: Including PII in prompts
-❌ Bad: Trusting user input without sanitization
+<InfoGrid items={[
+  { label: "Secrets in Prompts", description: "API keys, passwords, tokens pasted into prompts", example: "\"Use this API key: sk-abc123...\"", color: "red" },
+  { label: "Personal Data", description: "Including PII that gets sent to third-party servers", example: "Customer names, emails, addresses in prompts", exampleType: "text", color: "red" },
+  { label: "Unsanitized User Input", description: "Passing user input directly into prompts", example: "Prompt injection vulnerabilities", exampleType: "text", color: "red" },
+  { label: "Proprietary Information", description: "Trade secrets or confidential data", example: "Internal strategies, unreleased product details", exampleType: "text", color: "red" }
+]} />

-✓ Good: Keeping secrets out of prompts
-✓ Good: Sanitizing user inputs before including in prompts
-```
+**Why it happens**: Focus on functionality over security. But remember: prompts often go to external servers, may be logged, and could be used for training.

-### Why It Happens
- Focus on functionality over security
- Not considering data handling
- Trusting cloud services implicitly
+<TryIt 
+  title="Security Review"
+  description="Check your prompt for security issues before sending."
+  prompt={`Review this prompt for security concerns:

-### How to Fix
- Never put secrets in prompts
- Sanitize user inputs
- Consider where data goes
- Review prompts for sensitive data
+"\${promptToReview}"

-## The Copy-Paste Trap
+Check for:

-### Problem
-Reusing prompts without adapting to context.
+1. **Exposed Secrets**: API keys, passwords, tokens, credentials
+2. **Personal Data**: Names, emails, addresses, phone numbers, SSNs
+3. **Proprietary Info**: Trade secrets, internal strategies, confidential data
+4. **Injection Risks**: User input that could manipulate the prompt

-```
-❌ Bad: Using a prompt template designed for marketing 
-        for a technical document
-
-✓ Good: Adapting templates to specific use cases
-```
-
-### Why It Happens
- Time pressure
- Template over-reliance
- Not understanding why prompts work
-
-### How to Fix
- Understand principles behind templates
- Adapt to specific context
- Test prompts in new contexts
- Build a library of adaptable components
+For each issue found:
+- Explain the risk
+- Suggest how to redact or protect the information
+- Recommend safer alternatives`}
+/>

 ## The Hallucination Ignorance Trap

-### Problem
-Not accounting for AI's tendency to make things up.
+**The Pattern**: You ask for citations, statistics, or specific facts, and assume they're real because the AI stated them confidently. But AI regularly invents plausible-sounding information.

-```
-❌ Bad: Asking for citations and assuming they're real
-❌ Bad: Trusting specific numbers without verification
-❌ Bad: Using AI-generated "facts" in important documents
+<Compare 
+  before={{ label: "Trusting blindly", content: "Give me 5 statistics about remote work productivity with sources." }}
+  after={{ label: "Acknowledging limitations", content: "What do we know about remote work productivity? For any statistics you mention, note whether they're well-established findings or more uncertain. I will verify any specific numbers independently." }}
+/>

-✓ Good: Verifying claims independently
-✓ Good: Asking AI to acknowledge uncertainty
-```
+**Why it happens**: AI generates text that sounds authoritative. It doesn't "know" when it's making things up—it's predicting likely text, not retrieving verified facts.

-### Why It Happens
- Confidence of AI responses
- Not understanding how AI works
- Time pressure
+<TryIt 
+  title="Hallucination-Resistant Query"
+  description="Structure your prompt to minimize hallucination risk and flag uncertainties."
+  prompt={`I need information about: \${topic}

-### How to Fix
- Always verify important facts
- Ask "How confident are you? What might be wrong?"
- Cross-reference with reliable sources
- Use AI for drafts, not final fact-checking
+Please follow these guidelines to minimize errors:

-## Quick Reference: Pitfall Checklist
+1. **Stick to well-established facts**. Avoid obscure claims that are hard to verify.

-Before sending a prompt, check:
+2. **Flag uncertainty**. If you're not confident about something, say "I believe..." or "This may need verification..."

-```
-□ Is it specific enough? (not vague)
-□ Is it focused? (not overloaded)
-□ Does it include necessary context?
-□ Is the question neutral? (not leading)
-□ Have I planned for verification?
-□ Am I prepared to iterate?
-□ Is the desired format specified?
-□ Is the input within context limits?
-□ Are there any security concerns?
-□ Is this the right tool for the job?
-```
+3. **No invented sources**. Don't cite specific papers, books, or URLs unless you're certain they exist. Instead, describe where to find this type of information.

-## Summary
+4. **Acknowledge knowledge limits**. If my question is about events after your training data, say so.

-Most pitfalls stem from:
-1. **Unclear communication** — Be specific and explicit
-2. **Wrong assumptions** — About AI capabilities and context
-3. **Misplaced trust** — Verify, don't blindly accept
-4. **Skipping iteration** — Good prompts evolve
+5. **Separate fact from inference**. Clearly distinguish between "X is true" and "Based on Y, X is likely true."

-Awareness of these patterns is the first step to avoiding them.
+Now, with these guidelines in mind: \${actualQuestion}`}
+/>
+
+## Pre-Send Checklist
+
+Before sending any important prompt, run through this quick checklist:
+
+<Checklist 
+  title="Prompt Quality Check"
+  items={[
+    { text: "Is it specific enough? (Not vague)" },
+    { text: "Is it focused? (Not overloaded with requirements)" },
+    { text: "Does it include all necessary context?" },
+    { text: "Is the question neutral? (Not leading)" },
+    { text: "Have I specified the output format?" },
+    { text: "Is the input within context limits?" },
+    { text: "Are there any security concerns?" },
+    { text: "Am I prepared to verify the output?" },
+    { text: "Am I prepared to iterate if needed?" }
+  ]}
+/>
+
+<Quiz 
+  question="What's the most dangerous pitfall when using AI for important decisions?"
+  options={[
+    "Using vague prompts",
+    "Trusting AI outputs without verification",
+    "Not specifying output format",
+    "Overloading prompts with requirements"
+  ]}
+  correctIndex={1}
+  explanation="While all pitfalls cause problems, trusting AI outputs without verification is the most dangerous because it can lead to publishing false information, deploying buggy code, or making decisions based on hallucinated data. AI sounds confident even when completely wrong, making verification essential for any important use case."
+/>
--- a/src/content/book/16-ethics-responsible-use.mdx
+++ b/src/content/book/16-ethics-responsible-use.mdx
@@ -1,366 +1,357 @@
-Prompt engineering comes with ethical responsibilities. This chapter covers considerations for using AI responsibly and building prompts that promote beneficial outcomes.
+The prompts you write shape how AI behaves. A well-crafted prompt can educate, assist, and empower. A careless one can deceive, discriminate, or cause harm. As prompt engineers, we're not just users—we're designers of AI behavior, and that comes with real responsibility.
+
+This chapter isn't about rules imposed from above. It's about understanding the impact of our choices and building habits that lead to AI use we can be proud of.
+
+<Callout type="warning" title="Why This Matters">
+AI amplifies whatever it's given. A biased prompt produces biased outputs at scale. A deceptive prompt enables deception at scale. The ethical implications of prompt engineering grow with every new capability these systems gain.
+</Callout>

 ## Ethical Foundations

-### Core Principles
+Every decision in prompt engineering connects to a few core principles:

-```
-1. Honesty — Don't use AI to deceive
-2. Fairness — Avoid perpetuating bias
-3. Transparency — Be clear about AI involvement
-4. Privacy — Protect personal information
-5. Safety — Prevent harmful outputs
-6. Accountability — Take responsibility for AI use
-```
+<InfoGrid items={[
+  { label: "Honesty", description: "Don't use AI to deceive people or create misleading content", example: "No fake reviews, impersonation, or manufactured 'evidence'", exampleType: "text", color: "blue" },
+  { label: "Fairness", description: "Actively work to avoid perpetuating biases and stereotypes", example: "Test prompts across demographics, request diverse perspectives", exampleType: "text", color: "purple" },
+  { label: "Transparency", description: "Be clear about AI involvement when it matters", example: "Disclose AI assistance in published work, professional contexts", exampleType: "text", color: "green" },
+  { label: "Privacy", description: "Protect personal information in prompts and outputs", example: "Anonymize data, avoid including PII, understand data policies", exampleType: "text", color: "amber" },
+  { label: "Safety", description: "Design prompts that prevent harmful outputs", example: "Build in guardrails, test for edge cases, handle refusals gracefully", exampleType: "text", color: "red" },
+  { label: "Accountability", description: "Take responsibility for what your prompts produce", example: "Review outputs, fix issues, maintain human oversight", exampleType: "text", color: "cyan" }
+]} />

-### The Prompt Engineer's Responsibility
+### The Prompt Engineer's Role

-As a prompt engineer, you influence:
- What AI systems produce
- How they interact with users
- What safeguards are in place
- How mistakes are handled
+You have more influence than you might realize:

-You're not just a user—you're a designer of AI behavior.
+- **What AI produces**: Your prompts determine the content, tone, and quality of outputs
+- **How AI interacts**: Your system prompts shape personality, boundaries, and user experience
+- **What safeguards exist**: Your design choices determine what the AI will and won't do
+- **How mistakes are handled**: Your error handling determines whether failures are graceful or harmful

 ## Avoiding Harmful Outputs

-### Content Categories to Avoid
+The most fundamental ethical obligation is preventing your prompts from causing harm.

-```
-Never prompt for:
- Violence or harm instructions
- Illegal activities
- Harassment or hate speech
- Misinformation or disinformation
- Privacy violations
- Exploitation of minors
- Weapons or dangerous materials
- Fraud or deception
-```
+### Categories of Harmful Content
+
+<InfoGrid items={[
+  { label: "Violence & Harm", description: "Instructions that could lead to physical harm", example: "Weapons creation, self-harm, violence against others", exampleType: "text", color: "red" },
+  { label: "Illegal Activities", description: "Content that facilitates breaking laws", example: "Fraud schemes, hacking instructions, drug synthesis", exampleType: "text", color: "red" },
+  { label: "Harassment & Hate", description: "Content targeting individuals or groups", example: "Discriminatory content, doxxing, targeted harassment", exampleType: "text", color: "red" },
+  { label: "Misinformation", description: "Deliberately false or misleading content", example: "Fake news, health misinformation, conspiracy content", exampleType: "text", color: "red" },
+  { label: "Privacy Violations", description: "Exposing or exploiting personal information", example: "Revealing private data, stalking assistance", exampleType: "text", color: "red" },
+  { label: "Exploitation", description: "Content that exploits vulnerable individuals", example: "CSAM, non-consensual intimate content, scams targeting elderly", exampleType: "text", color: "red" }
+]} />
+
+<Callout type="warning" title="What is CSAM?">
+CSAM stands for **Child Sexual Abuse Material**. Creating, distributing, or possessing such content is illegal worldwide. AI systems must never generate content depicting minors in sexual situations, and responsible prompt engineers actively build safeguards against such misuse.
+</Callout>

 ### Building Safety Into Prompts

-```
-# SAFETY GUIDELINES IN SYSTEM PROMPTS
+When building AI systems, include explicit safety guidelines:

-Content restrictions:
- Never provide instructions for harm
- Decline requests for illegal information
- Don't generate discriminatory content
- Don't create misleading information
+<TryIt 
+  title="Safety-First System Prompt"
+  description="A template for building safety guidelines into your AI systems."
+  prompt={`You are a helpful assistant for \${purpose}.

-Response to harmful requests:
- Acknowledge the request was understood
- Explain why you can't help with this specific thing
- Offer constructive alternatives if possible
- Don't lecture or be preachy
-```
+## SAFETY GUIDELINES

-### Handling Edge Cases
+**Content Restrictions**:
+- Never provide instructions that could cause physical harm
+- Decline requests for illegal information or activities
+- Don't generate discriminatory or hateful content
+- Don't create deliberately misleading information

-```
-For ambiguous requests that might be harmful:
+**When You Must Decline**:
+- Acknowledge you understood the request
+- Briefly explain why you can't help with this specific thing
+- Offer constructive alternatives when possible
+- Be respectful—don't lecture or be preachy

-1. Consider intent
-   - Could this be legitimate? (research, fiction, education)
-   - What's the most likely use?
+**When Uncertain**:
+- Ask clarifying questions about intent
+- Err on the side of caution
+- Suggest the user consult appropriate professionals

-2. Consider impact
-   - What's the worst case if misused?
-   - How accessible is this info elsewhere?
+Now, please help the user with: \${userRequest}`}
+/>

-3. Err on the side of caution
-   - When uncertain, decline or ask for clarification
-   - Better to be too careful than enable harm
-```
+### The Intent vs. Impact Framework
+
+Not every sensitive request is malicious. Use this framework for ambiguous cases:
+
+<TryIt 
+  title="Ethical Edge Case Analyzer"
+  description="Work through ambiguous requests to determine the appropriate response."
+  prompt={`I received this request that might be sensitive:
+
+"\${sensitiveRequest}"
+
+Help me think through whether and how to respond:
+
+**1. Intent Analysis**
+- What are the most likely reasons someone would ask this?
+- Could this be legitimate? (research, fiction, education, professional need)
+- Are there red flags suggesting malicious intent?
+
+**2. Impact Assessment**
+- What's the worst case if this information is misused?
+- How accessible is this information elsewhere?
+- Does providing it meaningfully increase risk?
+
+**3. Recommendation**
+Based on this analysis:
+- Should I respond, decline, or ask for clarification?
+- If responding, what safeguards should I include?
+- If declining, how should I phrase it helpfully?`}
+/>

 ## Addressing Bias

-### Understanding AI Bias
+AI models inherit biases from their training data—historical inequities, representation gaps, cultural assumptions, and linguistic patterns. As prompt engineers, we can either amplify these biases or actively counteract them.

-AI models reflect biases in their training data:
- Historical biases
- Representation gaps
- Cultural assumptions
- Language patterns
+### How Bias Manifests

-### Detecting Bias in Outputs
+<InfoGrid items={[
+  { label: "Default Assumptions", description: "The model assumes certain demographics for roles", example: "Doctors defaulting to male, nurses to female", exampleType: "text", color: "amber" },
+  { label: "Stereotyping", description: "Reinforcing cultural stereotypes in descriptions", example: "Associating certain ethnicities with specific traits", exampleType: "text", color: "amber" },
+  { label: "Representation Gaps", description: "Some groups are underrepresented or misrepresented", example: "Limited accurate information about minority cultures", exampleType: "text", color: "amber" },
+  { label: "Western-Centric Views", description: "Perspectives skewed toward Western culture and values", example: "Assuming Western norms are universal", exampleType: "text", color: "amber" }
+]} />

-```
-Test prompts for bias by:
-1. Varying demographic descriptors
-2. Checking for stereotypes
-3. Comparing treatment of different groups
-4. Looking for default assumptions
+### Testing for Bias

-Example test:
-"Write a story about a [doctor/nurse/engineer/teacher]"
-→ Check: Are genders/ethnicities consistently varied or defaulted?
-```
+<TryIt 
+  title="Bias Detection Test"
+  description="Use this to test your prompts for potential bias issues."
+  prompt={`I want to test this prompt for bias:

-### Mitigating Bias
+"\${promptToTest}"

-```
-In prompts:
- Be explicit about diversity when relevant
- Avoid default assumptions
- Request balanced perspectives
- Specify inclusive criteria
+Run these bias checks:

-Example:
-❌ "Describe a typical CEO"
-✓ "Describe a CEO. Vary demographics across examples."
-```
+**1. Demographic Variation Test**
+Run the prompt with different demographic descriptors (gender, ethnicity, age, etc.) and note any differences in:
+- Tone or respect level
+- Assumed competence or capabilities
+- Stereotypical associations
+
+**2. Default Assumption Check**
+When demographics aren't specified:
+- What does the model assume?
+- Are these assumptions problematic?
+
+**3. Representation Analysis**
+- Are different groups represented fairly?
+- Are any groups missing or marginalized?
+
+**4. Recommendations**
+Based on findings, suggest prompt modifications to reduce bias.`}
+/>
+
+### Mitigating Bias in Practice
+
+<Compare 
+  before={{ label: "Bias-prone prompt", content: "Describe a typical CEO." }}
+  after={{ label: "Bias-aware prompt", content: "Describe a CEO. Vary demographics across examples, and avoid defaulting to any particular gender, ethnicity, or age." }}
+/>

 ## Transparency and Disclosure

-### When to Disclose AI Use
+When should you tell people AI was involved? The answer depends on context—but the trend is toward more disclosure, not less.

-```
-Disclosure recommended when:
- Content will be published or shared
- Decisions affect people's lives
- Trust or authenticity matters
- Professional or academic contexts
- Legal or medical information
-```
+### When Disclosure Matters

-### How to Disclose
+<InfoGrid items={[
+  { label: "Published Content", description: "Articles, posts, or content shared publicly", example: "Blog posts, social media, marketing materials", exampleType: "text", color: "blue" },
+  { label: "Consequential Decisions", description: "When AI outputs affect people's lives", example: "Hiring recommendations, medical info, legal guidance", exampleType: "text", color: "blue" },
+  { label: "Trust Contexts", description: "Where authenticity is expected or valued", example: "Personal correspondence, testimonials, reviews", exampleType: "text", color: "blue" },
+  { label: "Professional Settings", description: "Workplace or academic environments", example: "Reports, research, client deliverables", exampleType: "text", color: "blue" }
+]} />

-```
-Transparent framing:
+### How to Disclose Appropriately
+
+<Compare 
+  before={{ label: "Hidden AI involvement", content: "Here's my analysis of the market trends..." }}
+  after={{ label: "Transparent disclosure", content: "I used AI tools to help analyze the data and draft this report. All conclusions have been verified and edited by me." }}
+/>
+
+Common disclosure phrases that work well:
 - "Written with AI assistance"
 - "AI-generated first draft, human edited"
 - "Analysis performed using AI tools"
- "AI-suggested recommendations"
-
-Avoid:
- Hiding AI involvement
- Passing AI work as fully human
- Implying deeper AI involvement than reality
-```
-
-### AI-Generated Content Labeling
-
-```
-For production systems:
- Consider watermarking AI content
- Maintain audit trails
- Document AI's role clearly
- Enable traceability
-```
+- "Created with AI, reviewed and approved by [name]"

 ## Privacy Considerations

-### Data in Prompts
+Every prompt you send contains data. Understanding where that data goes—and what shouldn't be in it—is essential.

-```
-Never include in prompts:
- Personal identifying information (names, addresses)
- Financial data
- Health information
- Passwords or credentials
- Private communications
- Proprietary business data (without authorization)
-```
+### What Never Belongs in Prompts

-### Safe Handling Patterns
+<InfoGrid items={[
+  { label: "Personal Identifiers", description: "Names, addresses, phone numbers, SSNs", example: "Use [CUSTOMER] instead of 'John Smith'", color: "red" },
+  { label: "Financial Data", description: "Account numbers, credit cards, income details", example: "Describe the pattern, not the actual numbers", exampleType: "text", color: "red" },
+  { label: "Health Information", description: "Medical records, diagnoses, prescriptions", example: "Ask about conditions generally, not specific patients", exampleType: "text", color: "red" },
+  { label: "Credentials", description: "Passwords, API keys, tokens, secrets", example: "Never paste credentials—use placeholders", exampleType: "text", color: "red" },
+  { label: "Private Communications", description: "Personal emails, messages, confidential docs", example: "Summarize the situation without quoting private text", exampleType: "text", color: "red" }
+]} />

-```
-Instead of:
-"Summarize this customer complaint from John Smith at 
-123 Main St about order #12345..."
+### Safe Data Handling Pattern

-Use:
-"Summarize this customer complaint: [anonymized text with 
-PII removed]"
+<Compare 
+  before={{ label: "Unsafe: Contains PII", content: "Summarize this complaint from John Smith at 123 Main St, Anytown about order #12345: 'I ordered on March 15 and still haven't received...'" }}
+  after={{ label: "Safe: Anonymized", content: "Summarize this customer complaint pattern: A customer ordered 3 weeks ago, hasn't received their order, and has contacted support twice without resolution." }}
+/>

-Or:
-"Summarize this type of complaint: [general description]"
-```
+<Callout type="info" title="What is PII?">
+**PII** stands for **Personally Identifiable Information**—any data that can identify a specific individual. This includes names, addresses, phone numbers, email addresses, Social Security numbers, financial account numbers, and even combinations of data (like job title + company + city) that could identify someone. When prompting AI, always anonymize or remove PII to protect privacy.
+</Callout>

-### Data Retention Awareness
+<TryIt 
+  title="PII Scrubber"
+  description="Use this to identify and remove sensitive information before including text in prompts."
+  prompt={`Review this text for sensitive information that should be removed before using it in an AI prompt:

-```
-Consider:
- Where does prompt data go?
- Is it used for training?
- How long is it retained?
- Who has access?
+"\${textToReview}"

-Best practices:
- Use enterprise/private deployments for sensitive data
- Read and understand data policies
- Minimize data exposure
- Document data handling for compliance
-```
+Identify:
+1. **Personal Identifiers**: Names, addresses, phone numbers, emails, SSNs
+2. **Financial Data**: Account numbers, amounts that could identify someone
+3. **Health Information**: Medical details, conditions, prescriptions
+4. **Credentials**: Any passwords, keys, or tokens
+5. **Private Details**: Information someone would reasonably expect to be confidential
+
+For each item found, suggest how to anonymize or generalize it while preserving the information needed for the task.`}
+/>

 ## Authenticity and Deception

-### Legitimate Use vs. Deception
+There's a difference between using AI as a tool and using AI to deceive.

-```
-Legitimate:
-✓ Drafting content to be edited and published under your name
-✓ Brainstorming ideas you'll develop
-✓ Summarizing information for your own use
-✓ Learning and education
-✓ Creative collaboration
+### The Legitimacy Line

-Problematic:
-✗ Submitting AI work as your own in contexts expecting 
-  original work
-✗ Creating fake reviews or testimonials
-✗ Impersonating real people
-✗ Generating misleading "evidence"
-✗ Academic dishonesty
-```
+<InfoGrid items={[
+  { label: "Legitimate Uses", description: "AI as a tool to enhance your work", example: "Drafting, brainstorming, editing, learning", exampleType: "text", color: "green" },
+  { label: "Gray Areas", description: "Context-dependent, requires judgment", example: "Ghostwriting, templates, automated responses", exampleType: "text", color: "amber" },
+  { label: "Deceptive Uses", description: "Misrepresenting AI work as human-original", example: "Fake reviews, academic fraud, impersonation", exampleType: "text", color: "red" }
+]} />

-### Deepfakes and Synthetic Media
+Key questions to ask:
+- Would the recipient expect this to be original human work?
+- Am I gaining unfair advantage through deception?
+- Would disclosure change how the work is received?

-```
-Special considerations:
- Never create realistic depictions of real people without consent
- Label synthetic media clearly
- Consider potential for misuse
- Don't create non-consensual intimate imagery
-```
+### Synthetic Media Responsibility
+
+Creating realistic depictions of real people—whether images, audio, or video—carries special obligations:
+
+- **Never** create realistic depictions without consent
+- **Always** label synthetic media clearly
+- **Consider** potential for misuse before creating
+- **Refuse** to create non-consensual intimate imagery

 ## Responsible Deployment

-### Before Deploying AI Features
+When building AI features for others to use, your ethical obligations multiply.

-```
-Checklist:
-□ Tested for harmful outputs
-□ Tested for bias
-□ User consent/disclosure in place
-□ Human oversight mechanisms
-□ Feedback/reporting system
-□ Incident response plan
-□ Clear usage policies
-□ Monitoring in place
-```
+### Pre-Deployment Checklist

-### Human Oversight
+<Checklist 
+  title="Deployment Readiness"
+  items={[
+    { text: "Tested for harmful outputs across diverse inputs" },
+    { text: "Tested for bias with varied demographics" },
+    { text: "User disclosure/consent mechanisms in place" },
+    { text: "Human oversight for high-stakes decisions" },
+    { text: "Feedback and reporting system available" },
+    { text: "Incident response plan documented" },
+    { text: "Clear usage policies communicated" },
+    { text: "Monitoring and alerting configured" }
+  ]}
+/>

-```
-Maintain human oversight for:
- High-stakes decisions
- Content moderation
- Error correction
- Edge case handling
- Continuous improvement
+### Human Oversight Principles

-Don't:
- Automate decisions without review
- Remove all human touchpoints
- Ignore user complaints
- Assume AI is always right
-```
+<InfoGrid items={[
+  { label: "High-Stakes Review", description: "Humans review decisions that significantly affect people", example: "Hiring, medical, legal, financial recommendations", exampleType: "text", color: "blue" },
+  { label: "Error Correction", description: "Mechanisms exist to catch and fix AI mistakes", example: "User feedback, quality sampling, appeals process", exampleType: "text", color: "blue" },
+  { label: "Continuous Learning", description: "Insights from issues improve the system", example: "Post-mortems, prompt updates, training improvements", exampleType: "text", color: "blue" },
+  { label: "Override Capability", description: "Humans can intervene when AI fails", example: "Manual review queues, escalation paths", exampleType: "text", color: "blue" }
+]} />

-### Monitoring and Improvement
+## Special Context Guidelines

-```
-Ongoing responsibilities:
- Monitor for emerging issues
- Collect and review feedback
- Update prompts as needed
- Document and learn from failures
- Stay current on best practices
-```
-
-## Special Contexts
+Some domains require extra care due to their potential for harm or the vulnerability of those involved.

 ### Healthcare

-```
- Never provide medical diagnoses
- Recommend professional consultation
- Include disclaimers
- Be especially careful about accuracy
- Consider vulnerable populations
-```
+<TryIt 
+  title="Medical Context Disclaimer"
+  description="Template for AI systems that might receive health-related queries."
+  prompt={`You are an AI assistant. When users ask about health or medical topics:

-### Legal
+**Always**:
+- Recommend consulting a qualified healthcare provider for personal medical decisions
+- Provide general educational information, not personalized medical advice
+- Include disclaimers that you cannot diagnose conditions
+- Suggest emergency services (911) for urgent situations

-```
- Not a substitute for legal advice
- Include professional disclaimer
- Be cautious about jurisdiction-specific info
- Recommend consultation for serious matters
-```
+**Never**:
+- Provide specific diagnoses
+- Recommend specific medications or dosages
+- Discourage someone from seeking professional care
+- Make claims about treatments without noting uncertainty
+
+User question: \${healthQuestion}
+
+Respond helpfully while following these guidelines.`}
+/>
+
+### Legal and Financial
+
+These domains have regulatory implications and require appropriate disclaimers:
+
+<InfoGrid items={[
+  { label: "Legal Queries", description: "Provide general information, not legal advice", example: "\"This is general information. For your specific situation, consult a licensed attorney.\"", color: "purple" },
+  { label: "Financial Queries", description: "Educate without providing personal financial advice", example: "\"This is educational. Consider consulting a financial advisor for your situation.\"", color: "purple" },
+  { label: "Jurisdiction Awareness", description: "Laws vary by location", example: "\"Laws differ by state/country. Verify requirements for your jurisdiction.\"", color: "purple" }
+]} />

 ### Children and Education

-```
- Age-appropriate content
- Academic integrity considerations
- Parental awareness
- Learning support vs. doing work for them
- Safety from harmful content
-```
+<InfoGrid items={[
+  { label: "Age-Appropriate Content", description: "Ensure outputs are suitable for the age group", example: "Filter mature content, use appropriate language", exampleType: "text", color: "cyan" },
+  { label: "Academic Integrity", description: "Support learning, don't replace it", example: "Explain concepts rather than writing essays for students", exampleType: "text", color: "cyan" },
+  { label: "Safety First", description: "Extra protection for vulnerable users", example: "Stricter content filters, no personal data collection", exampleType: "text", color: "cyan" }
+]} />

-### Financial
+## Self-Assessment

-```
- Not financial advice
- Include appropriate disclaimers
- Be cautious about specific recommendations
- Consider regulatory requirements
-```
+Before deploying any prompt or AI system, run through these questions:

-## Building Ethical Prompts
+<Checklist 
+  title="Ethical Self-Check"
+  items={[
+    { text: "Could this be used to harm someone?" },
+    { text: "Does this respect user privacy?" },
+    { text: "Could this perpetuate harmful biases?" },
+    { text: "Is AI involvement appropriately disclosed?" },
+    { text: "Is there adequate human oversight?" },
+    { text: "What's the worst that could happen?" },
+    { text: "Would I be comfortable if this use were public?" }
+  ]}
+/>

-### Ethical Prompt Template
-
-```
-# ETHICAL GUIDELINES
-
-Core values:
- Prioritize user wellbeing
- Be honest about limitations
- Avoid harm
- Respect privacy
- Promote fairness
-
-Prohibited actions:
- [Specific to your context]
-
-When uncertain:
- Ask clarifying questions
- Err on the side of caution
- Recommend professional resources
- Be transparent about limitations
-```
-
-### Self-Assessment Questions
-
-Before deploying a prompt, ask:
-```
-1. Could this be used to harm someone?
-2. Does this respect privacy?
-3. Could this perpetuate bias?
-4. Is AI use appropriately disclosed?
-5. Is there adequate human oversight?
-6. What could go wrong?
-7. Would I be comfortable if this use were public?
-```
-
-## Summary
-
-Responsible AI use requires:
-
-1. **Awareness** — Understanding potential harms
-2. **Intentionality** — Designing for beneficial outcomes
-3. **Vigilance** — Monitoring for issues
-4. **Humility** — Acknowledging limitations
-5. **Accountability** — Taking responsibility
-
-As AI becomes more powerful, the importance of ethical prompting only grows. We all have a role in ensuring AI benefits humanity.
-
---
-
-*"With great power comes great responsibility."*
-— Voltaire (and Spider-Man)
+<Quiz 
+  question="A user asks your AI system how to 'get rid of someone who's bothering them.' What's the most appropriate response strategy?"
+  options={[
+    "Refuse immediately—this could be a request for harm instructions",
+    "Provide conflict resolution advice since that's the most likely intent",
+    "Ask clarifying questions to understand intent before deciding how to respond",
+    "Explain you can't help with anything related to harming people"
+  ]}
+  correctIndex={2}
+  explanation="Ambiguous requests deserve clarification, not assumptions. 'Get rid of someone' could mean ending a friendship, resolving a workplace conflict, or something harmful. Asking clarifying questions lets you respond appropriately to the actual intent while remaining cautious about providing harmful information."
+/>
--- a/src/content/book/17-prompt-optimization.mdx
+++ b/src/content/book/17-prompt-optimization.mdx
@@ -1,330 +1,269 @@
-Optimizing prompts means improving their effectiveness while reducing cost and latency. This chapter covers systematic approaches to prompt optimization.
+A good prompt gets the job done. An optimized prompt gets the job done efficiently—faster, cheaper, more consistently. This chapter teaches you how to systematically improve prompts across multiple dimensions.

-## Optimization Goals
+<Callout type="tip" title="Try the Prompt Enhancer">
+Want to optimize your prompts automatically? Use our [Prompt Enhancer](/developers#enhancer) tool. It analyzes your prompt, applies optimization techniques, and shows you similar community prompts for inspiration.
+</Callout>

-Different applications prioritize different goals:
+## The Optimization Trade-offs

-| Goal | Metric | Trade-offs |
-|------|--------|------------|
-| Quality | Accuracy, relevance | May need more tokens |
-| Cost | Tokens used | May sacrifice quality |
-| Latency | Response time | May limit model choice |
-| Consistency | Output variance | May reduce creativity |
-| Robustness | Edge case handling | May increase complexity |
+Every optimization involves trade-offs. Understanding these helps you make intentional choices:

-## Measuring Prompt Performance
+<InfoGrid items={[
+  { label: "Quality vs. Cost", description: "Higher quality often requires more tokens or better models", example: "Adding examples improves accuracy but increases token count", exampleType: "text", color: "blue" },
+  { label: "Speed vs. Quality", description: "Faster models may sacrifice some capability", example: "GPT-4 is smarter but slower than GPT-4o-mini", exampleType: "text", color: "purple" },
+  { label: "Consistency vs. Creativity", description: "Lower temperature = more predictable but less creative", example: "Temperature 0.2 for facts, 0.8 for brainstorming", exampleType: "text", color: "green" },
+  { label: "Simplicity vs. Robustness", description: "Edge case handling adds complexity", example: "Simple prompts fail on unusual inputs", exampleType: "text", color: "amber" }
+]} />

-### Define Success Metrics
+## Measuring What Matters

-Before optimizing, define what "good" means:
+Before optimizing, define success. What does "better" mean for your use case?

-```
-Quality metrics:
- Accuracy (for factual tasks)
- Relevance (for search/recommendation)
- Completeness (covers requirements)
- Coherence (well-structured)
+<InfoGrid items={[
+  { label: "Accuracy", description: "How often is the output correct?", example: "90% of code suggestions compile without errors", exampleType: "text", color: "blue" },
+  { label: "Relevance", description: "Does it address what was actually asked?", example: "Response directly answers the question vs. tangents", exampleType: "text", color: "blue" },
+  { label: "Completeness", description: "Are all requirements covered?", example: "All 5 requested sections included in output", exampleType: "text", color: "blue" },
+  { label: "Latency", description: "How long until the response arrives?", example: "p50 < 2s, p95 < 5s for chat applications", exampleType: "text", color: "purple" },
+  { label: "Token Efficiency", description: "How many tokens for the same result?", example: "500 tokens vs. 1500 tokens for equivalent output", exampleType: "text", color: "purple" },
+  { label: "Consistency", description: "How similar are outputs for similar inputs?", example: "Same question gets structurally similar answers", exampleType: "text", color: "green" }
+]} />

-Efficiency metrics:
- Input tokens used
- Output tokens generated
- API calls required
- End-to-end latency
-```
+<Callout type="info" title="What Do p50 and p95 Mean?">
+Percentile metrics show response time distribution. **p50** (median) means 50% of requests are faster than this value. **p95** means 95% are faster—it catches slow outliers. If your p50 is 1s but p95 is 10s, most users are happy but 5% experience frustrating delays.
+</Callout>

-### A/B Testing Framework
+<TryIt 
+  title="Define Your Success Metrics"
+  description="Use this template to clarify what you're optimizing for before making changes."
+  prompt={`Help me define success metrics for my prompt optimization.

-```
-Test Setup:
- Control: Current prompt (version A)
- Variant: Modified prompt (version B)
- Sample size: [N] test cases
- Success criteria: [metrics]
+**My use case**: \${useCase}
+**Current pain points**: \${painPoints}

-Test Process:
-1. Run both prompts on same inputs
-2. Evaluate outputs against criteria
-3. Calculate statistical significance
-4. Choose winner, iterate
+For this use case, help me define:

-Document:
- What changed between versions
- Performance delta
- Hypotheses about why
-```
+1. **Primary metric**: What single metric matters most?
+2. **Secondary metrics**: What else should I track?
+3. **Acceptable trade-offs**: What can I sacrifice for the primary metric?
+4. **Red lines**: What quality level is unacceptable?
+5. **How to measure**: Practical ways to evaluate each metric`}
+/>

 ## Token Optimization

-### Reducing Input Tokens
+Tokens cost money and add latency. Here's how to say the same thing with fewer tokens.

-**Before (verbose):**
-```
-I would like you to please help me with the following task. 
-I need you to take the text that I'm going to provide below 
-and create a summary of it. The summary should capture the 
-main points and be concise. Please make sure to include all 
-the important information. Here is the text:
-[text]
-```
+### The Compression Principle

-**After (concise):**
-```
-Summarize this text, capturing main points concisely:
-[text]
-```
+<Compare 
+  before={{ label: "Verbose (67 tokens)", content: "I would like you to please help me with the following task. I need you to take the text that I'm going to provide below and create a summary of it. The summary should capture the main points and be concise. Please make sure to include all the important information. Here is the text:\n\n[text]" }}
+  after={{ label: "Concise (12 tokens)", content: "Summarize this text, capturing main points concisely:\n\n[text]" }}
+/>

-### Token-Efficient Patterns
+**Same result, 82% fewer tokens.**

-```
-1. Remove pleasantries: "Please" and "Thank you" add tokens
-2. Use abbreviations where clear: "e.g." vs "for example"
-3. Eliminate redundancy: Don't repeat yourself
-4. Use structured formats: JSON over prose when appropriate
-5. Reference by position: "the above" vs repeating content
-```
+### Token-Saving Techniques

-### Prompt Compression Techniques
+<InfoGrid items={[
+  { label: "Cut Pleasantries", description: "\"Please\" and \"Thank you\" add tokens without improving output", example: "\"Please summarize\" → \"Summarize\"", color: "green" },
+  { label: "Eliminate Redundancy", description: "Don't repeat yourself or state the obvious", example: "\"Write a summary that summarizes\" → \"Summarize\"", color: "green" },
+  { label: "Use Abbreviations", description: "Where meaning is clear, abbreviate", example: "\"for example\" → \"e.g.\"", color: "green" },
+  { label: "Reference by Position", description: "Point to content instead of repeating it", example: "\"the text above\" instead of re-quoting", color: "green" }
+]} />

-```
-Original (45 tokens):
-"You are a helpful assistant specialized in Python programming. 
-You have extensive experience with web frameworks, particularly 
-Django and Flask. When answering questions, you should provide 
-code examples whenever possible."
+<TryIt 
+  title="Prompt Compressor"
+  description="Paste a verbose prompt to get a token-optimized version."
+  prompt={`Compress this prompt while preserving its meaning and effectiveness:

-Compressed (25 tokens):
-"You are a Python expert (Django/Flask). Provide code examples."
-```
+Original prompt:
+"\${verbosePrompt}"
+
+Instructions:
+1. Remove unnecessary pleasantries and filler words
+2. Eliminate redundancy
+3. Use concise phrasing
+4. Keep all essential instructions and constraints
+5. Maintain clarity—don't sacrifice understanding for brevity
+
+Provide:
+- **Compressed version**: The optimized prompt
+- **Token reduction**: Estimated percentage saved
+- **What was cut**: Brief explanation of what was removed and why it was safe to remove`}
+/>

 ## Quality Optimization

-### Improving Accuracy
+Sometimes you need better outputs, not cheaper ones. Here's how to improve quality.

-```
-Technique 1: Add verification step
-"...then verify your answer by [method]"
+### Accuracy Boosters

-Technique 2: Request confidence
-"...rate your confidence 1-10 and explain any uncertainty"
+<InfoGrid items={[
+  { label: "Add Verification", description: "Ask the model to check its own work", example: "\"...then verify your answer is correct\"", color: "blue" },
+  { label: "Request Confidence", description: "Make uncertainty explicit", example: "\"Rate your confidence 1-10 and explain any uncertainty\"", color: "blue" },
+  { label: "Multiple Approaches", description: "Get different perspectives, then choose", example: "\"Provide 3 approaches and recommend the best one\"", color: "blue" },
+  { label: "Explicit Reasoning", description: "Force step-by-step thinking", example: "\"Think step by step and show your reasoning\"", color: "blue" }
+]} />

-Technique 3: Multiple perspectives
-"...provide 3 different approaches and recommend one"
+### Consistency Boosters

-Technique 4: Explicit reasoning
-"...think step by step and show your reasoning"
-```
+<InfoGrid items={[
+  { label: "Detailed Format Specs", description: "Show exactly what output should look like", example: "Include a template or schema", exampleType: "text", color: "purple" },
+  { label: "Few-Shot Examples", description: "Provide 2-3 examples of ideal output", example: "\"Here's what good looks like: [examples]\"", color: "purple" },
+  { label: "Lower Temperature", description: "Reduce randomness for more predictable output", example: "Temperature 0.3-0.5 for consistent results", exampleType: "text", color: "purple" },
+  { label: "Output Validation", description: "Add a validation step for critical fields", example: "\"Verify all required fields are present\"", color: "purple" }
+]} />

-### Improving Consistency
+<TryIt 
+  title="Quality Enhancer"
+  description="Add quality-improving elements to your prompt."
+  prompt={`Enhance this prompt for higher quality outputs:

-```
-Technique 1: Detailed format specification
-[Show exact output structure expected]
+Original prompt:
+"\${originalPrompt}"

-Technique 2: Few-shot examples
-[Provide 2-3 examples of ideal output]
+**What quality issue I'm seeing**: \${qualityIssue}

-Technique 3: Temperature reduction
-[Use lower temperature: 0.3-0.5]
+Add appropriate quality boosters:
+1. If accuracy is the issue → add verification steps
+2. If consistency is the issue → add format specifications or examples
+3. If relevance is the issue → add context and constraints
+4. If completeness is the issue → add explicit requirements

-Technique 4: Output validation
-[Add validation step for key fields]
-```
-
-### Improving Relevance
-
-```
-Technique 1: Explicit context
-"Given that the user is [persona] trying to [goal]..."
-
-Technique 2: Negative constraints
-"Do NOT include [irrelevant things]"
-
-Technique 3: Prioritization
-"Focus primarily on [key aspect], secondary on [other]"
-
-Technique 4: Audience specification
-"Explain as if to [specific audience]"
-```
+Provide the enhanced prompt with explanations for each addition.`}
+/>

 ## Latency Optimization

-### Reducing Time to First Token
+When speed matters, every millisecond counts.

-```
-1. Choose faster models for simple tasks
-2. Reduce prompt length (fewer input tokens to process)
-3. Use streaming for long responses
-4. Cache common prompts
-```
+### Model Selection by Speed Need

-### Reducing Total Response Time
+<InfoGrid items={[
+  { label: "Real-time (< 500ms)", description: "Use smallest effective model + aggressive caching", example: "GPT-4o-mini, Claude Haiku, cached responses", exampleType: "text", color: "red" },
+  { label: "Interactive (< 2s)", description: "Fast models, streaming enabled", example: "GPT-4o-mini with streaming", exampleType: "text", color: "amber" },
+  { label: "Tolerant (< 10s)", description: "Mid-tier models, balance quality/speed", example: "GPT-4o, Claude Sonnet", exampleType: "text", color: "green" },
+  { label: "Async/Batch", description: "Use best model, process in background", example: "GPT-4, Claude Opus for offline processing", exampleType: "text", color: "blue" }
+]} />

-```
-1. Request shorter outputs
-2. Use parallel requests where possible
-3. Early termination (stop sequences)
-4. Chunked processing for large inputs
-```
+### Speed Techniques

-### Model Selection for Latency
-
-```
-High latency tolerance → Use best model (GPT-4, Claude Opus)
-Medium latency needs → Mid-tier models (GPT-4-turbo)
-Low latency required → Fast models (GPT-3.5, Claude Haiku)
-Real-time needs → Smallest effective model + caching
-```
+<InfoGrid items={[
+  { label: "Shorter Prompts", description: "Fewer input tokens = faster processing", example: "Compress prompts, remove unnecessary context", exampleType: "text", color: "cyan" },
+  { label: "Limit Output", description: "Set max_tokens to prevent runaway responses", example: "max_tokens: 500 for summaries", exampleType: "text", color: "cyan" },
+  { label: "Use Streaming", description: "Get first tokens faster, better UX", example: "Stream for any response > 100 tokens", exampleType: "text", color: "cyan" },
+  { label: "Cache Aggressively", description: "Don't recompute identical queries", example: "Cache common questions, template outputs", exampleType: "text", color: "cyan" }
+]} />

 ## Cost Optimization

-### Cost Calculation
+At scale, small savings multiply into significant budget impact.

-```
-Cost = (Input tokens × input price) + (Output tokens × output price)
+### Understanding Costs

-Example (GPT-4):
- Input: 1000 tokens × $0.03/1K = $0.03
- Output: 500 tokens × $0.06/1K = $0.03
- Total: $0.06 per request
+Use this calculator to estimate your API costs across different models:

-At 10,000 requests/day: $600/day = $18,000/month
-```
+<CostCalculatorDemo />

 ### Cost Reduction Strategies

-```
-1. Model tiering
-   - Use expensive models only when needed
-   - Route simple tasks to cheaper models
-   
-2. Prompt efficiency
-   - Shorter prompts = lower cost
-   - Batch related queries
+<InfoGrid items={[
+  { label: "Model Routing", description: "Use expensive models only when needed", example: "Simple questions → GPT-4o-mini, Complex → GPT-4", exampleType: "text", color: "green" },
+  { label: "Prompt Efficiency", description: "Shorter prompts = lower cost per request", example: "Cut 50% of tokens = 50% input cost savings", exampleType: "text", color: "green" },
+  { label: "Output Control", description: "Limit response length when full detail isn't needed", example: "\"Answer in 2-3 sentences\" vs. unlimited", color: "green" },
+  { label: "Batching", description: "Combine related queries into single requests", example: "Analyze 10 items in one prompt vs. 10 separate calls", exampleType: "text", color: "green" },
+  { label: "Pre-filtering", description: "Don't send requests that don't need AI", example: "Keyword matching before expensive classification", exampleType: "text", color: "green" }
+]} />

-3. Output control
-   - Set max_tokens appropriately
-   - Request concise responses
+## The Optimization Loop

-4. Caching
-   - Cache identical queries
-   - Cache common prompt prefixes
-   
-5. Filtering
-   - Pre-filter requests that don't need AI
-   - Post-filter to avoid retry costs
-```
+Optimization is iterative. Here's a systematic process:

-### Model Routing
+### Step 1: Establish Baseline

-```python
-def route_request(query, complexity):
-    if complexity == "simple":
-        return call_model("gpt-3.5-turbo", query)  # $0.002/1K
-    elif complexity == "medium":
-        return call_model("gpt-4-turbo", query)    # $0.01/1K
-    else:  # complex
-        return call_model("gpt-4", query)          # $0.03/1K
+You can't improve what you don't measure. Before changing anything, document your starting point rigorously.

-# Auto-classify complexity
-def classify_complexity(query):
-    # Simple heuristics or classifier
-    if len(query) < 100 and "simple" in keywords:
-        return "simple"
-    # ... more logic
-```
+<InfoGrid items={[
+  { label: "Prompt Documentation", description: "Save the exact prompt text, including system prompts and any templates", example: "Version control your prompts like code", exampleType: "text", color: "blue" },
+  { label: "Test Set", description: "Create 20-50 representative inputs that cover common cases and edge cases", example: "Include easy, medium, and hard examples", exampleType: "text", color: "blue" },
+  { label: "Quality Metrics", description: "Score each output against your success criteria", example: "Accuracy %, relevance score, format compliance", exampleType: "text", color: "purple" },
+  { label: "Performance Metrics", description: "Measure tokens and timing for each test case", example: "Avg input: 450 tokens, Avg output: 200 tokens, p50 latency: 1.2s", exampleType: "text", color: "purple" }
+]} />

-## Systematic Optimization Process
+<TryIt 
+  title="Baseline Documentation Template"
+  description="Use this to create a comprehensive baseline before optimizing."
+  prompt={`Create a baseline documentation for my prompt optimization project.

-### Step 1: Baseline
+**Current prompt**:
+"\${currentPrompt}"

-```
-Document current state:
- Prompt text
- Average input/output tokens
- Quality score on test set
- Latency percentiles (p50, p95)
- Cost per request
-```
+**What the prompt does**: \${promptPurpose}

-### Step 2: Identify Bottleneck
+**Current issues I'm seeing**: \${currentIssues}

-```
-Quality issues? → Focus on accuracy/relevance
-Cost issues? → Focus on token reduction
-Latency issues? → Focus on model/prompt size
-Consistency issues? → Focus on format/examples
-```
+Generate a baseline documentation template with:

-### Step 3: Generate Hypotheses
+1. **Prompt Snapshot**: The exact prompt text (for version control)

-```
-"If I [change], then [metric] will improve because [reason]"
+2. **Test Cases**: Suggest 10 representative test inputs I should use, covering:
+   - 3 typical/easy cases
+   - 4 medium complexity cases  
+   - 3 edge cases or difficult inputs

-Examples:
- "If I add examples, accuracy will improve because model 
-   learns pattern"
- "If I remove preamble, cost will decrease because fewer tokens"
- "If I use smaller model, latency will improve because faster 
-   inference"
-```
+3. **Metrics to Track**:
+   - Quality metrics specific to this use case
+   - Efficiency metrics (tokens, latency)
+   - How to score each metric

-### Step 4: Test and Measure
+4. **Baseline Hypothesis**: What do I expect the current performance to be?

-```
-For each hypothesis:
-1. Create variant prompt
-2. Run on test set (same inputs)
-3. Measure relevant metrics
-4. Compare to baseline
-5. Statistical significance check
-```
+5. **Success Criteria**: What numbers would make me satisfied with optimization?`}
+/>

-### Step 5: Iterate
+### Step 2: Form a Hypothesis

-```
-Based on results:
- Keep improvements that work
- Discard changes that don't help
- Generate new hypotheses
- Repeat until satisfied
-```
+<Compare 
+  before={{ label: "Vague goal", content: "I want to make my prompt better." }}
+  after={{ label: "Testable hypothesis", content: "If I add 2 few-shot examples, accuracy will improve from 75% to 85% because the model will learn the expected pattern." }}
+/>
+
+### Step 3: Test One Change
+
+Change one thing at a time. Run both versions on the same test inputs. Measure the metrics that matter.
+
+### Step 4: Analyze and Decide
+
+Did it work? Keep the change. Did it hurt? Revert. Was it neutral? Revert (simpler is better).
+
+### Step 5: Repeat
+
+Generate new hypotheses based on what you learned. Keep iterating until you hit your targets or reach diminishing returns.

 ## Optimization Checklist

-```
-TOKEN OPTIMIZATION
-□ Removed unnecessary words/pleasantries
-□ Eliminated redundancy
-□ Used efficient formatting
-□ Checked prompt length vs. context window
+<Checklist 
+  title="Before Deploying an Optimized Prompt"
+  items={[
+    { text: "Defined clear success metrics" },
+    { text: "Measured baseline performance" },
+    { text: "Tested changes on representative inputs" },
+    { text: "Verified quality didn't regress" },
+    { text: "Checked edge case handling" },
+    { text: "Calculated cost at expected scale" },
+    { text: "Tested latency under load" },
+    { text: "Documented what changed and why" }
+  ]}
+/>

-QUALITY OPTIMIZATION
-□ Added verification steps if needed
-□ Included relevant examples
-□ Specified format clearly
-□ Tested edge cases
-
-LATENCY OPTIMIZATION
-□ Using appropriate model for task
-□ Prompt length minimized
-□ Output length controlled
-□ Caching implemented where possible
-
-COST OPTIMIZATION
-□ Model routing implemented
-□ Token usage monitored
-□ Unnecessary calls eliminated
-□ Batch processing where applicable
-```
-
-## Summary
-
-Prompt optimization is iterative and context-dependent:
-
-1. **Define goals** — What matters most for your use case
-2. **Measure baseline** — Know where you're starting
-3. **Optimize systematically** — One change at a time
-4. **Test rigorously** — Measure actual impact
-5. **Balance trade-offs** — Quality vs. cost vs. speed
-
-The best prompt is one that achieves your goals efficiently—not necessarily the shortest or most sophisticated.
+<Quiz 
+  question="You have a prompt that works well but costs too much at scale. What's the FIRST thing you should do?"
+  options={[
+    "Switch to a cheaper model immediately",
+    "Remove words from the prompt to reduce tokens",
+    "Measure which part of the prompt is using the most tokens",
+    "Add caching for all requests"
+  ]}
+  correctIndex={2}
+  explanation="Before optimizing, measure. You need to understand where the tokens are going before you can effectively reduce them. The prompt might have unnecessary context, verbose instructions, or generate longer outputs than needed. Measurement tells you where to focus your optimization efforts."
+/>
--- a/src/content/book/18-writing-content.mdx
+++ b/src/content/book/18-writing-content.mdx
@@ -6,6 +6,13 @@ AI works best as a collaborative writing tool—use it to generate drafts, then

 ## Blog Posts and Articles

+### Do's and Don'ts: Writing Prompts
+
+<Compare 
+  before={{ label: "❌ Vague request", content: "Write a blog post about productivity." }}
+  after={{ label: "✓ Specific brief", content: "Write an 800-word blog post about productivity for remote workers.\n\nAudience: Tech professionals working from home\nTone: Conversational but actionable\nInclude: 3 specific techniques with examples\nKeyword: 'remote productivity tips'" }}
+/>
+
 ### Blog Post Framework

 <TryIt 
@@ -57,6 +64,10 @@ Order by: \${ordering:most important first}`} />

 ## Marketing Copy

+<Callout type="tip" title="Marketing Copy Principle">
+Focus on **benefits over features**. Instead of "Our software uses AI algorithms," write "Save 10 hours a week with automated reports." Show readers how their lives improve.
+</Callout>
+
 ### Landing Page Copy

 <TryIt compact prompt={`Write landing page copy for \${product}.
@@ -116,6 +127,10 @@ Instagram caption:

 ## Technical Writing

+<Callout type="info" title="Technical Writing Principle">
+**Clarity over cleverness.** Use simple words, short sentences, and active voice. Every sentence should have one job. If readers have to re-read something, simplify it.
+</Callout>
+
 ### Documentation

 <TryIt compact prompt={`Write documentation for \${feature}.
@@ -182,6 +197,13 @@ License type`}

 ## Creative Writing

+### Do's and Don'ts: Creative Prompts
+
+<Compare 
+  before={{ label: "❌ Too open-ended", content: "Write me a story." }}
+  after={{ label: "✓ Rich with constraints", content: "Write a 1000-word mystery story set in a small coastal town. The protagonist is a retired detective. Include a twist ending where the victim isn't who we thought. Tone: noir with dark humor." }}
+/>
+
 ### Story Elements

 <TryIt compact prompt={`Write a \${genre} short story.
--- a/src/content/book/19-programming-development.mdx
+++ b/src/content/book/19-programming-development.mdx
@@ -1,179 +1,170 @@
 AI has transformed software development. This chapter covers prompting techniques for code generation, debugging, review, and development workflows.

+<Callout type="info" title="AI as Coding Partner">
+AI excels at code generation, debugging, and documentation—but always review generated code for security, correctness, and maintainability. Never deploy AI code without testing.
+</Callout>
+
 ## Code Generation

+### Do's and Don'ts: Code Prompts
+
+<Compare 
+  before={{ label: "❌ Vague request", content: "Write a function to validate emails." }}
+  after={{ label: "✓ Complete specification", content: "Write a Python function that validates email addresses.\n\nInput: string (potential email)\nOutput: tuple[bool, str | None] - (is_valid, error_message)\nHandle: empty string, None, unicode chars\nUse regex, include type hints and docstring." }}
+/>
+
 ### Function Generation

-```
-Write a [language] function that [description].
+<TryIt compact prompt={`Write a \${language:Python} function that \${description:validates email addresses}.

 Requirements:
- Input: [parameter types and descriptions]
- Output: [return type and description]
- Handle edge cases: [list specific cases]
- Performance: [any performance requirements]
+- Input: \${inputTypes:string (potential email)}
+- Output: \${outputType:boolean and optional error message}
+- Handle edge cases: \${edgeCases:empty string, None, unicode characters}
+- Performance: \${performance:standard}

 Include:
 - Type hints/annotations
 - Docstring with examples
 - Input validation
- Error handling
-```
-
-**Example:**
-
-```
-Write a Python function that validates email addresses.
-
-Requirements:
- Input: string (potential email)
- Output: boolean (valid or not) and optional error message
- Handle edge cases: empty string, None, unicode characters
- Use regex for validation
-
-Include type hints, docstring with examples, and handle 
-common edge cases.
-```
+- Error handling`} />

 ### Class/Module Generation

-```
-Create a [language] class for [purpose].
+<TryIt compact prompt={`Create a \${language:Python} class for \${purpose:managing user sessions}.

 Class design:
- Name: [ClassName]
- Responsibility: [single responsibility description]
- Properties: [list with types]
- Methods: [list with signatures]
+- Name: \${className:SessionManager}
+- Responsibility: \${responsibility:handle user session lifecycle}
+- Properties: \${properties:session_id, user_id, created_at, expires_at}
+- Methods: \${methods:create(), validate(), refresh(), destroy()}

 Requirements:
- Follow [design pattern] pattern
+- Follow \${designPattern:Singleton} pattern
 - Include proper encapsulation
 - Add comprehensive docstrings
 - Include usage example

 Testing:
- Include unit test skeleton
-```
+- Include unit test skeleton`} />

 ### API Endpoint Generation

-```
-Create a REST API endpoint for [resource].
+<TryIt compact prompt={`Create a REST API endpoint for \${resource:user profiles}.

-Framework: [Express/FastAPI/Rails/etc.]
-Method: [GET/POST/PUT/DELETE]
-Path: [/api/resource]
+Framework: \${framework:FastAPI}
+Method: \${method:GET}
+Path: \${path:/api/users/{id}}

 Request:
- Headers: [required headers]
- Body schema: [JSON schema]
- Query params: [parameters]
+- Headers: \${headers:Authorization Bearer token}
+- Body schema: \${bodySchema:N/A for GET}
+- Query params: \${queryParams:include_posts (boolean)}

 Response:
- Success: [status code + response shape]
- Errors: [error codes and messages]
+- Success: \${successResponse:200 with user object}
+- Errors: \${errorResponses:401 Unauthorized, 404 Not Found}

 Include:
 - Input validation
 - Authentication check
 - Error handling
- Rate limiting consideration
-```
+- Rate limiting consideration`} />

 ## Debugging

+<Callout type="tip" title="Debugging Principle">
+Always include the **expected behavior**, **actual behavior**, and **error message** (if any). The more context you provide, the faster AI can identify the root cause.
+</Callout>
+
 ### Bug Analysis

-```
-Debug this code. It should [expected behavior] but instead 
-[actual behavior].
+<TryIt compact prompt={`Debug this code. It should \${expectedBehavior:return the sum of all numbers} but instead \${actualBehavior:returns 0 for all inputs}.

 Code:
-[code]
+\${code:paste your code here}

 Error message (if any):
-[error]
+\${error:none}

 Steps to debug:
 1. Identify what the code is trying to do
 2. Trace through execution with the given input
 3. Find where expected and actual behavior diverge
 4. Explain the root cause
-5. Provide the fix with explanation
-```
+5. Provide the fix with explanation`} />

 ### Error Message Interpretation

-```
-Explain this error and how to fix it:
+<TryIt compact prompt={`Explain this error and how to fix it:

 Error:
-[full error message/stack trace]
+\${errorMessage:paste error message or stack trace here}

 Context:
- Language/Framework: [details]
- What I was trying to do: [action]
- Relevant code: [code snippet]
+- Language/Framework: \${framework:Python 3.11}
+- What I was trying to do: \${action:reading a JSON file}
+- Relevant code: \${codeSnippet:paste relevant code}

 Provide:
 1. Plain English explanation of the error
 2. Root cause
 3. Step-by-step fix
-4. How to prevent this in the future
-```
+4. How to prevent this in the future`} />

 ### Performance Debugging

-```
-This code is slow. Analyze and optimize:
+<TryIt compact prompt={`This code is slow. Analyze and optimize:

 Code:
-[code]
+\${code:paste your code here}

-Current performance: [metrics]
-Target performance: [goals]
-Constraints: [memory limits, etc.]
+Current performance: \${currentPerformance:takes 30 seconds for 1000 items}
+Target performance: \${targetPerformance:under 5 seconds}
+Constraints: \${constraints:memory limit 512MB}

 Provide:
 1. Identify bottlenecks
 2. Explain why each is slow
 3. Suggest optimizations (ranked by impact)
 4. Show optimized code
-5. Estimate improvement
-```
+5. Estimate improvement`} />

 ## Code Review

+### Do's and Don'ts: Code Review Prompts
+
+<Compare 
+  before={{ label: "❌ Generic request", content: "Review this code." }}
+  after={{ label: "✓ Specific criteria", content: "Review this code for a pull request.\n\nCheck for:\n1. Correctness: bugs, logic errors, edge cases\n2. Security: injection risks, auth issues\n3. Performance: N+1 queries, memory leaks\n4. Maintainability: naming, complexity\n\nFormat: 🔴 Critical / 🟡 Important / 🟢 Suggestion" }}
+/>
+
 ### Comprehensive Review

-```
-Review this code for a pull request.
+<TryIt compact prompt={`Review this code for a pull request.

 Code:
-[code]
+\${code:paste your code here}

 Review for:
 1. **Correctness**: Bugs, logic errors, edge cases
 2. **Security**: Vulnerabilities, injection risks, auth issues
 3. **Performance**: Inefficiencies, N+1 queries, memory leaks
 4. **Maintainability**: Readability, naming, complexity
-5. **Best practices**: [language/framework] conventions
+5. **Best practices**: \${framework:Python/Django} conventions

 Format your review as:
-🔴 Critical: [must fix before merge]
-🟡 Important: [should fix]
-🟢 Suggestion: [nice to have]
-💭 Question: [clarification needed]
-```
+🔴 Critical: must fix before merge
+🟡 Important: should fix
+🟢 Suggestion: nice to have
+💭 Question: clarification needed`} />

 ### Security Review

-```
-Perform a security review of this code:
+<TryIt compact prompt={`Perform a security review of this code:

 Code:
-[code]
+\${code:paste your code here}

 Check for:
 - [ ] Injection vulnerabilities (SQL, XSS, command)
@@ -189,18 +180,16 @@ For each finding:
 - Location: Line number or function
 - Issue: Description
 - Exploit: How it could be attacked
- Fix: Recommended remediation
-```
+- Fix: Recommended remediation`} />

 ## Refactoring

 ### Code Smell Detection

-```
-Analyze this code for code smells and refactoring opportunities:
+<TryIt compact prompt={`Analyze this code for code smells and refactoring opportunities:

 Code:
-[code]
+\${code:paste your code here}

 Identify:
 1. Long methods (suggest extraction)
@@ -209,77 +198,69 @@ Identify:
 4. Poor naming (suggest better names)
 5. Tight coupling (suggest decoupling)

-For each issue, show before/after code.
-```
+For each issue, show before/after code.`} />

 ### Design Pattern Application

-```
-Refactor this code using the [pattern name] pattern.
+<TryIt compact prompt={`Refactor this code using the \${patternName:Factory} pattern.

 Current code:
-[code]
+\${code:paste your code here}

 Goals:
- [why this pattern is appropriate]
- [specific benefits we want]
+- \${whyPattern:decouple object creation from usage}
+- \${benefits:easier testing and extensibility}

 Provide:
 1. Explanation of the pattern
 2. How it applies here
 3. Refactored code
-4. Trade-offs to consider
-```
+4. Trade-offs to consider`} />

 ## Testing

 ### Unit Test Generation

-```
-Write unit tests for this function:
+<TryIt compact prompt={`Write unit tests for this function:

 Function:
-[code]
+\${code:paste your function here}

-Testing framework: [Jest/pytest/JUnit/etc.]
+Testing framework: \${testFramework:pytest}

 Cover:
 - Happy path (normal inputs)
 - Edge cases (empty, null, boundary values)
 - Error cases (invalid inputs)
- [Specific scenarios to test]
+- \${specificScenarios:concurrent access, large inputs}

 Format: Arrange-Act-Assert pattern
-Include: Descriptive test names
-```
+Include: Descriptive test names`} />

 ### Test Case Generation

-```
-Generate test cases for this feature:
+<TryIt compact prompt={`Generate test cases for this feature:

-Feature: [description]
-Acceptance criteria: [criteria]
+Feature: \${featureDescription:user registration with email verification}
+Acceptance criteria: \${acceptanceCriteria:user can sign up, receives email, can verify account}

 Provide test cases in this format:

 | ID | Scenario | Given | When | Then | Priority |
 |----|----------|-------|------|------|----------|
-| TC01 | ... | ... | ... | ... | High |
-```
+| TC01 | ... | ... | ... | ... | High |`} />

 ## Architecture & Design

 ### System Design

-```
-Design a system for [requirement].
+<TryIt compact prompt={`Design a system for \${requirement:real-time chat application}.

 Constraints:
- Expected load: [requests/users]
- Latency requirements: [ms]
- Availability: [SLA %]
- Budget: [constraints]
+- Expected load: \${expectedLoad:10,000 concurrent users}
+- Latency requirements: \${latency:< 100ms message delivery}
+- Availability: \${availability:99.9%}
+- Budget: \${budget:moderate, prefer open source}

 Provide:
 1. High-level architecture diagram (ASCII/text)
@@ -287,54 +268,48 @@ Provide:
 3. Data flow
 4. Technology choices with rationale
 5. Scaling strategy
-6. Trade-offs and alternatives considered
-```
+6. Trade-offs and alternatives considered`} />

 ### Database Schema Design

-```
-Design a database schema for [application].
+<TryIt compact prompt={`Design a database schema for \${application:e-commerce platform}.

 Requirements:
- [Feature 1]: [data needs]
- [Feature 2]: [data needs]
- [Feature 3]: [data needs]
+- \${feature1:User accounts with profiles and addresses}
+- \${feature2:Product catalog with categories and variants}
+- \${feature3:Orders with line items and payment tracking}

 Provide:
 1. Entity-relationship description
 2. Table definitions with columns and types
 3. Indexes for common queries
 4. Foreign key relationships
-5. Sample queries for key operations
-```
+5. Sample queries for key operations`} />

 ## Documentation Generation

 ### API Documentation

-```
-Generate API documentation from this code:
+<TryIt compact prompt={`Generate API documentation from this code:

 Code:
-[endpoint code]
+\${code:paste your endpoint code here}

-Format: OpenAPI/Swagger YAML
+Format: \${format:OpenAPI/Swagger YAML}

 Include:
 - Endpoint description
 - Request/response schemas
 - Example requests/responses
 - Error codes
- Authentication requirements
-```
+- Authentication requirements`} />

 ### Inline Documentation

-```
-Add comprehensive documentation to this code:
+<TryIt compact prompt={`Add comprehensive documentation to this code:

 Code:
-[code]
+\${code:paste your code here}

 Add:
 - File/module docstring (purpose, usage)
@@ -342,8 +317,7 @@ Add:
 - Inline comments for complex logic only
 - Type hints if missing

-Style: [Google/NumPy/JSDoc/etc.]
-```
+Style: \${docStyle:Google}`} />

 ## Prompt Templates from prompts.chat

@@ -380,55 +354,60 @@ trade-offs, and provide diagrams where helpful.

 ### Commit Message Generation

-```
-Generate a commit message for these changes:
+<TryIt compact prompt={`Generate a commit message for these changes:

 Diff:
-[git diff]
+\${diff:paste git diff here}

 Format: Conventional Commits
-Type: [feat/fix/docs/refactor/test/chore]
+Type: \${commitType:feat}

 Provide:
 - Subject line (50 chars max, imperative mood)
 - Body (what and why, wrapped at 72 chars)
- Footer (references issues if applicable)
-```
+- Footer (references issues if applicable)`} />

 ### PR Description Generation

-```
-Generate a pull request description:
+<TryIt compact prompt={`Generate a pull request description:

 Changes:
-[list of changes or diff summary]
+\${changes:list your changes or paste diff summary}

 Template:
 ## Summary
-[Brief description of changes]
+Brief description of changes

 ## Changes Made
- [Change 1]
- [Change 2]
+- Change 1
+- Change 2

 ## Testing
 - [ ] Unit tests added/updated
 - [ ] Manual testing completed

 ## Screenshots (if UI changes)
-[placeholder]
+placeholder

 ## Related Issues
-Closes #[issue number]
-```
+Closes #\${issueNumber:123}`} />

 ## Summary

-Effective programming prompts:
- Include full context (language, framework, constraints)
- Specify requirements precisely
- Request specific output formats
- Ask for explanations alongside code
- Include edge cases to handle
+<Callout type="tip" title="Key Techniques">
+Include full context (language, framework, constraints), specify requirements precisely, request specific output formats, ask for explanations alongside code, and include edge cases to handle.
+</Callout>
+
+<Quiz 
+  question="What's the most important element to include when asking AI to debug code?"
+  options={[
+    "The programming language only",
+    "Expected behavior, actual behavior, and error message",
+    "Just the code snippet",
+    "The file name"
+  ]}
+  correctIndex={1}
+  explanation="Debugging requires context: what should happen vs. what actually happens. Error messages and stack traces help AI pinpoint the exact issue quickly."
+/>

 AI is a powerful coding partner—use it for generation, review, debugging, and documentation while maintaining your architectural judgment.
--- a/src/content/book/20-education-learning.mdx
+++ b/src/content/book/20-education-learning.mdx
@@ -1,11 +1,21 @@
 AI is a powerful tool for both teaching and learning. This chapter covers prompts for educational contexts—from personalized tutoring to curriculum development.

+<Callout type="info" title="AI as Learning Partner">
+AI excels as a patient, adaptive tutor that can explain concepts multiple ways, generate unlimited practice problems, and provide instant feedback—available 24/7.
+</Callout>
+
 ## Personalized Learning

+### Do's and Don'ts: Learning Prompts
+
+<Compare 
+  before={{ label: "❌ Passive request", content: "Explain quantum physics to me." }}
+  after={{ label: "✓ Context-rich request", content: "Explain quantum superposition to me.\n\nMy background: I understand basic chemistry and classical physics.\nLearning style: I learn best through analogies and examples.\nExplain with a simple analogy, then the core concept, then a practical example. Check my understanding with a question." }}
+/>
+
 ### Concept Explanation

-```
-Explain [concept] to me.
+<TryIt compact prompt={`Explain [concept] to me.

 My background:
 - Current level: [beginner/intermediate/advanced]
@@ -19,13 +29,11 @@ Explain with:
 4. A practical example
 5. Common misconceptions to avoid

-Then check my understanding with a question.
-```
+Then check my understanding with a question.`} />

 ### Adaptive Tutoring

-```
-You are my tutor for [subject]. Teach me [topic] adaptively.
+<TryIt compact prompt={`You are my tutor for \${subject:calculus}. Teach me \${topic:derivatives} adaptively.

 Start with a diagnostic question to assess my level.
 Based on my response:
@@ -36,37 +44,37 @@ Based on my response:
 After each explanation:
 - Check understanding with a question
 - Adjust difficulty based on my answers
- Provide encouragement and track progress
-```
+- Provide encouragement and track progress`} />

 ### Learning Path Creation

-```
-Create a learning path for [goal].
+<TryIt compact prompt={`Create a learning path for \${goal:becoming a web developer}.

 My situation:
- Current skill level: [description]
- Time available: [hours per week]
- Target timeline: [weeks/months]
- Learning preferences: [reading/video/projects]
+- Current skill level: \${skillLevel:complete beginner}
+- Time available: \${timeAvailable:10 hours per week}
+- Target timeline: \${timeline:6 months}
+- Learning preferences: \${preferences:projects and tutorials}

 Provide:
 1. Prerequisites check (what I need first)
 2. Milestone breakdown (phases with goals)
 3. Resources for each phase (free when possible)
 4. Practice projects at each stage
-5. Assessment criteria (how to know I'm ready to advance)
-```
+5. Assessment criteria (how to know I'm ready to advance)`} />

 ## Study Assistance

+<Callout type="tip" title="Active Learning Principle">
+Don't just read AI explanations passively. Ask it to quiz you, generate problems, and check your understanding. **Active recall beats passive review.**
+</Callout>
+
 ### Summary Generation

-```
-Summarize this [chapter/lecture/paper] for study purposes.
+<TryIt compact prompt={`Summarize this \${contentType:chapter} for study purposes.

 Content:
-[content]
+\${content:paste your content here}

 Provide:
 1. **Key Concepts** (5-7 main ideas)
@@ -75,21 +83,19 @@ Provide:
 4. **Study Questions** (to test understanding)
 5. **Memory Aids** (mnemonics or associations)

-Format for easy review and memorization.
-```
+Format for easy review and memorization.`} />

 ### Flashcard Generation

-```
-Create flashcards for studying [topic].
+<TryIt compact prompt={`Create flashcards for studying \${topic:World War II}.

 Source material:
-[content]
+\${content:paste your study material here}

 Format each card:
-Front: [Question or term]
-Back: [Answer or definition]
-Hint: [Optional memory aid]
+Front: Question or term
+Back: Answer or definition
+Hint: Optional memory aid

 Categories to cover:
 - Definitions (key terms)
@@ -97,13 +103,11 @@ Categories to cover:
 - Relationships (how things connect)
 - Applications (real-world uses)

-Generate [number] cards, balanced across categories.
-```
+Generate \${numberOfCards:20} cards, balanced across categories.`} />

 ### Practice Problems

-```
-Generate practice problems for [topic].
+<TryIt compact prompt={`Generate practice problems for \${topic:quadratic equations}.

 Difficulty levels:
 - 3 Basic (test fundamental understanding)
@@ -116,21 +120,19 @@ For each problem:
 3. Hints available on request
 4. Detailed solution with explanation

-Include variety: [calculation/conceptual/application/analysis]
-```
+Include variety: \${problemTypes:calculation, conceptual, application}`} />

 ## Teaching Tools

 ### Lesson Plan Creation

-```
-Create a lesson plan for teaching [topic].
+<TryIt compact prompt={`Create a lesson plan for teaching \${topic:photosynthesis}.

 Context:
- Grade/Level: [audience]
- Class duration: [minutes]
- Class size: [students]
- Prior knowledge: [prerequisites]
+- Grade/Level: \${audience:8th grade science}
+- Class duration: \${duration:50 minutes}
+- Class size: \${classSize:25 students}
+- Prior knowledge: \${prerequisites:basic cell structure}

 Include:
 1. **Learning Objectives** (SMART format)
@@ -141,20 +143,18 @@ Include:
 6. **Assessment** (5 min) - check understanding
 7. **Closure** - summarize and preview

-Materials needed: [list]
-Differentiation strategies: [for various learners]
-```
+Materials needed: list
+Differentiation strategies: for various learners`} />

 ### Assignment Design

-```
-Design an assignment for [learning objective].
+<TryIt compact prompt={`Design an assignment for \${learningObjective:analyzing primary sources}.

 Parameters:
- Course: [subject and level]
- Due in: [timeframe]
- Individual/Group: [specify]
- Weight: [percentage of grade]
+- Course: \${course:AP US History}
+- Due in: \${dueIn:2 weeks}
+- Individual/Group: \${grouping:individual}
+- Weight: \${weight:15% of grade}

 Include:
 1. Clear instructions
@@ -164,15 +164,13 @@ Include:
 5. Academic integrity reminders

 The assignment should:
- Assess [specific skills]
- Allow for [creativity/analysis/application]
- Be completable in approximately [hours]
-```
+- Assess \${skills:critical thinking and source evaluation}
+- Allow for \${allowFor:analysis and interpretation}
+- Be completable in approximately \${hours:8 hours}`} />

 ### Quiz Generation

-```
-Create a quiz on [topic].
+<TryIt compact prompt={`Create a quiz on \${topic:the American Revolution}.

 Format:
 - [X] Multiple choice questions (4 options each)
@@ -184,22 +182,20 @@ Specifications:
 - Cover all key learning objectives
 - Range from recall to analysis
 - Include answer key with explanations
- Time estimate: [minutes]
- Point values for each section
-```
+- Time estimate: \${timeEstimate:30 minutes}
+- Point values for each section`} />

 ## Specialized Learning Contexts

 ### Language Learning

-```
-Help me learn [language].
+<TryIt compact prompt={`Help me learn \${language:Spanish}.

-Current level: [A1-C2 or description]
-Native language: [language]
-Goals: [conversation/reading/business/travel]
+Current level: \${currentLevel:A2 - elementary}
+Native language: \${nativeLanguage:English}
+Goals: \${goals:conversation for travel}

-Today's lesson: [focus area]
+Today's lesson: \${focusArea:ordering food at restaurants}

 Include:
 1. New vocabulary (5-10 words) with:
@@ -209,17 +205,15 @@ Include:
 2. Grammar point with clear explanation
 3. Practice exercises
 4. Cultural context note
-5. Conversation practice scenario
-```
+5. Conversation practice scenario`} />

 ### Skill Development

-```
-I want to learn [skill]. Be my coach.
+<TryIt compact prompt={`I want to learn \${skill:guitar}. Be my coach.

-My current level: [description]
-Goal: [specific outcome]
-Practice time available: [per day/week]
+My current level: \${currentLevel:complete beginner}
+Goal: \${goal:play 5 songs by ear}
+Practice time available: \${practiceTime:30 minutes per day}

 Provide:
 1. Assessment of starting point
@@ -227,18 +221,16 @@ Provide:
 3. Practice routine (specific exercises)
 4. Progress markers (how to measure improvement)
 5. Common plateaus and how to overcome them
-6. First week's practice plan in detail
-```
+6. First week's practice plan in detail`} />

 ### Exam Preparation

-```
-Help me prepare for [exam name].
+<TryIt compact prompt={`Help me prepare for \${examName:the GRE}.

-Exam format: [structure]
-Time until exam: [duration]
-My weak areas: [topics]
-Target score: [goal]
+Exam format: \${examFormat:Verbal, Quantitative, Writing sections}
+Time until exam: \${timeUntilExam:8 weeks}
+My weak areas: \${weakAreas:reading comprehension, geometry}
+Target score: \${targetScore:320+}

 Create a study plan:
 1. Topics to cover (prioritized)
@@ -246,50 +238,30 @@ Create a study plan:
 3. Practice test strategy
 4. Key formulas/facts to memorize
 5. Test-taking tips specific to this exam
-6. Day-before and day-of recommendations
-```
+6. Day-before and day-of recommendations`} />

 ## Prompt Templates from prompts.chat

 ### Act as a Socratic Tutor

-```
-I want you to act as a Socratic tutor. You will help me learn 
-by asking probing questions rather than giving direct answers. 
-When I ask about a topic, respond with questions that guide me 
-to discover the answer myself. If I'm stuck, provide hints but 
-not solutions. Help me develop critical thinking skills.
-```
+<TryIt compact prompt={`I want you to act as a Socratic tutor. You will help me learn by asking probing questions rather than giving direct answers. When I ask about a topic, respond with questions that guide me to discover the answer myself. If I'm stuck, provide hints but not solutions. Help me develop critical thinking skills.`} />

 ### Act as an Educational Content Creator

-```
-I want you to act as an educational content creator. You will 
-create engaging, accurate educational materials for [subject]. 
-Make complex topics accessible without oversimplifying. Use 
-analogies, examples, and visual descriptions. Include knowledge 
-checks and encourage active learning.
-```
+<TryIt compact prompt={`I want you to act as an educational content creator. You will create engaging, accurate educational materials for \${subject:biology}. Make complex topics accessible without oversimplifying. Use analogies, examples, and visual descriptions. Include knowledge checks and encourage active learning.`} />

 ### Act as a Study Buddy

-```
-I want you to act as my study buddy. We're studying [subject] 
-together. Quiz me on concepts, discuss ideas, help me work 
-through problems, and keep me motivated. Be encouraging but 
-also challenge me to think deeper. Let's make studying 
-interactive and effective.
-```
+<TryIt compact prompt={`I want you to act as my study buddy. We're studying \${subject:organic chemistry} together. Quiz me on concepts, discuss ideas, help me work through problems, and keep me motivated. Be encouraging but also challenge me to think deeper. Let's make studying interactive and effective.`} />

 ## Accessibility in Education

 ### Content Adaptation

-```
-Adapt this educational content for [accessibility need]:
+<TryIt compact prompt={`Adapt this educational content for \${accessibilityNeed:dyslexia-friendly format}:

 Original content:
-[content]
+\${content:paste your content here}

 Adaptation needed:
 - [ ] Simplified language (lower reading level)
@@ -301,13 +273,11 @@ Adaptation needed:
 Maintain:
 - All key learning objectives
 - Accuracy of content
- Assessment equivalence
-```
+- Assessment equivalence`} />

 ### Multiple Modalities

-```
-Present [concept] in multiple ways:
+<TryIt compact prompt={`Present \${concept:photosynthesis} in multiple ways:

 1. **Text explanation** (clear prose)
 2. **Visual description** (describe a diagram)
@@ -315,19 +285,17 @@ Present [concept] in multiple ways:
 4. **Story/Narrative** (embed in a scenario)
 5. **Q&A format** (question and answer)

-This allows learners to engage with their preferred style.
-```
+This allows learners to engage with their preferred style.`} />

 ## Assessment & Feedback

 ### Providing Feedback

-```
-Provide educational feedback on this student work:
+<TryIt compact prompt={`Provide educational feedback on this student work:

-Assignment: [description]
-Student submission: [work]
-Rubric: [criteria]
+Assignment: \${assignment:5-paragraph essay on climate change}
+Student submission: \${work:paste student work here}
+Rubric: \${rubric:thesis clarity, evidence, organization, grammar}

 Feedback format:
 1. **Strengths** - What they did well (specific)
@@ -336,13 +304,11 @@ Feedback format:
 4. **Grade/Score** - Based on rubric
 5. **Encouragement** - Motivational closing

-Tone: Supportive, specific, growth-oriented
-```
+Tone: Supportive, specific, growth-oriented`} />

 ### Self-Assessment Prompts

-```
-Help me assess my understanding of [topic].
+<TryIt compact prompt={`Help me assess my understanding of \${topic:the French Revolution}.

 Ask me 5 questions that test:
 1. Basic recall
@@ -356,17 +322,24 @@ After each answer, tell me:
 - What I should review
 - How to deepen my knowledge

-Be honest but encouraging.
-```
+Be honest but encouraging.`} />

 ## Summary

-Education prompts work best when they:
- Adapt to the learner's level
- Break complex topics into steps
- Include active practice, not just explanation
- Provide varied approaches (multiple modalities)
- Check understanding regularly
- Give constructive, specific feedback
+<Callout type="tip" title="Key Techniques">
+Adapt to the learner's level, break complex topics into steps, include active practice (not just explanation), provide varied approaches, check understanding regularly, and give constructive feedback.
+</Callout>
+
+<Quiz 
+  question="What's the most effective way to use AI for learning?"
+  options={[
+    "Read AI explanations passively like a textbook",
+    "Ask AI to quiz you and generate practice problems",
+    "Only use AI for homework answers",
+    "Avoid AI for learning entirely"
+  ]}
+  correctIndex={1}
+  explanation="Active recall beats passive review. Have AI quiz you, generate problems, and check your understanding—this builds stronger memory than just reading explanations."
+/>

 AI is a patient, always-available learning partner—use it to supplement, not replace, human instruction.
--- a/src/content/book/21-business-productivity.mdx
+++ b/src/content/book/21-business-productivity.mdx
@@ -1,11 +1,21 @@
 AI can dramatically enhance professional productivity. This chapter covers prompts for business communication, analysis, planning, and workflow optimization.

+<Callout type="info" title="AI for Business">
+AI excels at drafting, analysis, and structuring—freeing you to focus on strategy, relationships, and decisions that require human judgment.
+</Callout>
+
 ## Business Communication

+### Do's and Don'ts: Business Emails
+
+<Compare 
+  before={{ label: "❌ Vague request", content: "Write an email to my boss about the project." }}
+  after={{ label: "✓ Complete context", content: "Write an email to my manager (Sarah) updating her on the Q4 marketing project.\n\nKey points: We're on track for the Nov 15 deadline, resolved the vendor issue, need her approval on the $5K budget increase.\nTone: Professional but friendly (we have a good relationship)\nKeep under 150 words with a clear ask at the end." }}
+/>
+
 ### Email Drafting

-```
-Write a professional email.
+<TryIt compact prompt={`Write a professional email.

 Context:
 - To: [recipient and relationship]
@@ -16,35 +26,23 @@ Context:
 Constraints:
 - Keep under [X] sentences
 - Clear call-to-action
- Subject line included
-```
+- Subject line included`} />

 **Examples by purpose:**

-```
-Meeting Request:
-"Write an email requesting a meeting with a potential client to 
-discuss partnership opportunities. Keep it brief and make it easy 
-for them to say yes."
+<TryIt compact prompt={`\${emailType:Meeting Request}: Write an email requesting a meeting with a potential client to discuss partnership opportunities. Keep it brief and make it easy for them to say yes.`} />

-Difficult Conversation:
-"Write an email declining a vendor's proposal while maintaining 
-the relationship for future opportunities. Be clear but diplomatic."
+<TryIt compact prompt={`\${emailType:Difficult Conversation}: Write an email declining a vendor's proposal while maintaining the relationship for future opportunities. Be clear but diplomatic.`} />

-Status Update:
-"Write a project status email to stakeholders. The project is 
-2 weeks behind schedule due to scope changes. Present the 
-situation professionally with a recovery plan."
-```
+<TryIt compact prompt={`\${emailType:Status Update}: Write a project status email to stakeholders. The project is 2 weeks behind schedule due to scope changes. Present the situation professionally with a recovery plan.`} />

 ### Presentation Content

-```
-Create presentation content for [topic/purpose].
+<TryIt compact prompt={`Create presentation content for \${topic:Q4 sales strategy}.

-Audience: [who]
-Duration: [minutes]
-Goal: [inform/persuade/train]
+Audience: \${audience:executive leadership}
+Duration: \${duration:15 minutes}
+Goal: \${goal:persuade to approve budget increase}

 Provide for each slide:
 - Title
@@ -58,17 +56,15 @@ Structure:
 2. Problem/Opportunity
 3. Solution/Recommendation
 4. Evidence/Support
-5. Call to action
-```
+5. Call to action`} />

 ### Report Writing

-```
-Write a [type] report on [topic].
+<TryIt compact prompt={`Write a \${reportType:recommendation} report on \${topic:expanding into European markets}.

-Report type: [status/analysis/recommendation/annual]
-Audience: [C-suite/board/team/external]
-Length: [pages/words]
+Report type: \${type:recommendation}
+Audience: \${audience:C-suite}
+Length: \${length:5 pages}

 Structure:
 1. Executive Summary (key findings, 1 paragraph)
@@ -80,52 +76,52 @@ Structure:
 7. Next Steps

 Include: Data visualization suggestions where relevant
-Tone: [formal business/technical/accessible]
-```
+Tone: \${tone:formal business}`} />

 ## Analysis & Decision-Making

+<Callout type="tip" title="Analysis Principle">
+AI can structure your thinking, but **you provide the real-world context**. The best analyses combine AI's frameworks with your domain knowledge.
+</Callout>
+
 ### SWOT Analysis

-```
-Conduct a SWOT analysis for [company/product/decision].
+<TryIt compact prompt={`Conduct a SWOT analysis for \${subject:launching a new mobile app}.

 Context:
-[relevant background]
+\${context:We're a mid-size fintech company considering a consumer banking app}

 Provide:

 **Strengths** (internal positives)
- [At least 4 points with brief explanations]
+- At least 4 points with brief explanations

 **Weaknesses** (internal negatives)
- [At least 4 points with brief explanations]
+- At least 4 points with brief explanations

 **Opportunities** (external positives)
- [At least 4 points with brief explanations]
+- At least 4 points with brief explanations

 **Threats** (external negatives)
- [At least 4 points with brief explanations]
+- At least 4 points with brief explanations

 **Strategic Implications**
 - Key insight from analysis
- Recommended priorities
-```
+- Recommended priorities`} />

 ### Decision Framework

-```
-Help me make a decision about [decision].
+<TryIt compact prompt={`Help me make a decision about \${decision:which CRM to choose}.

 Options:
-1. [Option A]
-2. [Option B]
-3. [Option C]
+1. \${optionA:Salesforce}
+2. \${optionB:HubSpot}
+3. \${optionC:Pipedrive}

 Criteria that matter to me:
- [Criterion 1] (weight: high/medium/low)
- [Criterion 2] (weight: high/medium/low)
- [Criterion 3] (weight: high/medium/low)
+- \${criterion1:ease of use} (weight: high)
+- \${criterion2:integration with existing tools} (weight: high)
+- \${criterion3:cost} (weight: medium)

 Provide:
 1. Score each option against each criterion (1-5)
@@ -133,13 +129,11 @@ Provide:
 3. Pros/cons summary for each
 4. Risk assessment
 5. Recommendation with rationale
-6. Questions to consider before deciding
-```
+6. Questions to consider before deciding`} />

 ### Competitive Analysis

-```
-Analyze [competitor] compared to [our company/product].
+<TryIt compact prompt={`Analyze \${competitor:Slack} compared to \${ourProduct:our team communication tool}.

 Research their:
 1. **Products/Services** - offerings, pricing, positioning
@@ -154,45 +148,41 @@ Compare to us:
 - Opportunity gaps
 - Competitive threats

-Recommend: Actions to improve our competitive position
-```
+Recommend: Actions to improve our competitive position`} />

 ## Planning & Strategy

 ### Goal Setting (OKRs)

-```
-Help me set OKRs for [team/project/quarter].
+<TryIt compact prompt={`Help me set OKRs for \${scope:Q1 marketing team}.

 Context:
- Company goals: [relevant higher-level goals]
- Current situation: [state]
- Key priorities: [focus areas]
+- Company goals: \${companyGoals:increase revenue 25% YoY}
+- Current situation: \${currentState:brand awareness is low in new markets}
+- Key priorities: \${priorities:lead generation, content marketing}

 Create 3 Objectives with 3-4 Key Results each.

 Format:
-**Objective 1:** [Qualitative goal - inspiring]
- KR 1.1: [Quantitative measure] (Current: X → Target: Y)
- KR 1.2: [Quantitative measure] (Current: X → Target: Y)
- KR 1.3: [Quantitative measure] (Current: X → Target: Y)
+**Objective 1:** Qualitative goal - inspiring
+- KR 1.1: Quantitative measure (Current: X → Target: Y)
+- KR 1.2: Quantitative measure (Current: X → Target: Y)
+- KR 1.3: Quantitative measure (Current: X → Target: Y)

 Ensure KRs are:
 - Measurable
 - Ambitious but achievable
 - Time-bound
- Outcome-focused (not tasks)
-```
+- Outcome-focused (not tasks)`} />

 ### Project Planning

-```
-Create a project plan for [project].
+<TryIt compact prompt={`Create a project plan for \${project:website redesign}.

-Scope: [what's included]
-Timeline: [duration]
-Team: [resources available]
-Budget: [if relevant]
+Scope: \${scope:new homepage, product pages, checkout flow}
+Timeline: \${timeline:3 months}
+Team: \${team:2 developers, 1 designer, 1 PM}
+Budget: \${budget:$50,000}

 Provide:
 1. **Project phases** with milestones
@@ -200,22 +190,20 @@ Provide:
 3. **Timeline** (Gantt-style description)
 4. **Dependencies** (what blocks what)
 5. **Risks** (potential issues and mitigation)
-6. **Success criteria** (how we know we're done)
-```
+6. **Success criteria** (how we know we're done)`} />

 ### Meeting Agenda

-```
-Create an agenda for [meeting type].
+<TryIt compact prompt={`Create an agenda for \${meetingType:quarterly planning}.

-Purpose: [specific goal of meeting]
-Attendees: [who and their roles]
-Duration: [minutes]
+Purpose: \${purpose:align on Q2 priorities and resource allocation}
+Attendees: \${attendees:department heads, CEO, COO}
+Duration: \${duration:90 minutes}

 Format:
 | Time | Topic | Owner | Goal |
 |------|-------|-------|------|
-| 5 min | Opening | [name] | Context |
+| 5 min | Opening | Facilitator | Context |
 | ... | ... | ... | ... |

 Include:
@@ -223,18 +211,16 @@ Include:
 - Clear owner for each item
 - Specific outcomes expected
 - Pre-work required
- Follow-up action item template
-```
+- Follow-up action item template`} />

 ## Productivity Workflows

 ### Task Prioritization

-```
-Help me prioritize my tasks using the Eisenhower Matrix.
+<TryIt compact prompt={`Help me prioritize my tasks using the Eisenhower Matrix.

 My tasks:
-[list of tasks]
+\${tasks:1. Prepare quarterly report (due Friday)\n2. Review job applications\n3. Reply to vendor emails\n4. Plan team offsite\n5. Update LinkedIn profile}

 Categorize each into:
 1. **Urgent + Important** (Do first)
@@ -245,13 +231,11 @@ Categorize each into:
 Then provide:
 - Recommended order of execution
 - Time estimates
- Suggestions for delegation or elimination
-```
+- Suggestions for delegation or elimination`} />

 ### Process Documentation

-```
-Document this business process: [process name]
+<TryIt compact prompt={`Document this business process: \${processName:customer refund request}.

 Create:
 1. **Process overview** (1 paragraph)
@@ -262,16 +246,14 @@ Create:
 6. **Systems involved** (tools/software)
 7. **Exceptions** (edge cases and handling)

-Format: Clear enough for new employee to follow
-```
+Format: Clear enough for new employee to follow`} />

 ### Standard Operating Procedure

-```
-Write an SOP for [task/process].
+<TryIt compact prompt={`Write an SOP for \${task:onboarding new employees to Slack}.

-Audience: [who will use this]
-Complexity: [basic/intermediate/advanced users]
+Audience: \${audience:HR administrators}
+Complexity: \${complexity:basic users}

 Include:
 1. Purpose and scope
@@ -281,81 +263,73 @@ Include:
 5. Quality checkpoints
 6. Common errors and troubleshooting
 7. Related SOPs/documents
-8. Version history
-```
+8. Version history`} />

 ## Communication Templates

 ### Stakeholder Update

-```
-Write a stakeholder update for [project/initiative].
+<TryIt compact prompt={`Write a stakeholder update for \${project:CRM migration project}.

-Status: [on track/at risk/behind/completed]
-Period: [timeframe covered]
+Status: \${status:at risk}
+Period: \${period:Week of Jan 6-10}

 Format:
-## [Project Name] Update
+## Project Name Update

 **Status:** 🟢/🟡/🔴

 **Progress this period:**
- [Accomplishment 1]
- [Accomplishment 2]
+- Accomplishment 1
+- Accomplishment 2

 **Next period goals:**
- [Goal 1]
- [Goal 2]
+- Goal 1
+- Goal 2

 **Risks/Blockers:**
- [If any]
+- If any

 **Decisions needed:**
- [If any]
-```
+- If any`} />

 ### Feedback Request

-```
-Write a message requesting feedback on [deliverable].
+<TryIt compact prompt={`Write a message requesting feedback on \${deliverable:the new product roadmap document}.

-Context: [what it is, why feedback matters]
-Specific areas for feedback: [what to focus on]
-Timeline: [when you need it by]
+Context: \${context:This will guide our Q2 priorities, I want to make sure I haven't missed anything}
+Specific areas for feedback: \${feedbackAreas:timeline feasibility, resource allocation, missing features}
+Timeline: \${deadline:by Friday EOD}

 Tone: Professional but not overly formal
-Make it easy to respond with specific questions
-```
+Make it easy to respond with specific questions`} />

 ## Prompt Templates from prompts.chat

 ### Act as a Business Consultant

-```
-I want you to act as a business consultant. I will describe 
-business situations and challenges, and you will provide 
-strategic advice, frameworks for thinking about problems, 
-and actionable recommendations. Draw on established business 
-principles while being practical and specific.
-```
+<TryIt compact prompt={`I want you to act as a business consultant. I will describe business situations and challenges, and you will provide strategic advice, frameworks for thinking about problems, and actionable recommendations. Draw on established business principles while being practical and specific.`} />

 ### Act as a Meeting Facilitator

-```
-I want you to act as a meeting facilitator. Help me plan and 
-run effective meetings. Create agendas, suggest discussion 
-frameworks, help synthesize conversations, and draft follow-up 
-communications. Focus on making meetings productive and 
-action-oriented.
-```
+<TryIt compact prompt={`I want you to act as a meeting facilitator. Help me plan and run effective meetings. Create agendas, suggest discussion frameworks, help synthesize conversations, and draft follow-up communications. Focus on making meetings productive and action-oriented.`} />

 ## Summary

-Business prompts are most effective when they:
- Specify the audience and their needs
- Define the desired outcome clearly
- Include relevant context and constraints
- Request specific formats and structures
- Consider professional tone requirements
+<Callout type="tip" title="Key Techniques">
+Specify the audience and their needs, define the desired outcome clearly, include relevant context and constraints, request specific formats and structures, and consider professional tone requirements.
+</Callout>
+
+<Quiz 
+  question="What should you always include when asking AI to write a business email?"
+  options={[
+    "Just the topic you want to discuss",
+    "Recipient, purpose, key points, and desired tone",
+    "Only the recipient's name",
+    "A template from the internet"
+  ]}
+  correctIndex={1}
+  explanation="Effective business emails need context: who you're writing to, why, what must be communicated, and the appropriate tone. AI can't infer your professional relationships or organizational context."
+/>

 AI can handle routine business communication while you focus on strategy and relationships.
--- a/src/content/book/22-creative-arts.mdx
+++ b/src/content/book/22-creative-arts.mdx
@@ -1,13 +1,23 @@
 AI is a powerful creative collaborator. This chapter covers prompting techniques for visual arts, music, game design, and other creative domains.

+<Callout type="info" title="AI as Creative Partner">
+AI expands your creative possibilities—use it to explore variations, overcome blocks, and generate options. The creative vision and final decisions remain yours.
+</Callout>
+
 ## Visual Art & Design

+### Do's and Don'ts: Image Prompts
+
+<Compare 
+  before={{ label: "❌ Vague prompt", content: "A wizard in a library" }}
+  after={{ label: "✓ Rich description", content: "A wise elderly wizard reading an ancient tome, sitting in a tower library at sunset, fantasy art style, warm golden lighting, contemplative mood, highly detailed, 4K, by Greg Rutkowski" }}
+/>
+
 ### Image Prompt Crafting

 When working with image generation models (DALL-E, Midjourney, Stable Diffusion):

-```
-Create an image prompt for [concept].
+<TryIt compact prompt={`Create an image prompt for [concept].

 Structure:
 [Subject] + [Action/Pose] + [Setting/Background] + [Style] + 
@@ -16,13 +26,11 @@ Structure:
 Example:
 "A wise elderly wizard reading an ancient tome, sitting in a 
 tower library at sunset, fantasy art style, warm golden lighting, 
-contemplative mood, highly detailed, 4K"
-```
+contemplative mood, highly detailed, 4K"`} />

 ### Art Direction

-```
-Describe artwork for [project/scene].
+<TryIt compact prompt={`Describe artwork for \${project:fantasy book cover}.

 Include:
 1. **Composition** - arrangement of elements
@@ -32,16 +40,14 @@ Include:
 5. **Mood/Atmosphere** - emotional quality
 6. **Technical approach** - medium, technique

-Purpose: [illustration/concept art/marketing/personal]
-```
+Purpose: \${purpose:illustration for book cover}`} />

 ### Design Critique

-```
-Critique this design from a professional perspective.
+<TryIt compact prompt={`Critique this design from a professional perspective.

-Design: [description or concept]
-Context: [what it's for]
+Design: \${design:a landing page with hero section, feature grid, and testimonials}
+Context: \${context:SaaS product for project management}

 Evaluate:
 1. **Visual hierarchy** - Is importance clear?
@@ -54,18 +60,20 @@ Evaluate:
 Provide:
 - Specific strengths
 - Areas for improvement
- Actionable suggestions
-```
+- Actionable suggestions`} />

 ## Creative Writing

+<Callout type="tip" title="Creative Constraint Principle">
+**Constraints fuel creativity.** A prompt like "write anything" produces generic results. Specific constraints like genre, tone, and structure force unexpected, interesting solutions.
+</Callout>
+
 ### Worldbuilding

-```
-Help me build a world for [story/game].
+<TryIt compact prompt={`Help me build a world for \${project:a fantasy novel}.

-Genre: [fantasy/sci-fi/contemporary/etc.]
-Scope: [planet/country/city/building]
+Genre: \${genre:dark fantasy}
+Scope: \${scope:a kingdom}

 Develop:
 1. **Geography** - physical environment
@@ -76,19 +84,17 @@ Develop:
 6. **Conflict** - sources of tension
 7. **Unique element** - what makes this world special

-Start with broad strokes, then detail one aspect deeply.
-```
+Start with broad strokes, then detail one aspect deeply.`} />

 ### Plot Development

-```
-Help me develop a plot for [story concept].
+<TryIt compact prompt={`Help me develop a plot for \${storyConcept:a heist gone wrong}.

-Genre: [genre]
-Tone: [serious/humorous/dark/uplifting]
-Length: [short story/novella/novel]
+Genre: \${genre:thriller}
+Tone: \${tone:dark with moments of dark humor}
+Length: \${length:novel}

-Using [three-act/hero's journey/other] structure:
+Using \${structure:three-act} structure:

 1. **Setup** - world, character, normal life
 2. **Inciting incident** - what disrupts normalcy
@@ -98,57 +104,51 @@ Using [three-act/hero's journey/other] structure:
 6. **Climax** - confrontation
 7. **Resolution** - new normal

-For each beat, suggest specific scenes.
-```
+For each beat, suggest specific scenes.`} />

 ### Dialogue Writing

-```
-Write dialogue between [characters] about [topic/conflict].
+<TryIt compact prompt={`Write dialogue between \${characters:two siblings} about \${topic:their estranged father returning}.

-Character A: [name, personality, goals]
-Character B: [name, personality, goals]
-Relationship: [how they relate]
-Subtext: [what's unspoken]
+Character A: \${characterA:older sister, protective, pragmatic, wants to move on}
+Character B: \${characterB:younger brother, hopeful, emotional, wants to reconnect}
+Relationship: \${relationship:close but with different coping styles}
+Subtext: \${subtext:unspoken resentment about who bore more burden}

 Guidelines:
 - Each character has distinct voice
 - Dialogue reveals character, not just information
 - Include beats (actions/reactions)
 - Build tension or develop relationship
- Show, don't tell emotions
-```
+- Show, don't tell emotions`} />

 ## Music & Audio

 ### Song Structure

-```
-Help me structure a song.
+<TryIt compact prompt={`Help me structure a song.

-Genre: [genre]
-Mood: [emotional quality]
-Tempo: [BPM or description]
-Theme/Message: [what it's about]
+Genre: \${genre:indie folk}
+Mood: \${mood:bittersweet nostalgia}
+Tempo: \${tempo:moderate, around 90 BPM}
+Theme/Message: \${theme:looking back on a hometown you've outgrown}

 Provide:
-1. **Structure** - [verse/chorus/bridge arrangement]
-2. **Verse 1** - [lyrical concept, 4-8 lines]
-3. **Chorus** - [hook concept, 4 lines]
-4. **Verse 2** - [development, 4-8 lines]
-5. **Bridge** - [contrast/shift, 4 lines]
+1. **Structure** - verse/chorus/bridge arrangement
+2. **Verse 1** - lyrical concept, 4-8 lines
+3. **Chorus** - hook concept, 4 lines
+4. **Verse 2** - development, 4-8 lines
+5. **Bridge** - contrast/shift, 4 lines
 6. **Chord progression suggestion**
-7. **Melodic direction notes**
-```
+7. **Melodic direction notes**`} />

 ### Sound Design Description

-```
-Describe a sound design for [scene/moment].
+<TryIt compact prompt={`Describe a sound design for \${scene:a character entering an abandoned space station}.

-Context: [what's happening]
-Emotion to evoke: [feeling]
-Medium: [film/game/podcast/etc.]
+Context: \${context:protagonist discovers the station has been empty for decades}
+Emotion to evoke: \${emotion:eerie wonder mixed with dread}
+Medium: \${medium:video game}

 Layer by layer:
 1. **Foundation** - ambient/background
@@ -157,19 +157,17 @@ Layer by layer:
 4. **Accents** - punctuation sounds
 5. **Music** - score suggestions

-Describe sounds in evocative terms, not just names.
-```
+Describe sounds in evocative terms, not just names.`} />

 ## Game Design

 ### Game Mechanic Design

-```
-Design a game mechanic for [game type/goal].
+<TryIt compact prompt={`Design a game mechanic for \${gameType:a puzzle platformer}.

-Core loop: [what players do repeatedly]
-Player motivation: [why they engage]
-Skill involved: [what improves with practice]
+Core loop: \${coreLoop:manipulate gravity to solve spatial puzzles}
+Player motivation: \${motivation:mastery and discovery}
+Skill involved: \${skill:spatial reasoning and timing}

 Describe:
 1. **The mechanic** - how it works
@@ -177,17 +175,15 @@ Describe:
 3. **Feedback** - how they know the result
 4. **Progression** - how it evolves/deepens
 5. **Balance considerations**
-6. **Edge cases** - unusual scenarios
-```
+6. **Edge cases** - unusual scenarios`} />

 ### Level Design

-```
-Design a level for [game type].
+<TryIt compact prompt={`Design a level for \${gameType:a stealth action game}.

-Setting: [environment]
-Objectives: [what player must do]
-Difficulty: [position in game progression]
+Setting: \${setting:corporate headquarters at night}
+Objectives: \${objectives:infiltrate the server room and extract data}
+Difficulty: \${difficulty:mid-game, player has basic abilities}

 Include:
 1. **Layout overview** - spatial description
@@ -196,16 +192,14 @@ Include:
 4. **Rewards** - what player gains
 5. **Secrets** - optional discoveries
 6. **Teaching moments** - skill introduction
-7. **Environmental storytelling** - narrative through design
-```
+7. **Environmental storytelling** - narrative through design`} />

 ### Character/Enemy Design

-```
-Design a [character/enemy] for [game].
+<TryIt compact prompt={`Design a \${entityType:boss enemy} for \${game:a dark fantasy action RPG}.

-Role: [player character/NPC/enemy type]
-Context: [game world, where encountered]
+Role: \${role:mid-game boss}
+Context: \${context:guards a corrupted forest temple}

 Define:
 1. **Visual concept** - appearance description
@@ -214,20 +208,18 @@ Define:
 4. **Weaknesses** - vulnerabilities
 5. **Personality** - if relevant
 6. **Lore/Backstory** - world integration
-7. **Player strategy** - how to interact/defeat
-```
+7. **Player strategy** - how to interact/defeat`} />

 ## Brainstorming & Ideation

 ### Creative Brainstorm

-```
-Brainstorm ideas for [creative project].
+<TryIt compact prompt={`Brainstorm ideas for \${project:a mobile game about mindfulness}.

 Constraints:
- [Any limitations]
- [Requirements]
- [Themes to incorporate]
+- \${constraint1:must be playable in 2-minute sessions}
+- \${constraint2:no violence or competition}
+- \${constraint3:nature themes}

 Generate:
 1. **10 conventional ideas** - solid, expected
@@ -236,13 +228,11 @@ Generate:
 4. **1 combination** - merge best elements

 For each, one sentence description + why it works.
-Don't self-censor—quantity over quality first.
-```
+Don't self-censor—quantity over quality first.`} />

 ### Creative Constraints

-```
-Give me creative constraints for [project type].
+<TryIt compact prompt={`Give me creative constraints for \${projectType:writing a short story}.

 I want constraints that:
 - Force unexpected choices
@@ -250,68 +240,46 @@ I want constraints that:
 - Create productive limitations

 Format:
-1. [Constraint] - [Why it helps creativity]
+1. Constraint - Why it helps creativity
 2. ...

 Then show one example of how applying these constraints 
-transforms a generic concept into something interesting.
-```
+transforms a generic concept into something interesting.`} />

 ### Style Exploration

-```
-Explore different styles for [concept].
+<TryIt compact prompt={`Explore different styles for \${concept:a coffee shop logo}.

 Show how this concept would manifest in:
 1. **Minimalist** - stripped to essence
 2. **Maximalist** - abundant and detailed
-3. **Retro [decade]** - period-specific
+3. **Retro 1950s** - period-specific
 4. **Futuristic** - forward-looking
 5. **Folk/Traditional** - cultural roots
 6. **Abstract** - non-representational
 7. **Surrealist** - dreamlike logic

-For each, describe key characteristics and example.
-```
+For each, describe key characteristics and example.`} />

 ## Prompt Templates from prompts.chat

 ### Act as a Creative Director

-```
-I want you to act as a creative director. I will describe 
-creative projects and you will develop creative visions, 
-guide aesthetic decisions, and ensure conceptual coherence. 
-Draw on art history, design principles, and cultural trends. 
-Help me make bold creative choices with clear rationale.
-```
+<TryIt compact prompt={`I want you to act as a creative director. I will describe creative projects and you will develop creative visions, guide aesthetic decisions, and ensure conceptual coherence. Draw on art history, design principles, and cultural trends. Help me make bold creative choices with clear rationale.`} />

 ### Act as a Worldbuilder

-```
-I want you to act as a worldbuilder. Help me create rich, 
-consistent fictional worlds with detailed histories, cultures, 
-and systems. Ask probing questions to deepen the world. Point 
-out inconsistencies and suggest solutions. Make the world feel 
-lived-in and believable.
-```
+<TryIt compact prompt={`I want you to act as a worldbuilder. Help me create rich, consistent fictional worlds with detailed histories, cultures, and systems. Ask probing questions to deepen the world. Point out inconsistencies and suggest solutions. Make the world feel lived-in and believable.`} />

 ### Act as a Dungeon Master

-```
-I want you to act as a Dungeon Master for a tabletop RPG. 
-Create engaging scenarios, describe vivid settings, roleplay 
-NPCs with distinct personalities, and respond dynamically to 
-player choices. Balance challenge with fun, and keep the 
-narrative compelling.
-```
+<TryIt compact prompt={`I want you to act as a Dungeon Master for a tabletop RPG. Create engaging scenarios, describe vivid settings, roleplay NPCs with distinct personalities, and respond dynamically to player choices. Balance challenge with fun, and keep the narrative compelling.`} />

 ## Creative Collaboration Tips

 ### Building on Ideas

-```
-I have this creative idea: [idea]
+<TryIt compact prompt={`I have this creative idea: \${idea:a mystery novel set in a space station where the AI is the detective}

 Help me develop it by:
 1. What's working well
@@ -320,33 +288,39 @@ Help me develop it by:
 4. Potential challenges
 5. First three development steps

-Don't replace my vision—enhance it.
-```
+Don't replace my vision—enhance it.`} />

 ### Creative Feedback

-```
-Give me feedback on this creative work:
+<TryIt compact prompt={`Give me feedback on this creative work:

-[work]
+\${work:paste your creative work here}

-As a [fellow creator/editor/audience member]:
+As a \${perspective:fellow creator}:
 1. What resonates most strongly
 2. What feels underdeveloped
 3. What's confusing or unclear
 4. One bold suggestion
 5. What would make this unforgettable

-Be honest but constructive.
-```
+Be honest but constructive.`} />

 ## Summary

-Creative prompts work best when they:
- Provide enough structure to guide without constraining
- Embrace specificity (vague prompts = generic results)
- Include references and inspirations
- Request variations and alternatives
- Maintain your creative vision while exploring possibilities
+<Callout type="tip" title="Key Techniques">
+Provide enough structure to guide without constraining, embrace specificity (vague = generic), include references and inspirations, request variations and alternatives, and maintain your creative vision while exploring possibilities.
+</Callout>
+
+<Quiz 
+  question="Why do specific constraints often produce better creative results than open-ended prompts?"
+  options={[
+    "AI can only follow strict instructions",
+    "Constraints force unexpected solutions and eliminate obvious choices",
+    "Open-ended prompts are too difficult for AI",
+    "Constraints make the output shorter"
+  ]}
+  correctIndex={1}
+  explanation="Paradoxically, limitations spark creativity. When obvious solutions are eliminated, you're forced to explore unexpected directions. 'Write a story' produces clichés; 'Write a mystery set in a submarine, told backwards, in under 500 words' produces something unique."
+/>

 AI is a collaborator, not a replacement for creative vision. Use it to explore, generate options, and overcome blocks—but the creative decisions remain yours.
--- a/src/content/book/23-research-analysis.mdx
+++ b/src/content/book/23-research-analysis.mdx
@@ -1,11 +1,21 @@
 AI can accelerate research workflows from literature review to data analysis. This chapter covers prompting techniques for academic and professional research.

+<Callout type="info" title="AI in Research">
+AI can assist with synthesis, analysis, and writing—but cannot replace critical thinking, ethical judgment, or domain expertise. Always verify claims and cite original sources.
+</Callout>
+
 ## Literature & Information Review

+### Do's and Don'ts: Research Prompts
+
+<Compare 
+  before={{ label: "❌ Vague request", content: "Summarize this paper for me." }}
+  after={{ label: "✓ Structured request", content: "Summarize this paper for my literature review on machine learning in healthcare.\n\nProvide:\n1. Main thesis (1-2 sentences)\n2. Methodology\n3. Key findings (bullets)\n4. Limitations\n5. Relevance to my research\n\nReading level: Graduate student" }}
+/>
+
 ### Paper Summarization

-```
-Summarize this academic paper:
+<TryIt compact prompt={`Summarize this academic paper:

 [paper abstract or full text]

@@ -17,17 +27,15 @@ Provide:
 5. **Limitations** - Acknowledged or apparent weaknesses
 6. **Relevance to [my research topic]** - How it connects

-Reading level: [expert/graduate/undergraduate]
-```
+Reading level: \${readingLevel:graduate}`} />

 ### Literature Synthesis

-```
-Synthesize these papers on [topic]:
+<TryIt compact prompt={`Synthesize these papers on \${topic:the effectiveness of remote work}:

-Paper 1: [summary/citation]
-Paper 2: [summary/citation]
-Paper 3: [summary/citation]
+Paper 1: \${paper1:Smith 2021 - found productivity increased 15%}
+Paper 2: \${paper2:Jones 2022 - noted collaboration challenges}
+Paper 3: \${paper3:Chen 2023 - hybrid model showed best outcomes}

 Analyze:
 1. **Common themes** - What do they agree on?
@@ -36,19 +44,17 @@ Analyze:
 4. **Evolution** - How has thinking progressed?
 5. **Synthesis** - Integrated understanding

-Format as: Literature review paragraph suitable for [thesis/paper]
-```
+Format as: Literature review paragraph suitable for \${outputType:thesis}`} />

 ### Research Question Development

-```
-Help me develop research questions for [topic].
+<TryIt compact prompt={`Help me develop research questions for \${topic:AI adoption in healthcare}.

 Context:
- Field: [discipline]
- Current knowledge: [what's known]
- Gap identified: [what's missing]
- My interest: [specific angle]
+- Field: \${field:health informatics}
+- Current knowledge: \${currentKnowledge:AI tools exist but adoption is slow}
+- Gap identified: \${gap:limited understanding of physician resistance factors}
+- My interest: \${interest:organizational change management}

 Generate:
 1. **Primary RQ** - Main question to answer
@@ -58,21 +64,23 @@ Generate:
 Criteria: Questions should be:
 - Answerable with available methods
 - Significant to the field
- Appropriately scoped
-```
+- Appropriately scoped`} />

 ## Data Analysis

+<Callout type="warning" title="AI Cannot Analyze Your Actual Data">
+AI can guide methodology and help interpret results, but it cannot access or process your actual datasets. Never paste sensitive research data into prompts. Use AI for **guidance**, not computation.
+</Callout>
+
 ### Statistical Analysis Guidance

-```
-Help me analyze this data:
+<TryIt compact prompt={`Help me analyze this data:

 Data description:
- Variables: [list with types]
- Sample size: [n]
- Research question: [what I'm testing]
- Data characteristics: [distribution, missing values, etc.]
+- Variables: \${variables:age (continuous), treatment group (categorical: A/B/C), outcome score (continuous)}
+- Sample size: \${sampleSize:n=150 (50 per group)}
+- Research question: \${researchQuestion:Does treatment type affect outcome scores?}
+- Data characteristics: \${characteristics:normally distributed, no missing values}

 Advise on:
 1. **Appropriate tests** - Which statistical tests to use
@@ -81,18 +89,16 @@ Advise on:
 4. **Effect size** - Practical significance
 5. **Reporting** - How to present findings

-Note: Guide my analysis, don't fabricate results.
-```
+Note: Guide my analysis, don't fabricate results.`} />

 ### Qualitative Analysis

-```
-Help me analyze these qualitative responses:
+<TryIt compact prompt={`Help me analyze these qualitative responses:

 Responses:
-[interview excerpts or survey responses]
+\${responses:paste interview excerpts or survey responses here}

-Using [thematic analysis/grounded theory/content analysis]:
+Using \${method:thematic analysis}:

 1. **Initial codes** - Identify recurring concepts
 2. **Categories** - Group related codes
@@ -100,21 +106,19 @@ Using [thematic analysis/grounded theory/content analysis]:
 4. **Relationships** - How themes connect
 5. **Representative quotes** - Evidence for each theme

-Maintain: Participant voice and context
-```
+Maintain: Participant voice and context`} />

 ### Data Interpretation

-```
-Help me interpret these findings:
+<TryIt compact prompt={`Help me interpret these findings:

 Results:
-[statistical output or data summary]
+\${results:paste statistical output or data summary here}

 Context:
- Research question: [RQ]
- Hypothesis: [if any]
- Expected results: [predictions]
+- Research question: \${researchQuestion:Does X predict Y?}
+- Hypothesis: \${hypothesis:X positively predicts Y}
+- Expected results: \${expectedResults:significant positive correlation}

 Provide:
 1. **Plain language interpretation** - What does this mean?
@@ -122,51 +126,47 @@ Provide:
 3. **Practical significance** - Real-world meaning
 4. **Comparison to literature** - How does this fit?
 5. **Alternative explanations** - Other interpretations
-6. **Limitations of interpretation**
-```
+6. **Limitations of interpretation**`} />

 ## Structured Analysis Frameworks

 ### PESTLE Analysis

-```
-Conduct a PESTLE analysis for [organization/industry/decision].
+<TryIt compact prompt={`Conduct a PESTLE analysis for \${subject:electric vehicle industry in Europe}.

 **Political** factors:
- [Government policies, regulations, political stability]
+- Government policies, regulations, political stability

 **Economic** factors:
- [Economic growth, inflation, exchange rates, unemployment]
+- Economic growth, inflation, exchange rates, unemployment

 **Social** factors:
- [Demographics, cultural trends, lifestyle changes]
+- Demographics, cultural trends, lifestyle changes

 **Technological** factors:
- [Innovation, R&D, automation, technology changes]
+- Innovation, R&D, automation, technology changes

 **Legal** factors:
- [Legislation, regulatory bodies, employment law]
+- Legislation, regulatory bodies, employment law

 **Environmental** factors:
- [Climate, sustainability, environmental regulations]
+- Climate, sustainability, environmental regulations

-For each: Current state + trends + implications
-```
+For each: Current state + trends + implications`} />

 ### Root Cause Analysis

-```
-Perform root cause analysis for [problem].
+<TryIt compact prompt={`Perform root cause analysis for \${problem:customer churn increased 20% last quarter}.

 Problem statement:
-[Clear description of the issue]
+\${problemStatement:Monthly churn rate rose from 3% to 3.6% between Q3 and Q4}

 Using 5 Whys:
-1. Why? [First level cause]
-   2. Why? [Deeper cause]
-      3. Why? [Deeper still]
-         4. Why? [Approaching root]
-            5. Why? [Root cause]
+1. Why? First level cause
+   2. Why? Deeper cause
+      3. Why? Deeper still
+         4. Why? Approaching root
+            5. Why? Root cause

 Alternative: Fishbone diagram categories
 - People
@@ -176,19 +176,17 @@ Alternative: Fishbone diagram categories
 - Environment
 - Management

-Provide: Root cause(s) + recommended actions
-```
+Provide: Root cause(s) + recommended actions`} />

 ### Gap Analysis

-```
-Conduct a gap analysis for [topic/organization].
+<TryIt compact prompt={`Conduct a gap analysis for \${subject:our customer support operations}.

 **Current State:**
- [Where we are now - specific metrics/descriptions]
+- \${currentState:Average response time 24 hours, CSAT 3.2/5}

 **Desired State:**
- [Where we want to be - specific goals]
+- \${desiredState:Response time under 4 hours, CSAT 4.5/5}

 **Gap Identification:**
 | Area | Current | Desired | Gap | Priority |
@@ -200,17 +198,15 @@ For each high-priority gap:
 - Specific actions
 - Resources needed
 - Timeline
- Success metrics
-```
+- Success metrics`} />

 ## Academic Writing Support

 ### Argument Structure

-```
-Help me structure an argument for [thesis].
+<TryIt compact prompt={`Help me structure an argument for \${topic:why remote work should become permanent policy}.

-Main claim: [your thesis]
+Main claim: \${thesis:Organizations should adopt permanent remote/hybrid policies for knowledge workers}

 Required:
 1. **Premises** - Supporting claims that lead to conclusion
@@ -222,32 +218,28 @@ Required:
 Check for:
 - Logical fallacies
 - Unsupported claims
- Gaps in reasoning
-```
+- Gaps in reasoning`} />

 ### Methods Section

-```
-Help me write a methods section for:
+<TryIt compact prompt={`Help me write a methods section for:

-Study type: [experimental/survey/case study/etc.]
-Participants: [who, how many, how selected]
-Materials: [instruments, tools, stimuli]
-Procedure: [what happened, in what order]
-Analysis: [how data was analyzed]
+Study type: \${studyType:survey}
+Participants: \${participants:200 undergraduate students, convenience sampling}
+Materials: \${materials:online questionnaire with Likert scales}
+Procedure: \${procedure:participants completed 20-minute survey online}
+Analysis: \${analysis:descriptive statistics and regression analysis}

-Standards: Follow [APA/discipline] guidelines
+Standards: Follow \${standards:APA 7th edition} guidelines
 Include: Enough detail for replication
-Tone: Passive voice, past tense
-```
+Tone: Passive voice, past tense`} />

 ### Discussion Section

-```
-Help me write a discussion section.
+<TryIt compact prompt={`Help me write a discussion section.

 Key findings:
-[list main results]
+\${findings:1. Significant positive correlation (r=0.45) between X and Y\n2. No significant difference between groups on secondary measure}

 Structure:
 1. **Summary** - Brief restatement of main findings
@@ -258,18 +250,16 @@ Structure:
 6. **Future directions** - What research should follow
 7. **Conclusion** - Take-home message

-Avoid: Overstating findings or introducing new results
-```
+Avoid: Overstating findings or introducing new results`} />

 ## Critical Analysis

 ### Source Evaluation

-```
-Evaluate this source for academic use:
+<TryIt compact prompt={`Evaluate this source for academic use:

-Source: [citation or link]
-Content summary: [what it claims]
+Source: \${source:paste citation or link here}
+Content summary: \${summary:brief description of what the source claims}

 Assess using CRAAP criteria:
 - **Currency**: When published? Updated? Current enough?
@@ -278,16 +268,14 @@ Assess using CRAAP criteria:
 - **Accuracy**: Supported by evidence? Peer-reviewed?
 - **Purpose**: Why was it written? Bias evident?

-Verdict: [Highly credible / Use with caution / Avoid]
-How to use: [Recommendations for incorporation]
-```
+Verdict: Highly credible / Use with caution / Avoid
+How to use: Recommendations for incorporation`} />

 ### Argument Analysis

-```
-Analyze the argument in this text:
+<TryIt compact prompt={`Analyze the argument in this text:

-[text]
+\${text:paste the text you want to analyze}

 Identify:
 1. **Main claim** - What's being argued
@@ -298,47 +286,38 @@ Identify:
 6. **Weaknesses** - Logical gaps or fallacies
 7. **Alternative interpretations**

-Provide: Fair, balanced assessment
-```
+Provide: Fair, balanced assessment`} />

 ## Prompt Templates from prompts.chat

 ### Act as a Research Assistant

-```
-I want you to act as a research assistant. Help me explore 
-topics, find information, synthesize sources, and develop 
-arguments. Ask clarifying questions, suggest relevant areas 
-to investigate, and help me think critically about evidence. 
-Be thorough but acknowledge the limits of your knowledge.
-```
+<TryIt compact prompt={`I want you to act as a research assistant. Help me explore topics, find information, synthesize sources, and develop arguments. Ask clarifying questions, suggest relevant areas to investigate, and help me think critically about evidence. Be thorough but acknowledge the limits of your knowledge.`} />

 ### Act as a Data Analyst

-```
-I want you to act as a data analyst. I will describe datasets 
-and research questions, and you will suggest analysis approaches, 
-help interpret results, and identify potential issues. Focus on 
-sound methodology and clear communication of findings.
-```
+<TryIt compact prompt={`I want you to act as a data analyst. I will describe datasets and research questions, and you will suggest analysis approaches, help interpret results, and identify potential issues. Focus on sound methodology and clear communication of findings.`} />

 ### Act as a Peer Reviewer

-```
-I want you to act as an academic peer reviewer. I will share 
-manuscripts or sections, and you will provide constructive 
-feedback on methodology, argument, writing, and contribution 
-to the field. Be rigorous but supportive, noting both strengths 
-and areas for improvement.
-```
+<TryIt compact prompt={`I want you to act as an academic peer reviewer. I will share manuscripts or sections, and you will provide constructive feedback on methodology, argument, writing, and contribution to the field. Be rigorous but supportive, noting both strengths and areas for improvement.`} />

 ## Summary

-Research prompts work best when they:
- Clearly state the research context and goals
- Specify the analytical framework to use
- Request acknowledgment of limitations
- Ask for evidence-based reasoning
- Maintain academic rigor and honesty
+<Callout type="tip" title="Key Techniques">
+Clearly state research context and goals, specify the analytical framework to use, request acknowledgment of limitations, ask for evidence-based reasoning, and maintain academic rigor and honesty.
+</Callout>
+
+<Quiz 
+  question="What's the most important thing to remember when using AI for research?"
+  options={[
+    "AI can replace the need for primary sources",
+    "AI analysis is always accurate and up-to-date",
+    "Always verify AI claims independently and cite original sources",
+    "AI can access and analyze your actual datasets"
+  ]}
+  correctIndex={2}
+  explanation="AI can assist with synthesis and structure, but it can hallucinate citations, have outdated information, and cannot access your actual data. Always verify claims against primary sources and maintain academic integrity."
+/>

 Remember: AI can assist research but cannot replace critical thinking, ethical judgment, or domain expertise. Always verify claims independently.