plcode-darwin-x64-baseline 2.1.0

package/.plcode/skill/experimental/infographic/SKILL.md

@@ -0,0 +1,469 @@
+---
+name: infographic
+description: "Create beautiful standalone HTML infographics from any content. 21 layouts (bento-grid, timeline, funnel, dashboard, iceberg, etc.) × 21 visual styles (craft-handmade, cyberpunk-neon, chalkboard, etc.). Use when the user says 'infographic', 'visual summary', 'visualize this', 'info poster', 'data visualization', or wants content turned into a visual one-pager. Produces self-contained HTML files with inline CSS, no build step required."
+category: design
+---
+
+# Infographic Generator
+
+Create stunning, self-contained HTML infographics from any content. Two dimensions: **layout** (information structure) × **style** (visual aesthetics). Freely combine any layout with any style.
+
+Adapted from [baoyu-infographic](https://github.com/JimLiu/baoyu-skills) for PLCODE's HTML-first workflow.
+
+## When to Use
+
+- "Make an infographic about X"
+- "Visualize this data / content"
+- "Turn this into a visual summary"
+- "Create an info poster"
+- "One-pager for X"
+- "Visual explainer"
+- Any request to present information in a visually rich, poster-like format
+
+## When NOT to Use
+
+- User wants a **dashboard component** for their app — build it with React/shadcn
+- User wants a **quick UI mockup** — use `sketch`
+- User wants a **presentation deck** — use `document-pptx`
+- User wants a **chart/graph only** — just write the chart code directly
+
+## Options
+
+| Option   | Values                                                                      |
+| -------- | --------------------------------------------------------------------------- |
+| Layout   | 21 options (see Layout Gallery), default: `bento-grid`                      |
+| Style    | 21 options (see Style Gallery), default: `craft-handmade`                   |
+| Aspect   | `landscape` (16:9), `portrait` (9:16), `square` (1:1), or custom like `4:3` |
+| Language | `en`, `pt`, `zh`, `ja`, etc. — defaults to source content language          |
+
+## Layout Gallery
+
+| Layout                 | Best For                                                     |
+| ---------------------- | ------------------------------------------------------------ |
+| `bento-grid`           | Multiple topics, overviews, feature highlights **(default)** |
+| `linear-progression`   | Timelines, step-by-step processes, tutorials                 |
+| `binary-comparison`    | A vs B, before-after, pros-cons                              |
+| `comparison-matrix`    | Multi-factor feature comparisons                             |
+| `hierarchical-layers`  | Pyramids, priority levels, org structures                    |
+| `tree-branching`       | Categories, taxonomies, decision trees                       |
+| `hub-spoke`            | Central concept with related items radiating out             |
+| `structural-breakdown` | Exploded views, anatomy diagrams                             |
+| `iceberg`              | Surface vs hidden aspects, visible vs invisible              |
+| `bridge`               | Problem → solution connections                               |
+| `funnel`               | Conversion pipelines, filtering stages                       |
+| `isometric-map`        | Spatial relationships, ecosystem maps                        |
+| `dashboard`            | Metrics, KPIs, status monitors                               |
+| `periodic-table`       | Categorized collections, element grids                       |
+| `comic-strip`          | Narratives, story sequences                                  |
+| `story-mountain`       | Plot structure, tension arcs                                 |
+| `jigsaw`               | Interconnected parts forming a whole                         |
+| `venn-diagram`         | Overlapping concepts, shared properties                      |
+| `winding-roadmap`      | Journeys, milestones, product roadmaps                       |
+| `circular-flow`        | Cycles, recurring processes, feedback loops                  |
+| `dense-modules`        | High-density data-rich guides, reference cards               |
+
+## Style Gallery
+
+| Style                  | Description                                          | CSS Vibe                                                 |
+| ---------------------- | ---------------------------------------------------- | -------------------------------------------------------- |
+| `craft-handmade`       | Hand-drawn, paper craft, warm textures **(default)** | Soft shadows, paper-like backgrounds, sketch borders     |
+| `claymation`           | 3D clay figures, playful depth                       | Bold rounded shapes, thick shadows, saturated colors     |
+| `kawaii`               | Japanese cute, pastels, rounded                      | Pastel palette, large rounded corners, soft glows        |
+| `storybook-watercolor` | Soft painted, whimsical, dreamy                      | Watercolor gradients, organic shapes, muted tones        |
+| `chalkboard`           | Chalk on dark board, educational                     | Dark background (#2d3436), chalk-white text, rough edges |
+| `cyberpunk-neon`       | Neon glow, dark futuristic                           | Dark bg, neon borders/text, glow effects, monospace      |
+| `bold-graphic`         | Comic style, halftone, punchy                        | Thick black outlines, halftone dots, primary colors      |
+| `aged-academia`        | Vintage science, sepia, scholarly                    | Sepia tones, serif fonts, aged paper textures            |
+| `corporate-memphis`    | Flat vector, vibrant, modern business                | Bright flat colors, geometric shapes, clean sans-serif   |
+| `technical-schematic`  | Blueprint, engineering precision                     | Blue-on-dark bg, monospace, grid lines, technical labels |
+| `origami`              | Folded paper, geometric, angular                     | Sharp angles, paper fold shadows, muted earth tones      |
+| `pixel-art`            | Retro 8-bit, nostalgic                               | Pixel fonts, limited palette, sharp edges, no anti-alias |
+| `ui-wireframe`         | Grayscale interface mockup                           | Gray palette, thin borders, system fonts, minimal        |
+| `subway-map`           | Transit diagram, connected nodes                     | Bold colored lines, circular nodes, clean connections    |
+| `ikea-manual`          | Minimal line art, instructional                      | Thin strokes, minimal color, step numbering, clean       |
+| `knolling`             | Organized flat-lay, everything aligned               | Grid alignment, soft shadows, white/light bg             |
+| `lego-brick`           | Toy brick construction, playful                      | Bright primary colors, rounded rectangles, stud patterns |
+| `pop-laboratory`       | Blueprint grid, coordinate markers                   | Grid background, coordinate labels, lab precision        |
+| `morandi-journal`      | Warm Morandi tones, hand-drawn doodle                | Muted warm palette, wobbly borders, journal texture      |
+| `retro-pop-grid`       | 1970s pop art, Swiss grid, bold outlines             | Retro orange/brown/teal, thick outlines, grid structure  |
+| `hand-drawn-edu`       | Macaron pastels, stick figures, educational          | Soft pastels, hand-drawn wobble, rounded comic sans feel |
+
+## Recommended Combinations
+
+| Content Type           | Layout + Style                                 |
+| ---------------------- | ---------------------------------------------- |
+| Timeline / History     | `linear-progression` + `craft-handmade`        |
+| Step-by-step Guide     | `linear-progression` + `ikea-manual`           |
+| A vs B Comparison      | `binary-comparison` + `corporate-memphis`      |
+| Hierarchy / Org Chart  | `hierarchical-layers` + `craft-handmade`       |
+| Overlapping Concepts   | `venn-diagram` + `craft-handmade`              |
+| Conversion Funnel      | `funnel` + `corporate-memphis`                 |
+| Process Cycles         | `circular-flow` + `craft-handmade`             |
+| Technical Explainer    | `structural-breakdown` + `technical-schematic` |
+| Metrics Dashboard      | `dashboard` + `corporate-memphis`              |
+| Educational Topic      | `bento-grid` + `chalkboard`                    |
+| Journey / Roadmap      | `winding-roadmap` + `storybook-watercolor`     |
+| Categorized Collection | `periodic-table` + `bold-graphic`              |
+| Product Guide          | `dense-modules` + `morandi-journal`            |
+| Technical Reference    | `dense-modules` + `pop-laboratory`             |
+| Trendy Guide           | `dense-modules` + `retro-pop-grid`             |
+| Educational Diagram    | `hub-spoke` + `hand-drawn-edu`                 |
+
+Default: `bento-grid` + `craft-handmade`
+
+## Core Principles
+
+1. **Data integrity is paramount** — never summarize, paraphrase, or alter source statistics. "73% increase" must stay "73% increase", not "significant increase".
+2. **Strip secrets** — always scan source content for API keys, tokens, or credentials before including in any output.
+3. **One message per section** — each infographic section conveys one clear concept. Overloading sections reduces readability.
+4. **Style consistency** — apply the chosen style consistently across the entire infographic. Don't mix styles.
+5. **Standalone HTML** — every output must open in a browser with zero dependencies. No build step, no external assets beyond CDN fonts/icons.
+
+## Workflow
+
+### Step 1: Analyze Content
+
+1. Identify the source content (user-provided text, file, URL, or topic)
+2. Analyze: topic, data type, complexity, tone, target audience
+3. Detect language
+4. Extract any design instructions from user input
+5. Determine the natural information structure (linear? comparative? hierarchical? cyclical?)
+
+### Step 2: Recommend Combination
+
+Based on the content analysis, recommend 2-3 layout × style combinations with rationale:
+
+```
+I'd recommend these combinations for your content:
+
+1. **bento-grid + craft-handmade** — Good for your multi-topic overview.
+   Warm, approachable feel for general audiences.
+
+2. **dashboard + corporate-memphis** — Highlights your metrics.
+   Clean, professional look for business context.
+
+3. **linear-progression + chalkboard** — Emphasizes your chronological flow.
+   Educational feel that suits the tutorial nature.
+
+Which one? Or describe what you're after and I'll adjust.
+```
+
+If the user already specified layout/style, skip this step.
+
+### Step 3: Confirm Options
+
+Confirm with the user:
+
+- **Layout + Style** combination
+- **Aspect ratio** (default: landscape for most, portrait for dense-modules)
+- **Language** (if ambiguous)
+
+If the user gave clear instructions, don't ask — just build.
+
+### Step 4: Build the Infographic
+
+Generate a **single, self-contained HTML file** with all CSS inlined. This is the core output.
+
+#### HTML Structure Template
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{Infographic Title}</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <!-- Google Font appropriate to the style -->
+    <style>
+      /* Style-specific CSS: colors, textures, decorative elements */
+      /* Layout-specific CSS: grid templates, flow, positioning */
+      /* Custom Tailwind config if needed via tailwind.config */
+    </style>
+    <script>
+      tailwind.config = {
+        theme: {
+          extend: {
+            /* Style-specific color palette */
+            /* Custom fonts */
+          },
+        },
+      }
+    </script>
+  </head>
+  <body>
+    <!-- HEADER: Title, subtitle, metadata -->
+    <!-- BODY: Layout-specific content sections -->
+    <!-- FOOTER: Sources, credits, date -->
+  </body>
+</html>
+```
+
+#### Layout Implementation Guidelines
+
+Each layout translates to specific CSS/HTML patterns:
+
+**bento-grid**: CSS Grid with `grid-template-areas` or `grid-template-columns`, varying cell sizes (span-2, span-3). Cards with distinct content types per cell.
+
+**linear-progression**: Vertical or horizontal flow with connecting lines/arrows between steps. Use `::before`/`::after` pseudo-elements for connectors. Number each stage.
+
+**binary-comparison**: Two-column split. Shared header row, mirrored structure. Color-code left vs right. Center divider line.
+
+**comparison-matrix**: `<table>` or CSS grid. Header row + header column. Cell content with icons/colors for at-a-glance scanning.
+
+**hierarchical-layers**: Stacked horizontal bands, widest at bottom (pyramid) or top. Each layer labeled with decreasing/increasing emphasis.
+
+**tree-branching**: Nested flex/grid containers. Lines connecting parent to children using borders or SVG paths.
+
+**hub-spoke**: Central circle/card with radiating connections to surrounding elements. Use CSS transforms for radial positioning or flexbox with absolute connectors.
+
+**structural-breakdown**: Exploded diagram style. Main element in center, callout labels pointing to parts. Use SVG lines or positioned connectors.
+
+**iceberg**: Two-zone layout — top (visible, above a wavy divider) and bottom (hidden, below). Wavy SVG border between zones. Below-surface has darker/deeper treatment.
+
+**bridge**: Left side (problem) → central bridge element → right side (solution). Visual arch or connecting structure.
+
+**funnel**: Progressively narrowing sections from top to bottom. Each stage labeled with metrics. Trapezoidal shapes via `clip-path` or borders.
+
+**isometric-map**: Grid of isometric-styled cards with subtle 3D transforms. `transform: rotateX(45deg) rotateZ(-45deg)` for iso effect, or just tilted cards.
+
+**dashboard**: KPI cards across top, charts/graphs in middle (use pure CSS bar charts, or inline SVG), detail tables at bottom. Grid-based.
+
+**periodic-table**: Dense grid of uniform small cards, color-coded by category. Each card: symbol/abbreviation, name, one key stat. Hover for details.
+
+**comic-strip**: Sequential panels in a row or grid. Panel borders with slight rotation. Speech bubbles via CSS. Panel numbering.
+
+**story-mountain**: SVG or CSS-shaped mountain curve. Plot points positioned along the ascending/descending arc. Labels at key positions.
+
+**jigsaw**: Interlocking shapes (use `clip-path` or SVG) with content inside each piece. Pieces should appear to fit together.
+
+**venn-diagram**: Overlapping circles (CSS border-radius: 50% with opacity) or SVG circles. Labels in each zone including intersection.
+
+**winding-roadmap**: S-curved path (SVG) with milestone markers along it. Content cards positioned at each milestone, alternating sides.
+
+**circular-flow**: Ring of connected stages. SVG circle path with positioned labels. Arrows indicating flow direction.
+
+**dense-modules**: Tightly packed content blocks, newspaper-style multi-column. High information density. Color-coded sections with clear headers.
+
+#### Style Implementation Guidelines
+
+Each style translates to specific CSS properties. Apply these consistently:
+
+**craft-handmade**: `background: #fdf6ec; font-family: 'Caveat', cursive;` Wavy borders (`border-radius: 30% 70% ...`), drop shadows that look like paper layers, tape/pin decorations via `::before`.
+
+**chalkboard**: `background: #2d3436; color: #dfe6e9;` Chalk-textured text (subtle text-shadow), slightly rough borders, dashed lines for divisions.
+
+**cyberpunk-neon**: `background: #0a0a0f;` Neon `text-shadow: 0 0 10px #0ff, 0 0 40px #0ff;` Glowing borders, scanline overlay, monospace fonts.
+
+**corporate-memphis**: Bright flat colors (#FF6B6B, #4ECDC4, #45B7D1, #FFA07A), geometric blob shapes as decorations, clean sans-serif, generous whitespace.
+
+**technical-schematic**: `background: #0a1628; color: #4fc3f7;` Grid pattern overlay, monospace font, technical crosshairs, coordinate labels at edges.
+
+**aged-academia**: `background: #f4e4c1;` Sepia tones, serif fonts (Georgia, 'Playfair Display'), ornamental dividers, vintage illustration style borders.
+
+**bold-graphic**: Thick black outlines (3-4px borders), halftone dot patterns (radial-gradient), primary color blocks, comic-style caption boxes.
+
+**pixel-art**: `font-family: 'Press Start 2P', monospace;` `image-rendering: pixelated;` Limited 16-color palette, sharp 90° edges, no border-radius.
+
+**kawaii**: Soft pastels (#FFB3BA, #BAFFC9, #BAE1FF, #FFFFBA), large border-radius (20px+), subtle bounce animations, rounded everything.
+
+**storybook-watercolor**: Soft gradient blobs as backgrounds, muted tones, organic non-geometric shapes, flowing layouts.
+
+**morandi-journal**: Muted warm palette (#C4B7A6, #A3B18A, #DDA15E, #BC6C25), slight rotation on elements (`transform: rotate(-1deg)`), doodle borders.
+
+**retro-pop-grid**: 70s palette (orange #E07A5F, brown #5C4033, teal #3D8B85, cream #F2CC8F), thick 3px outlines, strict grid alignment, blocky type.
+
+For all other styles, extrapolate similar CSS treatments from the style description.
+
+#### Visual Enhancement Techniques
+
+Use these pure-CSS techniques to elevate the infographic:
+
+```css
+/* Decorative blobs */
+.blob {
+  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
+}
+
+/* Subtle grid texture */
+.grid-bg {
+  background-image:
+    linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
+  background-size: 20px 20px;
+}
+
+/* Glow effect */
+.glow {
+  box-shadow: 0 0 15px rgba(var(--accent), 0.3);
+}
+
+/* Paper texture */
+.paper {
+  background: #fefefe;
+  background-image: url("data:image/svg+xml,..."); /* noise texture */
+  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+/* Connector lines between elements */
+.connector::after {
+  content: "";
+  position: absolute;
+  border-left: 2px dashed var(--accent);
+  height: 30px;
+}
+
+/* Number badges */
+.step-num {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+  font-size: 14px;
+}
+
+/* Stat callout */
+.stat {
+  font-size: 2.5rem;
+  font-weight: 800;
+  line-height: 1;
+}
+.stat-label {
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+}
+
+/* Icon circles */
+.icon-circle {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+}
+```
+
+Use emoji as icons (🎯 📊 🔥 ⚡ 🎨 💡 🔗 📈 🏆 ⭐ etc.) — they're free, universal, and need no external icon library.
+
+#### Aspect Ratio Implementation
+
+Set aspect ratio via CSS on the root container:
+
+```css
+.infographic-container {
+  max-width: 1200px; /* landscape */
+  /* OR max-width: 600px; for portrait */
+  /* OR max-width: 800px; for square */
+  margin: 0 auto;
+  padding: 2rem;
+}
+
+/* For print / save as PDF */
+@media print {
+  body {
+    margin: 0;
+  }
+  .infographic-container {
+    max-width: 100%;
+    padding: 1rem;
+  }
+}
+```
+
+- **Landscape (16:9)**: Wide, max-width ~1200px, horizontal layouts preferred
+- **Portrait (9:16)**: Tall, max-width ~600px, vertical scroll-friendly, good for mobile/social
+- **Square (1:1)**: max-width ~800px, balanced grid layouts
+
+### Step 5: Output
+
+Save the file and tell the user how to open it:
+
+```
+infographic/
+└── {topic-slug}.html
+```
+
+**Output structure:**
+
+- Directory: `infographic/` in project root
+- Filename: 2-4 word kebab-case slug from the topic (e.g., `ai-market-trends.html`)
+- If file exists: append timestamp (`-20260514-111200`)
+
+**How to open:**
+
+- **Windows (WSL):** `explorer.exe infographic/ai-market-trends.html`
+- **macOS:** `open infographic/ai-market-trends.html`
+- **Linux:** `xdg-open infographic/ai-market-trends.html`
+- **Or serve:** `bunx serve infographic/` and open in browser
+- **Save as image:** Open in browser → Ctrl+P → Save as PDF, or use a screenshot tool
+
+### Step 6: Summary
+
+Report what was created:
+
+- Topic and content summary
+- Layout and style used
+- Aspect ratio
+- Language
+- File path
+- How to open / view it
+
+## Quality Checklist
+
+Before delivering, verify:
+
+- [ ] HTML opens in browser with no errors (no missing closing tags, no broken CSS)
+- [ ] All source data preserved verbatim — no facts altered
+- [ ] Style is consistent throughout — no mixed visual languages
+- [ ] Text is readable — sufficient contrast, appropriate font sizes (min 12px body, 14px+ preferred)
+- [ ] Layout has visual hierarchy — title > section headers > body > captions
+- [ ] Responsive-ish — doesn't break horribly at common viewport widths
+- [ ] No external dependencies beyond CDN (Tailwind, Google Fonts) — works offline except for those
+- [ ] Emoji icons render correctly
+- [ ] No API keys, tokens, or secrets in output
+
+## Pitfalls
+
+1. **Wall of text** — An infographic is NOT a blog post in a fancy wrapper. Each section should be scannable in 3 seconds. If you're writing paragraphs, you're doing it wrong. Use bullet points, stats, short labels.
+2. **Inconsistent style** — Don't start with chalkboard and drift into corporate-memphis halfway through. Every element must belong to the same visual world.
+3. **Overcrowded layouts** — White space is a feature, not waste. Dense-modules is the only layout that should feel packed; everything else needs breathing room.
+4. **Broken HTML** — Always close all tags. Test that `<style>` blocks are complete. A missing `}` kills the entire visual.
+5. **Tiny text** — Infographics are meant to be read at a glance. Minimum font size: 12px for captions, 16px for body, 24px+ for headings.
+6. **AI slop indicators** — Avoid: centered-everything layouts, purple gradients everywhere, uniform rounded corners on all elements, generic stock-photo energy. Make deliberate, opinionated design choices.
+7. **Ignoring the layout contract** — If the user chose `funnel`, the output must look like a funnel. Don't produce a generic grid and call it a funnel.
+
+## Examples
+
+### Minimal prompt → full infographic
+
+**User says:** "Make an infographic about the JavaScript ecosystem in 2025"
+
+**Agent does:**
+
+1. Analyzes: broad tech topic, multiple subtopics, general dev audience
+2. Recommends: `bento-grid` + `corporate-memphis` (multi-topic, modern feel)
+3. Confirms or proceeds
+4. Builds `infographic/js-ecosystem-2025.html` with sections for: frameworks, runtimes, package managers, build tools, testing, trends — each in its own bento cell with icon, stat, and 1-2 line description
+5. Delivers file path and open command
+
+### Specific request
+
+**User says:** "Funnel infographic of our sales pipeline, cyberpunk style, portrait"
+
+**Agent does:**
+
+1. Uses `funnel` + `cyberpunk-neon`, portrait aspect
+2. No recommendation step needed — user was specific
+3. Builds immediately with neon glow stages narrowing downward
+4. Delivers
+
+## Attribution
+
+Adapted from the [baoyu-infographic](https://github.com/JimLiu/baoyu-skills) skill by 宝玉 (JimLiu), MIT License. Redesigned for PLCODE's HTML-first, standalone-file workflow.

package/.plcode/skill/experimental/llm-application-dev/SKILL.md

@@ -0,0 +1,221 @@
+---
+name: llm-application-dev
+description: Building applications with Large Language Models - prompt engineering, RAG patterns, and LLM integration. Use for AI-powered features, chatbots, or LLM-based automation.
+category: meta
+source: wshobson/agents
+license: MIT
+---
+
+# LLM Application Development
+
+## Prompt Engineering
+
+### Structured Prompts
+
+```typescript
+const systemPrompt = `You are a helpful assistant that answers questions about our product.
+
+RULES:
+- Only answer questions about our product
+- If you don't know, say "I don't know"
+- Keep responses concise (under 100 words)
+- Never make up information
+
+CONTEXT:
+{context}`
+
+const userPrompt = `Question: {question}`
+```
+
+### Few-Shot Examples
+
+```typescript
+const prompt = `Classify the sentiment of customer feedback.
+
+Examples:
+Input: "Love this product!"
+Output: positive
+
+Input: "Worst purchase ever"
+Output: negative
+
+Input: "It works fine"
+Output: neutral
+
+Input: "${customerFeedback}"
+Output:`
+```
+
+### Chain of Thought
+
+```typescript
+const prompt = `Solve this step by step:
+
+Question: ${question}
+
+Let's think through this:
+1. First, identify the key information
+2. Then, determine the approach
+3. Finally, calculate the answer
+
+Step-by-step solution:`
+```
+
+## API Integration
+
+### OpenAI Pattern
+
+```typescript
+import OpenAI from "openai"
+
+const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY })
+
+async function chat(messages: Message[]): Promise<string> {
+  const response = await openai.chat.completions.create({
+    model: "gpt-4",
+    messages,
+    temperature: 0.7,
+    max_tokens: 500,
+  })
+
+  return response.choices[0].message.content ?? ""
+}
+```
+
+### Anthropic Pattern
+
+```typescript
+import Anthropic from "@anthropic-ai/sdk"
+
+const anthropic = new Anthropic({ apiKey: process.env.ANTHROPIC_API_KEY })
+
+async function chat(prompt: string): Promise<string> {
+  const response = await anthropic.messages.create({
+    model: "claude-3-opus-20240229",
+    max_tokens: 1024,
+    messages: [{ role: "user", content: prompt }],
+  })
+
+  return response.content[0].type === "text" ? response.content[0].text : ""
+}
+```
+
+### Streaming Responses
+
+```typescript
+async function* streamChat(prompt: string) {
+  const stream = await openai.chat.completions.create({
+    model: "gpt-4",
+    messages: [{ role: "user", content: prompt }],
+    stream: true,
+  })
+
+  for await (const chunk of stream) {
+    const content = chunk.choices[0]?.delta?.content
+    if (content) yield content
+  }
+}
+```
+
+## RAG (Retrieval-Augmented Generation)
+
+### Basic RAG Pipeline
+
+```typescript
+async function ragQuery(question: string): Promise<string> {
+  // 1. Embed the question
+  const questionEmbedding = await embedText(question)
+
+  // 2. Search vector database
+  const relevantDocs = await vectorDb.search(questionEmbedding, { limit: 5 })
+
+  // 3. Build context
+  const context = relevantDocs.map((d) => d.content).join("\n\n")
+
+  // 4. Generate answer
+  const prompt = `Answer based on this context:\n${context}\n\nQuestion: ${question}`
+  return await chat(prompt)
+}
+```
+
+### Document Chunking
+
+```typescript
+function chunkDocument(text: string, options: ChunkOptions): string[] {
+  const { chunkSize = 1000, overlap = 200 } = options
+  const chunks: string[] = []
+
+  let start = 0
+  while (start < text.length) {
+    const end = Math.min(start + chunkSize, text.length)
+    chunks.push(text.slice(start, end))
+    start += chunkSize - overlap
+  }
+
+  return chunks
+}
+```
+
+### Embedding Storage
+
+```typescript
+// Using Supabase with pgvector
+async function storeEmbeddings(docs: Document[]) {
+  for (const doc of docs) {
+    const embedding = await embedText(doc.content)
+
+    await supabase.from("documents").insert({
+      content: doc.content,
+      metadata: doc.metadata,
+      embedding: embedding, // vector column
+    })
+  }
+}
+
+async function searchSimilar(query: string, limit = 5) {
+  const embedding = await embedText(query)
+
+  const { data } = await supabase.rpc("match_documents", {
+    query_embedding: embedding,
+    match_count: limit,
+  })
+
+  return data
+}
+```
+
+## Error Handling
+
+```typescript
+async function safeLLMCall<T>(fn: () => Promise<T>, options: { retries?: number; fallback?: T }): Promise<T> {
+  const { retries = 3, fallback } = options
+
+  for (let i = 0; i < retries; i++) {
+    try {
+      return await fn()
+    } catch (error) {
+      if (error.status === 429) {
+        // Rate limit - exponential backoff
+        await sleep(Math.pow(2, i) * 1000)
+        continue
+      }
+      if (i === retries - 1) {
+        if (fallback !== undefined) return fallback
+        throw error
+      }
+    }
+  }
+  throw new Error("Max retries exceeded")
+}
+```
+
+## Best Practices
+
+- **Token Management**: Track usage and set limits
+- **Caching**: Cache embeddings and common queries
+- **Evaluation**: Test prompts with diverse inputs
+- **Guardrails**: Validate outputs before using
+- **Logging**: Log prompts and responses for debugging
+- **Cost Control**: Use cheaper models for simple tasks
+- **Latency**: Stream responses for better UX
+- **Privacy**: Don't send PII to external APIs