Rewrite DevX growth essay and preserve old URL

.agents/skills/infographic-agent/.npmignore

@@ -0,0 +1,4 @@
+# Exclude everything not needed in the published package
+node_modules/
+*.log
+.DS_Store

.agents/skills/infographic-agent/README.md

@@ -0,0 +1,62 @@
+# Infographic Agent Skill
+
+A standalone, agent-agnostic **skill** package for generating professional infographics, visual summaries, and data visualizations directly from text or topic descriptions with Gemini.
+
+This skill is designed to run in both local terminal environments and within AI coding agents (such as Claude Code, Cursor, Copilot, etc.) that support the Vercel agent skills ecosystem.
+
+## 🚀 Installation & Setup
+
+You can install this skill directly into your AI coding agent environment:
+
+```bash
+npx skills add ryanbaumann/infographic-agent
+```
+
+Alternatively, you can run the CLI tool directly without installation:
+
+```bash
+# First run: installs the small Python dependencies (google-genai and pillow)
+npx infographic-agent --install
+
+# Generate an infographic
+npx infographic-agent "Top 5 programming languages in 2026"
+```
+
+## 📋 Prerequisites
+
+- **Python 3.8+**
+- **Gemini API Key**: Get a free key at [Google AI Studio](https://aistudio.google.com/apikey). Set it as:
+  ```bash
+  export GEMINI_API_KEY="your-key"
+  ```
+  *(If no key is configured in the environment, the CLI onboarding will guide you through getting one and saving it locally).*
+- **Vertex AI (Optional)**: If you prefer enterprise Vertex AI, configure Google Cloud Project details:
+  ```bash
+  export GOOGLE_CLOUD_PROJECT="your-project-id"
+  ```
+
+## ⚙️ How It Works
+
+The skill runs a fast, browser-less two-agent pipeline powered by Gemini:
+
+1. **Research & Plan (`gemini-3.5-flash`)**: Grounds the topic with Google Search and returns the same Prepare contract as the web app: analysis metadata, exact text strings, and a precise renderer prompt.
+2. **Eval**: Runs deterministic checks for schema, explicit image prompt prefix, quoted text strings, source attribution, accessibility guidance, and prompt length before rendering.
+3. **Render (`gemini-3.1-flash-lite-image` by default)**: Renders the validated prompt directly into a high-quality, text-accurate infographic PNG. The portable skill can opt into `gemini-3.1-flash-image` via `--image-model` for quality-focused runs.
+
+## 🛠️ CLI Flags & Options
+
+All flags are fully compatible between the Python script and the `npx` execution:
+
+| Flag / Option | Short | Description | Default / Choices |
+| :--- | :--- | :--- | :--- |
+| `topic` | *None* | The topic, prompt, or content you want to visualize. | *None* |
+| `--output` | `-o` | File path where the output PNG will be saved. | `infographic.png` |
+| `--mode` | `-m` | Preset layout and style theme. | `data-story`<br>Choices: `classroom`, `custom`, `data-story`, `executive-summary`, `quick-slide`, `technical-deep-dive` |
+| `--aspect` | `-a` | Aspect ratio of the generated infographic image. | `9:16`<br>Choices: `1:1`, `1:4`, `3:4`, `4:3`, `9:16`, `16:9` |
+| `--instructions` | `-i` | Custom layout, design, or brand color rules. | `""` |
+| `--image-model` | *None* | Image model for the portable skill. | `gemini-3.1-flash-lite-image`<br>Choices: `gemini-3.1-flash-lite-image`, `gemini-3.1-flash-image` |
+| `--no-research` | *None* | Skip the research agent and generate directly (faster, no web search). | *Flag* |
+| `--yes` | `-y` | Non-interactive execution (no refine loop, best for CI/agents). | *Flag* |
+| `--setup` | *None* | Launch the interactive key onboarding walkthrough, then exit. | *Flag* |
+
+For full documentation and examples, visit the main repository at [github.com/ryanbaumann/infographic-agent](https://github.com/ryanbaumann/infographic-agent).

.agents/skills/infographic-agent/SKILL.md

@@ -0,0 +1,120 @@
+---
+name: infographic-agent
+description: >
+  Generate professional infographics, visual summaries, charts, and data visualizations directly with Gemini.
+  A research agent (gemini-3.5-flash) grounds the topic with Google Search and engineers a precise prompt,
+  then gemini-3.1-flash-lite-image renders it into a PNG. No browser, Playwright, or Chromium dependencies —
+  the only requirement is Google's GenAI SDK. Fully portable to any agent CLI environment.
+metadata:
+  version: "3.2.0"
+  author: "Infographic Agent contributors"
+---
+
+# Infographic Agent Skill (Portable)
+
+<role>
+You are an expert AI Infographic Designer and Coordinator. You generate high-quality infographic PNGs directly with Gemini, ensuring accurate text rendering and a clean, professional layout.
+</role>
+
+<context>
+This skill mirrors the repo's web demo as a two-agent pipeline, both powered by Gemini:
+
+1. **Research orchestrator (`gemini-3.5-flash`):** reads the user's topic/content, optionally grounds it with Google Search, and returns the same `PrepareResult` contract as the web app: analysis metadata, exact text strings, and a precise image-generation prompt.
+2. **Image generator (`gemini-3.1-flash-lite-image` by default):** renders that prompt directly into a polished infographic PNG. The portable skill may use `gemini-3.1-flash-image` via `--image-model` when the caller explicitly chooses quality over latency. The web app remains locked to `gemini-3.1-flash-lite-image`.
+
+Before rendering, `portable_infographic.py` runs the same deterministic Prepare eval gate as the web app: schema, explicit image-prompt prefix, quoted text strings, source attribution, accessibility guidance, and prompt length. Blocking failures stop before Render; warnings are printed but do not block the artifact.
+
+After the first draft, an interactive refine loop lets the user iterate ("make the header bolder", "use teal accents") — each turn re-invokes the image model with the previous image plus the edit, saving a new revision in seconds.
+
+The entire workflow lives in `portable_infographic.py`. There are **no browser dependencies** — install is a single `pip install google-genai pillow` (google-genai runs the pipeline; pillow transcodes the output to lossless PNG for crisp text).
+
+**Security posture:** the Gemini API key is user-provided. If not set via `GEMINI_API_KEY`, the CLI walks the user through getting a free key from Google AI Studio and stores it locally at `~/.config/infographic-agent/config.json` with `0600` permissions. Errors are scrubbed of anything that looks like a credential before printing. If this skill is invoked autonomously, treat `--output` as trusted input — the path is resolved but will write wherever the invoker points it.
+</context>
+
+<loop_contract>
+Run this skill as a bounded human-in-the-loop agent loop:
+
+1. **Intake:** collect topic/content, mode, aspect ratio, output path, and any brand/style constraints.
+2. **Research:** use the research orchestrator unless `--no-research` is set; never invent data points.
+3. **Plan:** produce the exact text strings, layout, palette, and image prompt before rendering.
+4. **Eval:** run deterministic Prepare checks and stop before Render on contract failures.
+5. **Render:** call the image model once for the current plan and save the artifact.
+6. **Review:** stop for human review unless `--yes` was passed.
+7. **Refine:** apply one focused edit per turn, preserving the previous image as state, then return to Review.
+
+Portable state is held locally by the CLI as the current image path plus turn history. Agents that support Gemini Enterprise Agent Platform can replace that local state with the Gemini Interactions API by storing each returned `interaction.id` and passing it as `previousInteractionId` on the next review/refine turn.
+
+Interactions API note: use the unified Google Gen AI SDK (`@google/genai >= 2.0.0` or `google-genai >= 2.0.0`). Legacy packages such as `@google/generative-ai`, `google-generativeai`, `@google-cloud/vertexai`, and `google-cloud-aiplatform` are unsupported for Interactions, and legacy models such as `gemini-2.0-*` and `gemini-1.5-*` are deprecated and unsupported. Turn-scoped settings such as tools, system instructions, and generation config must be sent on every interaction request.
+</loop_contract>
+
+<workflow>
+1. **Identify Request:** Confirm the user wants to generate an infographic.
+2. **Install Skill:** The easiest way to install this skill into any AI coding agent:
+   ```bash
+   # Via the Vercel agent skills ecosystem (installs into Claude, Cursor, Copilot, etc.)
+   npx skills add ryanbaumann/infographic-agent
+
+   # Or run directly without installing via npm:
+   npx infographic-agent --install   # first-time: pip install google-genai pillow
+   ```
+3. **Set up the API key (free, ~20 seconds):** Either export it, or let the CLI onboard you:
+   ```bash
+   # Option A — set it yourself (get a free key at https://aistudio.google.com/apikey):
+   export GEMINI_API_KEY="your-key"
+
+   # Option B — one-click onboarding: just run the tool. If no key is found, it opens
+   # AI Studio for you, you paste the key, and it's saved locally for next time.
+   npx infographic-agent --setup
+
+   # (Enterprise) Vertex AI works too:
+   export GOOGLE_CLOUD_PROJECT="your-project"   # optional: GOOGLE_CLOUD_LOCATION (default us-central1)
+   ```
+4. **Execute:** Run the script to generate the PNG. A non-zero exit code means generation failed — check the printed error.
+5. **Deliver Output:** Output the path to the resulting `.png` file (and any `-v2`, `-v3` refinement revisions).
+</workflow>
+
+<instructions>
+When the user asks you to create an infographic, run `portable_infographic.py`.
+
+**Example usage:**
+```bash
+python3 skill/infographic-agent/portable_infographic.py "Top 5 programming languages in 2026"
+```
+
+**With options:**
+```bash
+python3 skill/infographic-agent/portable_infographic.py \
+  --text "Q2 sales highlights" \
+  --output sales.png \
+  --mode executive-summary \
+  --aspect 16:9
+```
+
+**Key flags:**
+- `--mode` — `data-story` (default), `executive-summary`, `technical-deep-dive`, `classroom`, `quick-slide`, `brandkit`, `blog-post`, `portfolio-showcase`, `custom`
+- `--aspect` — `1:1`, `9:16` (default), `16:9`, `3:4`, `4:3`, `1:4`, `16:10`, `21:9`
+- `--resolution` — `0.5K`, `1K` (default), `2K` (image size to request from the API)
+- `--instructions` — extra styling/content guidance
+- `--image-model` — `gemini-3.1-flash-lite-image` (default) or skill-only `gemini-3.1-flash-image`
+- `--no-research` — skip the research agent and generate directly from the text (faster, no web grounding)
+- `--yes` — non-interactive: generate once and exit (use this when running autonomously or in CI)
+- `--no-open` — do not auto-open the result in an image viewer
+- `--setup` — (re)configure the Gemini API key
+
+When invoking this skill autonomously (no human at the terminal), always pass `--yes` so it does not block on the interactive refine loop, and ensure `GEMINI_API_KEY` is set so it does not block on onboarding.
+
+### Alternative: orchestrate directly with subagents
+If you prefer to orchestrate without the script:
+1. Ask a research/LLM subagent (e.g. `gemini-3.5-flash`) to produce the web-compatible `PrepareResult` JSON from the user's content.
+2. Run local checks before rendering: required schema, prompt starts with `"Generate a professional infographic image"`, final text strings exist, quoted strings are present in the prompt, source attribution exists, accessibility guidance exists, and prompt length is bounded.
+3. Send the validated prompt to an image model (`gemini-3.1-flash-lite-image` by default; `gemini-3.1-flash-image` for skill-only quality runs) with `responseModalities: ['TEXT', 'IMAGE']` and save the returned PNG.
+4. Provide the link to the user, and offer refinement turns by re-sending the previous image plus the edit instruction.
+</instructions>
+
+<principles>
+### The 3 Hard Rules of Infographics
+
+1. **Text Accuracy First:** Quote every text string exactly in the image prompt so the model renders it verbatim. Never let the model invent or misspell labels.
+2. **Data Accuracy Rule:** Never hallucinate data points. Ground with Google Search and give the exact numbers requested.
+3. **Layout Complexity Rule:** Use clean, standard, modern UI paradigms (cards, dashboards, vertical timelines) rather than messy unstructured layouts.
+</principles>

.agents/skills/infographic-agent/bin/infographic-agent.js

@@ -0,0 +1,151 @@
+#!/usr/bin/env node
+/**
+ * infographic-agent CLI
+ *
+ * Thin Node.js shim that delegates to `portable_infographic.py`, which is
+ * bundled in this npm package. Node is only used here because npm/npx needs a
+ * JS entry-point; all the heavy lifting (the two Gemini agents that research
+ * and render the infographic) lives in the Python script.
+ *
+ * The ONLY runtime dependency is Google's GenAI SDK — there is no browser,
+ * Playwright, or Chromium download.
+ *
+ * Usage (via npx):
+ *   npx infographic-agent "Top 5 programming languages in 2026"
+ *
+ * First-time setup:
+ *   npx infographic-agent --install   # pip install google-genai pillow
+ *   # then just run it — the CLI walks you through getting a free API key.
+ */
+
+import { spawnSync } from "node:child_process";
+import { existsSync, readFileSync } from "node:fs";
+import { resolve, dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const scriptPath = resolve(__dirname, "../portable_infographic.py");
+const pkg = JSON.parse(readFileSync(resolve(__dirname, "../package.json"), "utf8"));
+
+// ─── Helpers ────────────────────────────────────────────────────────────────
+
+function print(msg) {
+  process.stdout.write(msg + "\n");
+}
+
+function err(msg) {
+  process.stderr.write("[infographic-agent] " + msg + "\n");
+}
+
+function run(cmd, args) {
+  return spawnSync(cmd, args, { stdio: "inherit" });
+}
+
+// ─── Resolve Python interpreter ─────────────────────────────────────────────
+
+function findPython() {
+  for (const candidate of ["python3", "python"]) {
+    const result = spawnSync(candidate, ["--version"], { encoding: "utf8" });
+    if (result.status === 0) {
+      const match = (result.stdout + result.stderr).match(/Python (\d+)\.(\d+)/);
+      if (match) {
+        const major = parseInt(match[1], 10);
+        const minor = parseInt(match[2], 10);
+        if (major >= 3 && minor >= 8) return candidate;
+      }
+    }
+  }
+  return null;
+}
+
+// ─── Pre-flight checks ───────────────────────────────────────────────────────
+
+if (!existsSync(scriptPath)) {
+  err(
+    `Could not find portable_infographic.py at: ${scriptPath}\n` +
+    "  This is a packaging bug — please open an issue at\n" +
+    "  https://github.com/ryanbaumann/infographic-agent/issues"
+  );
+  process.exit(1);
+}
+
+const python = findPython();
+
+// ─── CLI args ────────────────────────────────────────────────────────────────
+
+const args = process.argv.slice(2);
+const showHelp = args.includes("--help") || args.includes("-h");
+const doInstall = args.includes("--install");
+
+// ─── --help ──────────────────────────────────────────────────────────────────
+
+if (showHelp) {
+  print(`
+infographic-agent v${pkg.version}
+
+Generate a professional infographic PNG directly with Gemini: a research
+agent (gemini-3.5-flash) prepares and validates the prompt, then the image
+model (gemini-3.1-flash-lite-image) renders it. No browser or Playwright needed.
+
+Usage:
+  npx infographic-agent "<topic>" [options]
+
+Options:
+  --text <string>        Content to visualize (alternative to the positional topic)
+  --output, -o <path>    Output PNG path (default: infographic.png)
+  --mode, -m <mode>      data-story | executive-summary | technical-deep-dive |
+                         classroom | quick-slide | custom  (default: data-story)
+  --aspect, -a <ratio>   1:1 | 9:16 | 16:9 | 3:4 | 4:3 | 1:4  (default: 9:16)
+  --instructions, -i     Extra styling / content instructions
+  --no-research          Skip the research agent; generate straight from your text
+  --no-open              Do not auto-open the result
+  --yes, -y              Non-interactive: generate once and exit (no refine loop)
+  --setup                (Re)configure your free Gemini API key and exit
+  --install              Install Python dependencies (google-genai, pillow)
+  --help, -h             Show this help message
+
+Getting started (a free key takes ~20 seconds):
+  npx infographic-agent --install
+  npx infographic-agent "Top 5 programming languages in 2026"
+  # → the CLI walks you through grabbing a free key from Google AI Studio.
+
+Examples:
+  npx infographic-agent "Q2 sales highlights" -o sales.png -m executive-summary
+  npx infographic-agent --text "$(cat report.txt)" -a 16:9
+`.trim());
+  process.exit(0);
+}
+
+// ─── Require Python from here on ─────────────────────────────────────────────
+
+if (!python) {
+  err(
+    "Python 3.8+ is required but was not found on your PATH.\n\n" +
+    "  Install Python from https://www.python.org/downloads/ and make sure\n" +
+    "  it is on your PATH, then re-run:\n\n" +
+    "    npx infographic-agent ..."
+  );
+  process.exit(1);
+}
+
+// ─── --install: first-time dependency setup ─────────────────────────────────
+
+if (doInstall) {
+  print("Installing Python dependencies (google-genai, pillow)...");
+  const result = run(python, ["-m", "pip", "install", "--upgrade", "google-genai", "pillow"]);
+  if (result.status !== 0) process.exit(result.status);
+
+  print(`
+✓ Setup complete!
+
+  Generate your first infographic (the CLI will help you get a free API key):
+
+    npx infographic-agent "Top 5 programming languages in 2026"
+`.trim());
+  process.exit(0);
+}
+
+// ─── Delegate to Python script ───────────────────────────────────────────────
+
+const result = run(python, [scriptPath, ...args]);
+process.exit(typeof result.status === "number" ? result.status : 1);

.agents/skills/infographic-agent/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "infographic-agent",
+  "version": "3.2.0",
+  "description": "Generate professional infographic PNGs from text with Gemini — a research agent (gemini-3.5-flash) prepares and validates the prompt, then gemini-3.1-flash-lite-image renders it. No browser/Playwright deps.",
+  "license": "MIT",
+  "author": "Ryan Baumann",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ryanbaumann/infographic-agent.git",
+    "directory": "skill/infographic-agent"
+  },
+  "homepage": "https://github.com/ryanbaumann/infographic-agent#the-portable-skill",
+  "keywords": [
+    "infographic",
+    "gemini",
+    "gemini-3.1-flash-lite-image",
+    "ai",
+    "image-generation",
+    "cli",
+    "data-visualization",
+    "agent-skill"
+  ],
+  "type": "module",
+  "engines": {
+    "node": ">=18"
+  },
+  "bin": {
+    "infographic-agent": "bin/infographic-agent.js"
+  },
+  "files": [
+    "bin/",
+    "portable_infographic.py",
+    "requirements.txt",
+    "SKILL.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
+}