manigent-server 0.1.0__py3-none-any.whl

manigent/_catalog/skills/playwright-save-skill/SKILL.md

@@ -0,0 +1,149 @@
+---
+name: playwright-save-skill
+description: Crystallize a successful playwright-browser explore (prior turn drove `manigent browser` CLI subcommands via Bash) into a single SKILL.md workflow document that's replayable as `/personal:<name>`. The saved file mixes natural-language steps (where judgment lives) with concrete `manigent browser` invocations (where deterministic mechanism lives). Use ONLY when (a) the user just asked to save what just happened, AND (b) the prior turn drove the `playwright-browser` skill (you shelled `manigent browser navigate`, `manigent browser snapshot`, `manigent browser click`, etc.) AND `$MANIGENT_AGENT_DIR/personal-skill-hub/_explore/<task-id>/recording.md` exists on disk. For non-Playwright work — including saving a WebFetch-based procedure as a generic personal skill — let `/manigent:reflect`'s Promote mode handle it; do not invoke this skill.
+---
+
+# Save a Playwright explore as a workflow SKILL.md
+
+Owns one job: take the recording from the explore (`$MANIGENT_AGENT_DIR/personal-skill-hub/_explore/<task-id>/recording.md`) and crystallize it as `personal-skill-hub/skills/<name>/SKILL.md` — a single markdown file that other turns of you can read top-to-bottom and re-execute against new inputs.
+
+The saved file is the **only** thing that runs at replay time. There's no separate test script, no `.feature` file, no sidecar. Correctness comes from two layers:
+- **User review** — you show the candidate markdown before saving so the user can catch design issues (wrong parameterization, missing branch, drifted intent).
+- **Verify-replay** — you re-run the candidate against the seed input and confirm it reproduces the explore output, catching mechanical drift (a step got dropped, a value didn't get parameterized).
+
+## Carve-out check (run before doing anything)
+
+Two conditions must both hold. If either fails, **stop** and explain:
+
+1. **A Playwright recording exists for the current task.** The prior turn drove the `playwright-browser` skill via Bash (visible `manigent browser navigate` / `manigent browser snapshot` / `manigent browser click` / etc. invocations) AND `$MANIGENT_AGENT_DIR/personal-skill-hub/_explore/<task-id>/recording.md` exists on disk.
+
+   If not, reply: "I don't see a recent Playwright recording to save. If you want to save a non-Playwright procedure as a personal skill, that's `/manigent:reflect`'s Promote mode — try asking again after a regular reply." Stop.
+
+2. **The user actually asked to save the *Playwright* run.** If the prior turn used `WebFetch` (or any tool other than `manigent browser`), this is the wrong skill — even if a stale `_explore/` dir exists. Reply with the same message as (1). Stop.
+
+If both hold, proceed.
+
+## Save procedure
+
+### Step 1 — Read the recording
+
+Read `$MANIGENT_AGENT_DIR/personal-skill-hub/_explore/<task-id>/recording.md`. It contains the verbatim sequence of `manigent browser <subcmd>` invocations you ran during the explore, interleaved with notes about what each step accomplished and what judgments you made.
+
+### Step 2 — Ask for the user's description / SOP (if not already supplied)
+
+The recording captures *what* happened; the user's description captures *why* — the intent that should generalize to new inputs. Examples: "find the best price for any wine query", "scrape the most contrarian view article on a topic", "log my hours for a given client and date range".
+
+If the user's save request already included this ("save this as a skill for finding best wine prices"), use it as-is. Otherwise, reply with one focused question:
+
+> What's this skill for? A one-line description plus any rules for how it should generalize (e.g. "find best price for wine X; prefer in-stock distributors; skip non-US sellers"). I'll show you the candidate markdown before saving.
+
+Wait for the answer.
+
+### Step 3 — One-pass translation
+
+Generate a candidate SKILL.md combining the recording + description into one document:
+
+- **Frontmatter**: `name`, `description` (from user input), `inputs` declaring parameters with type + comment.
+- **Deterministic steps**: one numbered step per CLI invocation sequence, with a fenced `bash` block holding the verbatim `manigent browser` call(s). Use the real positional CLI — `navigate <url>`, `fill '<selector>' '<value>'`, `click '<selector>'`, `press-key <key>` (selectors are Playwright's, not `--ref`). Replace seed-specific literals with `{{input.<name>}}` placeholders. Always pass `--storage <name>` (agent-level identity) and `--session <dir>` (project-level working state, default `$PWD/.playwright-session`) so the saved skill replays against the same browser state model the explore used. See `skills/playwright-browser/SKILL.md` for the two-tier state contract. These calls auto-route to a running browser daemon (fast path) when present and fall back to one-shot otherwise — same commands either way, so nothing extra to record; replay is just faster when a daemon is up.
+- **Judgment steps**: one numbered step per decision, in natural language, encoding the rule (not the seed-specific outcome). The user's description shapes how you phrase these — if they said "prefer in-stock distributors", that becomes the rule under the "pick a result" step.
+- **Branches**: preserve conditional paths the explore actually took (e.g. "no match → try alternative query, at most twice").
+
+Worked shape:
+
+````markdown
+---
+name: search-provi-skill
+description: Look up wine pricing on Provi by fuzzy query
+inputs:
+  query: string  # e.g. "Pacalet Gevrey-Chambertin 2022"
+---
+
+# search-provi-skill
+
+Look up the buy-box pricing for a wine on app.provi.com. Handles fuzzy queries by letting the caller pick the best result and retrying with an alternative if no match is found.
+
+## Workflow
+
+### Step 1 — Visit the Provi homepage
+
+```bash
+manigent browser navigate https://app.provi.com \
+  --storage provi --session "$PWD/.playwright-session"
+manigent browser snapshot \
+  --storage provi --session "$PWD/.playwright-session"
+```
+
+### Step 2 — Check if the session is signed in
+
+Read the snapshot from Step 1. If you see a sign-in form, "Log in to continue" message, or any indication the session is logged out, the login has expired — reply with the auth handoff (`manigent browser start --storage provi`, or `auth` for the one-shot fallback) and stop.
+
+### Step 3 — Submit the search query
+
+Selectors are Playwright's (CSS / `text=` / `role=`), derived from the current snapshot — positional, not flags:
+
+```bash
+manigent browser navigate https://app.provi.com/product_listing \
+  --storage provi --session "$PWD/.playwright-session"
+manigent browser snapshot \
+  --storage provi --session "$PWD/.playwright-session"
+manigent browser fill 'input[name="search"]' "{{input.query}}" \
+  --storage provi --session "$PWD/.playwright-session"
+manigent browser press-key Enter \
+  --storage provi --session "$PWD/.playwright-session"
+manigent browser snapshot \
+  --storage provi --session "$PWD/.playwright-session"
+```
+
+### Step 4 — Find the best matching result
+
+Read the result list from Step 3's snapshot. Pick the wine that best matches `{{input.query}}` — consider producer, wine name, vintage, region, appellation. Match by semantic intent, not literal substring.
+
+- **Clear match** → click it: `manigent browser click 'text=<result title>' --storage provi --session "$PWD/.playwright-session"`, then snapshot, continue to Step 5.
+- **No clear match** → derive an alternative query (drop vintage, broaden producer to last name only); set `{{input.query}}` to the alternative and re-run from Step 3. Give up after 2 alternatives.
+
+### Step 5 — Extract pricing
+
+Read the product page snapshot from Step 4. Extract `case_price`, `bottle_price`, `vintage`, `format`, `distributor`. Return as a markdown table.
+````
+
+That's the entire saved skill. ~100 lines.
+
+### Step 4 — Show the candidate to the user
+
+Reply with the candidate SKILL.md inline (or write it to `/tmp/_save_candidate.md` and reference the path if it's long). Ask:
+
+> Here's the candidate skill. Review and reply 'looks good' to save, or tell me what to change.
+
+Loop on edits. Don't proceed to verify-replay until the user has confirmed.
+
+### Step 5 — Verify replay against the seed input
+
+Once the user approves, write the candidate to `/tmp/_save_candidate.md`. Then read it back as if you were a fresh turn invoked via `/personal:<name>` with the same input the explore used. Walk it top-to-bottom: execute each `bash` block (shelling `manigent browser <subcmd>` for each call), apply judgment to each natural-language step, see if the final output matches what the explore returned.
+
+- **Match** → proceed to atomic move.
+- **Drift** → the transcription doesn't reproduce what was actually done. Common causes: a step got dropped during translation, a parameterization leaked (some seed value wasn't replaced), the wrong branch was preserved. Reply with the diff between explore output and replay output; offer to re-translate.
+
+This is the mechanical safety net. User review catches design issues; verify-replay catches mechanical bugs.
+
+### Step 6 — Atomic move
+
+Create the target dir and write the verified SKILL.md:
+
+```bash
+mkdir -p "$MANIGENT_AGENT_DIR/personal-skill-hub/skills/<name>"
+mv /tmp/_save_candidate.md "$MANIGENT_AGENT_DIR/personal-skill-hub/skills/<name>/SKILL.md"
+```
+
+Clean up `_explore/<task-id>/` — it's just the recording at this point and the SKILL.md supersedes it.
+
+The skill is now invokable as `/personal:<name>` on the next Claude subprocess spawn. Tell the user.
+
+## Things to NOT do
+
+- Do not invoke this skill if no Playwright recording exists for the current task. Re-read the carve-out check.
+- Do not skip the user-review step. The verify-replay step catches mechanical drift but won't catch design issues (wrong scope, missing branch, intent mismatch) — only the user can.
+- Do not skip the verify-replay step. User review catches design issues but won't catch transcription bugs (a step dropped, a literal value not parameterized) — only re-running can.
+- Do not "fix bugs" in the recording during translation. If the explore had a wart, the saved skill inherits it (you can re-explore later to clean up). The recording is the source of truth.
+- Do not save anything outside `personal-skill-hub/skills/<name>/SKILL.md`. No sidecar files. No script. No MANIFEST. The single-file rule is what makes the saved skill auditable.
+- Do not embed scoring functions, picking heuristics, or "is this right?" regex in any `bash` block. Those decisions belong in natural-language steps where the replay-time LLM applies judgment with full context.
+- Do not delete `_explore/<task-id>/` until Step 6 has succeeded. If verify-replay fails, the user can ask you to retry and the recording is still on disk.

manigent/_catalog/skills/registry.json

@@ -0,0 +1,166 @@
+[
+  {
+    "name": "web-artifacts",
+    "summary": "Build interactive single-file HTML dashboards and charts.",
+    "description": "Create interactive single-file HTML artifacts with React, Tailwind, and Chart.js",
+    "tags": ["frontend", "react", "ui", "dashboard"],
+    "version": "1.0.0",
+    "attribution": null
+  },
+  {
+    "name": "playwright-browser",
+    "summary": "Drive a real Chrome browser to do what WebFetch can't — logins, JS-rendered pages, and multi-step flows.",
+    "description": "Drive Chrome via Python playwright through `manigent browser` CLI subcommands (navigate/snapshot/click/fill/press-key/screenshot/wait-for, plus start/stop/auth) when WebFetch can't do the job — login required, JavaScript-rendered UI, or multi-step interaction. Optional fast path: `manigent browser start` runs one long-lived browser per agent (a tab per project) so actions auto-route to it with no cold start and login stays live; the agent may start it but never stops it (user-managed). Two-tier state: agent-level `--storage <name>` identity (signed in via `manigent browser start` or `auth`) + project-level `--session <dir>` working state (default `$PWD/.playwright-session`). Setup: `manigent bootstrap browser` once per runner; sign in per agent identity via `manigent browser start --storage <name>`. Pairs with `playwright-save-skill`.",
+    "tags": ["browser", "automation", "playwright", "web"],
+    "version": "1.0.0",
+    "attribution": null
+  },
+  {
+    "name": "playwright-save-skill",
+    "summary": "Turn a successful browser session into a replayable saved skill.",
+    "description": "Crystallize a successful `playwright-browser` explore (prior turn drove `manigent browser` CLI subcommands via Bash; recording lives at `$MANIGENT_AGENT_DIR/personal-skill-hub/_explore/<task-id>/recording.md`) into a single SKILL.md replayable as `/personal:<name>`. Translates the recorded steps into a mix of natural-language judgment (where intent generalizes) and concrete `manigent browser` CLI invocations (where mechanism is deterministic). Shows the candidate markdown to the user for review before saving; verify-replay confirms it reproduces the explore output. Skip for non-Playwright work — let `/manigent:reflect`'s Promote handle that.",
+    "tags": ["browser", "playwright", "skill-authoring"],
+    "version": "1.0.0",
+    "attribution": null
+  },
+  {
+    "name": "photo-story",
+    "summary": "Build Spotify-Wrapped-style photo story pages and curate big libraries down to the best shots.",
+    "description": "Build animated single-file HTML 'year story' / 'trip story' artifacts (Spotify-Wrapped style) and run the curator funnel that gets a 1k–10k photo library down to ~50 keepers without melting context. Two halves in one skill.",
+    "tags": ["photos", "memories", "html", "animation", "scrollytelling"],
+    "version": "1.0.0",
+    "attribution": null
+  },
+  {
+    "name": "brief",
+    "summary": "Publish and refresh briefing tiles in My Desk's Scheduled briefings.",
+    "description": "Tab publishing protocol for My Desk's Scheduled briefings. Any agent can populate a briefing on its own cadence — gather data, write a short render JS body (function(mount, data, lib)), and shell `manigent brief upsert-tab <slug>` to upload. My Desk composes all uploaded tabs into a tile strip; each tab tracks its own last_refreshed_at. Invoked on two conditions: a '<!-- manigent:brief-tab-trigger:<slug> -->' marker (per-tab cron path), or a direct request to publish/refresh/update a briefing. No central config — briefings are discovered by presence.",
+    "tags": ["briefing", "daily", "html", "publishing"],
+    "version": "1.0.0",
+    "attribution": null
+  },
+  {
+    "name": "gmail",
+    "summary": "Read, search, send, and archive Gmail messages.",
+    "description": "Read, search, send, and archive Gmail messages via `manigent gmail {search,get,labels,attachment,send,archive,auth,revoke}` Bash subcommands. Archive removes the INBOX label (reversible with `archive --undo`; nothing is deleted). These commands only fetch and act — where fetched mail is stored, how it is deduplicated, and how incremental fetches are tracked is up to the agent's SOP. Requires Google OAuth — Authenticate via Agent Settings → Skills → gmail before first use. Token resolves from `$MANIGENT_AGENT_DIR/skill-hub/state/gmail/`.",
+    "tags": ["google", "email", "communication"],
+    "version": "1.0.0",
+    "attribution": "Built on google-api-python-client",
+    "auth": {
+      "method": "google_oauth_installed",
+      "scopes": ["https://www.googleapis.com/auth/gmail.modify"],
+      "token_file": "token.json"
+    }
+  },
+  {
+    "name": "homekit",
+    "summary": "Control Apple HomeKit devices through macOS Shortcuts.",
+    "description": "Apple HomeKit via the macOS `shortcuts` CLI. Two subcommands: `manigent homekit list-shortcuts` to enumerate the user's Shortcuts and `manigent homekit run-shortcut \"<name>\"` to invoke one. macOS 12+ only. No OAuth, no config — the Shortcuts app is the contract.",
+    "tags": ["apple", "smart-home", "macos", "household"],
+    "version": "1.0.0",
+    "attribution": null
+  },
+  {
+    "name": "media",
+    "summary": "Generate image / audio / video from a text prompt.",
+    "description": "Generate media via `manigent media image|audio|video --prompt \"...\"`. Backend is chosen by `--provider` or the per-agent config (image: openai/gemini/nano-banana; audio: openai/elevenlabs/gemini TTS; video: replicate/fal gateways → Veo, Kling, ...). Settings resolve flag > config > env > default; keys + output_dir live in `$MANIGENT_AGENT_DIR/skill-hub/configs/media.json`. Returns `{media_path, media_type, provider, model, ...}` — the file lands on disk; share it with `update_file`. No OAuth.",
+    "tags": ["image", "audio", "video", "generation", "tts", "openai", "gemini", "elevenlabs", "replicate"],
+    "version": "1.0.0",
+    "attribution": null
+  },
+  {
+    "name": "google-calendar",
+    "summary": "List and manage Google Calendar events.",
+    "description": "Google Calendar (list / get / create / update / delete) via `manigent gcal {calendars,list-events,get,create,update,delete,auth,revoke}` Bash subcommands. These commands only fetch and act — where fetched events are stored, how they are deduplicated, and how incremental fetches are tracked is up to the agent's SOP. Requires Google OAuth — Authenticate via Agent Settings → Skills → google-calendar. Token resolves from `$MANIGENT_AGENT_DIR/skill-hub/state/google-calendar/`.",
+    "tags": ["google", "calendar", "scheduling"],
+    "version": "1.0.0",
+    "attribution": "Built on google-api-python-client",
+    "auth": {
+      "method": "google_oauth_installed",
+      "scopes": ["https://www.googleapis.com/auth/calendar"],
+      "token_file": "token.json"
+    }
+  },
+  {
+    "name": "google-drive",
+    "summary": "Search and read Google Drive files and Sheets (read-only).",
+    "description": "Google Drive read-only (search / read) via `manigent gdrive {search,get,auth,revoke}` Bash subcommands. Google Docs / Slides export as text, Sheets as first-tab TSV. These commands only fetch — where fetched files are stored, how they are deduplicated, and how incremental fetches are tracked is up to the agent's SOP. Requires Google OAuth (drive.readonly).",
+    "tags": ["google", "drive", "documents", "data"],
+    "version": "1.0.0",
+    "attribution": "Built on google-api-python-client",
+    "auth": {
+      "method": "google_oauth_installed",
+      "scopes": ["https://www.googleapis.com/auth/drive.readonly"],
+      "token_file": "token.json"
+    }
+  },
+  {
+    "name": "google-drive-write",
+    "summary": "Read and write rows in specific Google Sheets.",
+    "description": "Google Sheets read+write (per-target) via `manigent gdrive-write {read-rows,append-rows,update-cell,auth}`. Each named target binds one spreadsheet's tab + id-column. Separate from `google-drive` so the sheets-write OAuth scope is opt-in. No sync trigger — used inline by content-engine pipelines (e.g. marketing template's instagram agent: read brief → generate image → write back).",
+    "tags": ["google", "sheets", "marketing", "write"],
+    "version": "1.0.0",
+    "attribution": "Built on google-api-python-client",
+    "auth": {
+      "method": "google_oauth_installed",
+      "scopes": ["https://www.googleapis.com/auth/spreadsheets"],
+      "token_file": "token.json"
+    }
+  },
+  {
+    "name": "mailbox",
+    "summary": "Read and send email over any IMAP/SMTP mailbox (no OAuth).",
+    "description": "IMAP+SMTP mailbox (search / read / attachment / send) via `manigent mailbox {list-folders,search,get,attachment,send}`. Provider-agnostic (Gmail app-password / iCloud / Fastmail / Outlook / ProtonMail Bridge / self-hosted). These commands only fetch and send — where fetched mail is stored, how it is deduplicated, and how incremental fetches are tracked is up to the agent's SOP. No OAuth — credentials via `${VAR}` env vars referenced from `$MANIGENT_AGENT_DIR/skill-hub/configs/mailbox.json`.",
+    "tags": ["email", "imap", "smtp"],
+    "version": "1.0.0",
+    "attribution": null
+  },
+  {
+    "name": "calendar",
+    "summary": "List and manage calendar events over any CalDAV server (no OAuth).",
+    "description": "CalDAV calendar (list / events / create / update / delete) via `manigent caldav {list,list-events,get,create,update,delete}`. Provider-agnostic (iCloud / Fastmail / Nextcloud / Radicale / SOGo / mailcow). These commands only fetch and act — where fetched events are stored, how they are deduplicated, and how incremental fetches are tracked is up to the agent's SOP. No OAuth — credentials via `${VAR}` env vars.",
+    "tags": ["calendar", "caldav", "scheduling"],
+    "version": "1.0.0",
+    "attribution": null
+  },
+  {
+    "name": "http-api",
+    "summary": "Call any HTTP/REST API, with cookie sessions and declared success checks.",
+    "description": "Generic HTTP client via `manigent http-api {get,post,put,patch,delete} <url>` with `-H` (env-expanded `$VAR`), `--query`, `--data` / `--json`, a curl-style cookie session jar (`--save-session` / `--session`), and `--expect-location` / `--expect-status` to declare what success looks like. These commands only fetch and act — where fetched data is stored, how it is deduplicated, and how incremental fetches are tracked is up to the agent's SOP. No config.",
+    "tags": ["http", "rest", "api"],
+    "version": "1.0.0",
+    "attribution": null
+  },
+  {
+    "name": "osxphotos",
+    "summary": "Read macOS Photos metadata and export photos as JPEG.",
+    "description": "macOS Photos library (read-only metadata + paths, plus ≤256KB JPEG export for vision Read) via `manigent osxphotos {list-albums,list-photos,export,export-jpeg}`. These commands only fetch — where fetched metadata is stored, how it is deduplicated, and how incremental fetches are tracked is up to the agent's SOP. macOS only; requires `osxphotos` + Full Disk Access on the Python interpreter.",
+    "tags": ["apple", "photos", "macos", "memories"],
+    "version": "1.0.0",
+    "attribution": "Built on osxphotos"
+  },
+  {
+    "name": "ib",
+    "summary": "Read-only Interactive Brokers: positions, cost basis, PnL, prices, and news for US equities and bonds.",
+    "description": "STRICTLY READ-ONLY Interactive Brokers integration. Fetches positions, cost basis, PnL, current prices, historic prices, and news for US equities and bonds via `manigent ib {positions,cost-basis,pnl,price,history,news-providers,news,news-article,doctor}`, talking to a human-operated TWS / IB Gateway over the ib_async socket API. No order/buy/sell/cancel path exists (CI-enforced by tests/test_ib_readonly_guard.py). Market data is LIVE by default; delayed data only under --allow-delayed and always tagged data_type=delayed. Missing paid subscriptions surface as a typed not_subscribed error, never empty data. Bonds resolve by CUSIP->conId and quote clean price with accrued interest reported as a separate field. IB pacing/rate limits are persisted on disk across the per-call processes. Connection coordinates (host/port/clientId/account, no credentials) resolve from $MANIGENT_AGENT_DIR/skill-hub/configs/ib.json.",
+    "tags": ["finance", "interactive-brokers", "read-only", "market-data"],
+    "version": "1.0.0",
+    "attribution": null
+  },
+  {
+    "name": "grill-me",
+    "summary": "Find the real question behind a decision before you spend a project on the wrong one.",
+    "description": "Narrows a fuzzy decision to the real question. In a DM: one question per turn, each building on the last answer, stopping at about 8 turns or once the brief stops changing, and ending in a five-part brief (decision, real question, current bet, evidence that would change my mind, out of scope) closed by the fixed line 'Real question changed from your first message: yes|no (self-graded)'. Inside a project: never interviews the user; reviews PLAN.md against the brief once before acceptance and the final report against 'evidence that would change my mind' once, with every objection naming the brief part a milestone fails to serve.",
+    "tags": ["thinking", "decision", "coaching"],
+    "version": "1.0.0",
+    "attribution": null
+  },
+  {
+    "name": "broaden-options",
+    "summary": "Widen your options when you're stuck, then narrow to the 2-3 worth testing.",
+    "description": "Asks for the user's ideas first and labels every idea [yours] or [mine]. Diagnoses why the user is stuck (too few ideas, options all alike, afraid of risk, too close to it) and generates with one matching technique at a time, without judging. Always adds the baselines do nothing / do both / one then the other, and stops generating when ideas repeat. Then narrows to 2-3 options screened on impact, effort and reversibility, each with the cheapest test that would show whether it works. Switches to grill-me first when the decision the options serve is unclear.",
+    "tags": ["thinking", "decision", "brainstorming"],
+    "version": "1.0.0",
+    "attribution": null
+  }
+]

manigent/_catalog/skills/web-artifacts/SKILL.md

@@ -0,0 +1,194 @@
+---
+name: web-artifacts
+description: >
+  Create interactive single-file HTML artifacts with React, Tailwind CSS, and Chart.js.
+  Use when users ask for dashboards, interactive UIs, data visualizations,
+  landing pages, forms, or any rich web-based deliverable.
+---
+
+# Web Artifacts Builder
+
+Create self-contained, interactive HTML files that work by opening directly in a browser. Each artifact is a single `.html` file with inline CSS and JavaScript — no build step, no server required.
+
+**Not for explanations.** If the user needs an answer explained — a diagram, an option comparison, a long write-up — use the built-in `explain-as-page` skill instead: a Markdown reply plus one static page. Use this skill only when the deliverable is something the user interacts with (a dashboard, a form, a calculator).
+
+## Architecture
+
+Every artifact follows this template structure:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>ARTIFACT_TITLE</title>
+  <!-- Tailwind CSS via CDN -->
+  <script src="https://cdn.tailwindcss.com"></script>
+  <!-- React via CDN -->
+  <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
+  <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
+  <!-- Babel for JSX -->
+  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+  <!-- Chart.js (if data viz needed) -->
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+</head>
+<body class="bg-gray-50 min-h-screen">
+  <div id="root"></div>
+  <script type="text/babel">
+    // React components here
+    function App() {
+      return (
+        <div className="container mx-auto px-4 py-8">
+          <h1 className="text-3xl font-bold text-gray-900">Title</h1>
+        </div>
+      );
+    }
+    ReactDOM.createRoot(document.getElementById('root')).render(<App />);
+  </script>
+</body>
+</html>
+```
+
+## CDN Libraries Available
+
+| Library | CDN URL | Use Case |
+|---------|---------|----------|
+| React 18 | `unpkg.com/react@18` | UI components |
+| Tailwind CSS | `cdn.tailwindcss.com` | Styling |
+| Chart.js | `cdn.jsdelivr.net/npm/chart.js` | Charts and graphs |
+| Lucide Icons | `unpkg.com/lucide-react` | Icons |
+| D3.js | `cdn.jsdelivr.net/npm/d3@7` | Advanced data viz |
+| Marked | `cdn.jsdelivr.net/npm/marked` | Markdown rendering |
+
+## Patterns
+
+### Interactive Dashboard with Filters
+
+```jsx
+function Dashboard() {
+  const [filter, setFilter] = React.useState('all');
+  const [data] = React.useState([
+    { category: 'A', value: 42 },
+    { category: 'B', value: 28 },
+  ]);
+
+  const filtered = filter === 'all'
+    ? data
+    : data.filter(d => d.category === filter);
+
+  return (
+    <div className="space-y-6">
+      <select
+        value={filter}
+        onChange={e => setFilter(e.target.value)}
+        className="px-3 py-2 border rounded-lg"
+      >
+        <option value="all">All</option>
+        <option value="A">Category A</option>
+        <option value="B">Category B</option>
+      </select>
+
+      <div className="grid grid-cols-3 gap-4">
+        {filtered.map(d => (
+          <div key={d.category} className="bg-white p-4 rounded-lg shadow">
+            <p className="text-sm text-gray-500">{d.category}</p>
+            <p className="text-2xl font-bold">{d.value}</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+```
+
+### Chart.js Integration
+
+```jsx
+function ChartComponent({ data, labels }) {
+  const canvasRef = React.useRef(null);
+
+  React.useEffect(() => {
+    const ctx = canvasRef.current.getContext('2d');
+    const chart = new Chart(ctx, {
+      type: 'bar',
+      data: {
+        labels,
+        datasets: [{
+          label: 'Values',
+          data,
+          backgroundColor: 'rgba(99, 102, 241, 0.5)',
+          borderColor: 'rgb(99, 102, 241)',
+          borderWidth: 1,
+        }],
+      },
+      options: { responsive: true, plugins: { legend: { display: false } } },
+    });
+    return () => chart.destroy();
+  }, [data, labels]);
+
+  return <canvas ref={canvasRef} />;
+}
+```
+
+### Responsive Data Table
+
+```jsx
+function DataTable({ rows, columns }) {
+  const [sortCol, setSortCol] = React.useState(null);
+  const [sortAsc, setSortAsc] = React.useState(true);
+
+  const sorted = React.useMemo(() => {
+    if (!sortCol) return rows;
+    return [...rows].sort((a, b) => {
+      const cmp = a[sortCol] < b[sortCol] ? -1 : a[sortCol] > b[sortCol] ? 1 : 0;
+      return sortAsc ? cmp : -cmp;
+    });
+  }, [rows, sortCol, sortAsc]);
+
+  return (
+    <div className="overflow-x-auto">
+      <table className="min-w-full divide-y divide-gray-200">
+        <thead className="bg-gray-50">
+          <tr>
+            {columns.map(col => (
+              <th
+                key={col}
+                onClick={() => {
+                  setSortAsc(sortCol === col ? !sortAsc : true);
+                  setSortCol(col);
+                }}
+                className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase cursor-pointer hover:bg-gray-100"
+              >
+                {col} {sortCol === col ? (sortAsc ? '↑' : '↓') : ''}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody className="bg-white divide-y divide-gray-200">
+          {sorted.map((row, i) => (
+            <tr key={i} className="hover:bg-gray-50">
+              {columns.map(col => (
+                <td key={col} className="px-4 py-3 text-sm text-gray-900">
+                  {row[col]}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+```
+
+## Guidelines
+
+- **Single file**: Everything in one `.html` file — no external files, no build step
+- **CDN only**: Load libraries from CDNs, never reference local files
+- **Responsive**: Use Tailwind responsive utilities (`sm:`, `md:`, `lg:`)
+- **Accessible**: Include `aria-label`, semantic HTML, keyboard navigation
+- **Performance**: For large datasets (>1000 rows), use virtualization or pagination
+- **State management**: Use `React.useState` and `React.useReducer` — no external state libraries
+- **Naming**: Save as descriptive kebab-case filenames: `sales-dashboard.html`, `project-tracker.html`
+- **Dark mode**: Support via `dark:` Tailwind classes when appropriate