Update to App Listing Screenshots

Changed files

Choose a file to see its text changes. Binary or large files show metadata only.

.codex-plugin/plugin.json →

README.md →

plugin.json →

skills/create-screenshots/SKILL.md →

skills/create-screenshots/references/workflow.md →

README.md

− removed · + added

--- before
+++ after
@@ -1,7 +1,98 @@
-# App Listing Screenshots
+# App Listing Screenshots — AI Plugin & MCP Server
 
-Unified plugin: one screenshot Skill and one remote MCP server. OAuth creates an isolated anonymous connection automatically; no manual API key or local renderer is required. Each exported full-resolution PNG is returned as its own image and shown beside the other slides, so ChatGPT can inspect individual screenshots. Use `update_screenshot_series` to change design fields on selected slides, then export the revised series.
+Unified plugin and Model Context Protocol (MCP) server for **ChatGPT**, **Codex**, and **Claude**.
 
-Use the package to update the existing plugin. The inline MCP Apps component displays each screenshot separately, along with the correct brand icon, slide count and ZIP button. The full-resolution PNG files are packaged into one ZIP; signed download links expire after one hour.
+Create App Store and Google Play listing images directly in AI conversations. Renders on the App Listing Screenshots Cloudflare Worker with Skia/CanvasKit WASM, returns full-resolution PNGs, and packages them into a ZIP archive without requiring local graphics software or manual API keys.
 
-Public listing screenshots and a reviewer-accessible tab-only demo are included in the metadata. Actual ChatGPT behavior was checked with enforced CSP. Draft upload, review submission, and publication are separate steps. The private developer-mode app avatar remains a generic host fallback; this is not proof of the eventual public directory icon.
+- **MCP Endpoint**: `https://listingframe.benbaler.workers.dev/mcp`
+- **Transport**: Streamable HTTP / Server-Sent Events (SSE)
+- **Authentication**: Automatic anonymous OAuth (each client receives an isolated anonymous workspace; no API key needed)
+
+---
+
+## 1. ChatGPT Installation
+
+### Option A: Upload Plugin Archive (Developer Mode)
+1. In ChatGPT, open **Settings** → **Security & login** (or **Developer Settings**) and enable **Developer mode**.
+2. Go to **Plugins** / **Connected Apps** → **Create plugin** (or **Upload new version**).
+3. Select this `app-listing-screenshots-plugin.zip` archive.
+4. Confirm connection and authorize the plugin.
+
+### Option B: Connect MCP Server directly
+1. Under **Settings** → **Connected Apps** / **MCP Servers**, choose **Add Server**.
+2. Enter the Server URL: `https://listingframe.benbaler.workers.dev/mcp`
+3. Authentication: select **OAuth** (connects automatically without manual credentials).
+
+### How to use in ChatGPT
+Attach your app screenshots or mockups and prompt ChatGPT:
+> *"Create three App Store screenshots (1320×2868) using my attached captures. Use a deep blue background with headlines 'Track Daily', 'Stay Focused', and 'Reach Goals'. Show me the previews and provide the ZIP download."*
+
+---
+
+## 2. Codex Installation
+
+### Option A: Plugin Directory
+Extract this archive into your Codex plugins folder:
+```sh
+mkdir -p ~/.codex/plugins/app-listing-screenshots
+unzip app-listing-screenshots-plugin.zip -d ~/.codex/plugins/app-listing-screenshots
+```
+Codex automatically detects `.codex-plugin/plugin.json`, `.mcp.json`, and the bundled `create-screenshots` Skill.
+
+### Option B: Configure MCP in Codex
+Add the remote MCP server to your `~/.codex/config.json` or `~/.codex/mcp.json`:
+```json
+{
+  "mcpServers": {
+    "app-listing-screenshots": {
+      "type": "streamable-http",
+      "url": "https://listingframe.benbaler.workers.dev/mcp"
+    }
+  }
+}
+```
+
+### Option C: Standalone Skill
+Copy `skills/create-screenshots` to your project's `.agents/skills/` or `~/.codex/skills/`.
+
+---
+
+## 3. Claude Installation
+
+### Option A: Claude Desktop (macOS & Windows)
+Add the MCP server to your Claude Desktop configuration file:
+- **macOS**: `~/Library/Application Support/Claude/claude_desktop_config.json`
+- **Windows**: `%APPDATA%\Claude\claude_desktop_config.json`
+
+Add the following under `"mcpServers"`:
+```json
+{
+  "mcpServers": {
+    "app-listing-screenshots": {
+      "command": "npx",
+      "args": ["-y", "mcp-remote", "https://listingframe.benbaler.workers.dev/mcp"]
+    }
+  }
+}
+```
+*(If your MCP client supports direct HTTP streaming, point directly to `https://listingframe.benbaler.workers.dev/mcp`)*.
+
+Restart Claude Desktop. You will see the tools icon (hammer) with App Listing Screenshots tools enabled.
+
+### Option B: Claude Code (CLI)
+Run in your terminal:
+```sh
+claude mcp add app-listing-screenshots -- npx -y mcp-remote https://listingframe.benbaler.workers.dev/mcp
+```
+
+### Option C: Claude Projects / Custom Instructions
+Copy the instructions from `skills/create-screenshots/SKILL.md` into your Claude Project instructions.
+
+---
+
+## Available Tools
+
+- `list_screenshot_options`: List supported dimensions, store presets (App Store, Google Play), font families, colors, and layout schemas.
+- `create_screenshot_series`: Create ordered screenshot slides with titles, backgrounds, and device frames from uploaded files, data URLs, or the built-in demo.
+- `update_screenshot_series`: Update specific slide titles or styling while preserving uploaded captures.
+- `export_screenshot_series`: Render full-resolution PNGs, display inline previews, and generate a signed ZIP download link (valid for 1 hour).