Og Share Images
bonny/WordPress-Simple-History
Creates Open Graph / social share images (1200x630) for blog posts and announcements by rendering HTML in a headless browser.
Has an agent drive the real app through CDP and capture clean, defect-free product screenshots, gated by DOM, pixel and vision checks in a loop.
Install Agent-First Screenshots
$ npx skills add Devin-AXIS/iPolloWork --skill agent-first-screenshots -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install Devin-AXIS/iPolloWork agent-first-screenshots --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/Devin-AXIS/iPolloWork.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.opencode/skills/agent-first-screenshots .claude/skills/agent-first-screenshots && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "agent-first-screenshots" agent skill from https://github.com/Devin-AXIS/iPolloWork/tree/main/.opencode/skills/agent-first-screenshots into .claude/skills/agent-first-screenshots/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "agent-first-screenshots", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/Devin-AXIS/iPolloWork/tree/main/.opencode/skills/agent-first-screenshotsType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add Devin-AXIS/iPolloWork --skill agent-first-screenshots -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install Devin-AXIS/iPolloWork agent-first-screenshots --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Devin-AXIS/iPolloWork.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.opencode/skills/agent-first-screenshots .agents/skills/agent-first-screenshots && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "agent-first-screenshots" agent skill from https://github.com/Devin-AXIS/iPolloWork/tree/main/.opencode/skills/agent-first-screenshots into .agents/skills/agent-first-screenshots/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "agent-first-screenshots", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Devin-AXIS/iPolloWork --skill agent-first-screenshots -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install Devin-AXIS/iPolloWork agent-first-screenshots --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Devin-AXIS/iPolloWork.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.opencode/skills/agent-first-screenshots .cursor/skills/agent-first-screenshots && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "agent-first-screenshots" agent skill from https://github.com/Devin-AXIS/iPolloWork/tree/main/.opencode/skills/agent-first-screenshots into .cursor/skills/agent-first-screenshots/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "agent-first-screenshots", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/Devin-AXIS/iPolloWork.git --path .opencode/skills/agent-first-screenshots--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add Devin-AXIS/iPolloWork --skill agent-first-screenshots -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install Devin-AXIS/iPolloWork agent-first-screenshots --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Devin-AXIS/iPolloWork.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.opencode/skills/agent-first-screenshots .gemini/skills/agent-first-screenshots && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "agent-first-screenshots" agent skill from https://github.com/Devin-AXIS/iPolloWork/tree/main/.opencode/skills/agent-first-screenshots into .gemini/skills/agent-first-screenshots/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "agent-first-screenshots", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install Devin-AXIS/iPolloWork agent-first-screenshotsInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add Devin-AXIS/iPolloWork --skill agent-first-screenshots -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/Devin-AXIS/iPolloWork.git skills-src && mkdir -p .github/skills && cp -r skills-src/.opencode/skills/agent-first-screenshots .github/skills/agent-first-screenshots && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "agent-first-screenshots" agent skill from https://github.com/Devin-AXIS/iPolloWork/tree/main/.opencode/skills/agent-first-screenshots into .github/skills/agent-first-screenshots/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "agent-first-screenshots", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Devin-AXIS/iPolloWork --skill agent-first-screenshots -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install Devin-AXIS/iPolloWork agent-first-screenshots --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Devin-AXIS/iPolloWork.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.opencode/skills/agent-first-screenshots .opencode/skills/agent-first-screenshots && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "agent-first-screenshots" agent skill from https://github.com/Devin-AXIS/iPolloWork/tree/main/.opencode/skills/agent-first-screenshots into .opencode/skills/agent-first-screenshots/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "agent-first-screenshots", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
agent-first-screenshots- GitHub stars
- 6.8k
- Token cost
- ~1.2k tokens
- SKILL.md length
- 595 words
- Files
- 3 (incl. scripts)
- Skills in repo
- 30
- Repo updated
- First seen
- Licence
- Custom licence
At a glance
Has an agent drive the real app through CDP and capture clean, defect-free product screenshots, gated by DOM, pixel and vision checks in a loop.
- Works in 5 steps: Only remove, never add. Hiding a leaf… → If a feature isn't available, don't fake… → Each shot starts from a clean reload.… → …
- Taking or redoing screenshots of an app for a landing page or newsletter
- SKILL.md covers The Zero-Defect Bar, The One Method, Golden Rules and Verify with three channels, in…, plus 2 more sections
- Runs JavaScript scripts from its folder
What it does
The skill turns screenshots into a regenerable pipeline. The agent operates the real app like a power user preparing a demo, gets it into a settled state through the UI and captures it, with a zero-defect bar that rules out clipped or overlapping text, collapsed layout, blank regions and stray modals. The golden rules say to only remove distractions, never inject fake HTML or alter structural containers, to start each shot from a clean reload, to get state naturally with real multi-turn tasks, and to match the target aspect ratio through a CDP metrics override.
Each frame has to pass three channels before it ships: a DOM pre-check, a pixel check and a vision review. The bundled scripts capture-verify.mjs and screenshot-verify.mjs support the checks. It is meant for marketing images and redo requests for newsletters, landing pages, social posts, decks and pull requests. It is not end-to-end test evidence, for which a separate fraimz skill is named.
When your agent uses it
- Taking or redoing screenshots of an app for a landing page or newsletter
- Producing screenshots for a pull request or slide deck
- Regenerating product images after a UI change
Example prompts
- “Redo the screenshots for our landing page at 1440x900; the old ones show the previous sidebar.”
- “Take clean screenshots of the chat view for the newsletter, with a finished multi-turn task on screen.”
- “Capture the settings page for the PR description and check it for clipped text.”
Requirements
- A running app reachable through the Chrome DevTools Protocol
- Node.js for the verify scripts
Workflow steps
5 steps, taken from the first numbered list in SKILL.md.
- Only remove, never add. Hiding a leaf distraction (notification badge,
- If a feature isn't available, don't fake it. Enable it through the
- Each shot starts from a clean reload. location.reload(), wait for
- Get state naturally. Click the real tabs/buttons/pickers; close panels
- Match the target aspect ratio via CDP metrics override (e.g. 1440x900
What it can do on your machine
Read from SKILL.md and the folder at commit 71a74ad. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Ships 2 files in scripts/ (JavaScript), which the agent can run.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Agent-First Screenshots loads about 1.2k tokens when it runs. Until then it costs about 77 tokens; SKILL.md has 595 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.
SKILL.md
Its licence (Custom licence) doesn't allow us to republish the file, so here is its outline and opening line. It has 595 words (~1,219 tokens).
“An agent-first screenshot is produced by an agent driving the real app via CDP, gated by structural + pixel + vision verification before it ships. It turns screenshots from hand-crafted artifacts into a regenerable pipeline.”
- name
- agent-first-screenshots
Files
SKILL.md and 2 other files (scripts) in .opencode/skills/agent-first-screenshots of Devin-AXIS/iPolloWork.
- SKILL.md
- scripts/capture-verify.mjs
- scripts/screenshot-verify.mjs
Open the folder on GitHubat commit 71a74ad
Compare with similar skills
Agent-First Screenshots next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Agent-First Screenshots this skillDevin-AXIS/iPolloWork | 6.8k | — | ~1.2k | Automated safety check: Pass | Custom licence | |
| Og Share Imagesbonny/WordPress-Simple-History | 317 | — | ~2.6k | Automated safety check: Notes | None | |
| Brand and Design Toolkitnextlevelbuilder/ui-ux-pro-max-skill | 134k | 1 repos | ~3.5k | Automated safety check: Pass | MIT | |
| Text to PNG Card Casterlijigang/ljg-skills | 7.5k | — | ~1.9k | Automated safety check: Pass | MIT | |
| Typography Cover Designersugarforever/01coder-agent-skills | 136 | — | ~3.3k | Automated safety check: Pass | MIT | |
| Satoriusenotra/notra | 256 | — | ~3k | Automated safety check: Pass | AGPL-3.0 |
Similar skills
Brand and Design Toolkit
nextlevelbuilder/ui-ux-pro-max-skill
Bundles design tasks behind one skill: brand identity, tokens, UI styling, logos, corporate identity mockups, slides, banners, icons and social images.
Text to PNG Card Caster
lijigang/ljg-skills
Turns text, URLs or local files into tall PNG cards through HTML typography, with four modes: long reading card, full-text layout, comic and whiteboard.
Typography Cover Designer
sugarforever/01coder-agent-skills
Designs typography-driven video covers and thumbnails in HTML/CSS and screenshots them with Chrome DevTools at 16:9, 16:10, 9:16 and 3:4.
Satori
usenotra/notra
Expert guidance for Satori, the library that converts JSX/HTML and CSS into SVG (the engine behind dynamic Open Graph images and social cards).
Web Visuals
glifxyz/glif-mcp-server
Make images, textures, illustrations and background video for a website or app you are building, with Glif, and wire them into the code.
More from Devin-AXIS/iPolloWork
All 30 skills in this repoDaytona Windows Certificate Test
Devin-AXIS/iPolloWork
Reproduces iPolloWork enterprise TLS behavior in a Daytona Windows sandbox by installing a fake corporate CA and proving the app and its runtimes use the OS trust store.
Maintainable Code for iPolloWork
Devin-AXIS/iPolloWork
A code-change gate for the iPolloWork repository: search and reuse first, keep one source of truth, justify every new file or dependency, and audit the change.
Build iPolloWork Templates
Devin-AXIS/iPolloWork
Builds a reusable iPolloWork template for Design, Slides or PPT, or HyperFrames Video through conversation, keeping a manifest, reusable variables and a validated package current.
OpenCode Plugin Creator
Devin-AXIS/iPolloWork
Scaffolds an OpenCode plugin for iPolloWork with the right async factory shape, zod-based tool definitions and hook registration, and explains where to place and register it.
Daytona Chrome CDP
Devin-AXIS/iPolloWork
Launches a standalone Chrome or Chromium in a Daytona sandbox and drives it over CDP for web sign-in, OAuth and other flows that should bypass the Electron app.
Daytona Cloud Server Setup
Devin-AXIS/iPolloWork
Starts the hosted server side of iPolloWork in a Daytona sandbox, running Den Web, Den API, the worker proxy and MySQL for end-to-end cloud testing.
Related
Categories
Questions about Agent-First Screenshots
What does Agent-First Screenshots do?
Has an agent drive the real app through CDP and capture clean, defect-free product screenshots, gated by DOM, pixel and vision checks in a loop. The skill turns screenshots into a regenerable pipeline. The agent operates the real app like a power user preparing a demo, gets it into a settled state through the UI and captures it, with a zero-defect bar that rules out clipped or overlapping text, collapsed layout, blank regions and stray modals.
When should I use Agent-First Screenshots?
Agent-First Screenshots fits situations like: taking or redoing screenshots of an app for a landing page or newsletter; producing screenshots for a pull request or slide deck; regenerating product images after a UI change.
How do I install Agent-First Screenshots in Claude Code?
Run `npx skills add Devin-AXIS/iPolloWork --skill agent-first-screenshots -a claude-code`. Or copy the skill folder (.opencode/skills/agent-first-screenshots in Devin-AXIS/iPolloWork) into .claude/skills/agent-first-screenshots in your project. Claude Code loads it when a task matches its description.
How do I install Agent-First Screenshots in Codex?
Run `npx skills add Devin-AXIS/iPolloWork --skill agent-first-screenshots -a codex`. Or copy the skill folder (.opencode/skills/agent-first-screenshots in Devin-AXIS/iPolloWork) into .agents/skills/agent-first-screenshots in your project. Codex loads it when a task matches its description.
Can I use Agent-First Screenshots in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add Devin-AXIS/iPolloWork --skill agent-first-screenshots -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/agent-first-screenshots, .gemini/skills/agent-first-screenshots, .github/skills/agent-first-screenshots and .opencode/skills/agent-first-screenshots in your project.
What does Agent-First Screenshots need to run?
Going by SKILL.md and its folder, Agent-First Screenshots needs JavaScript for the scripts in its folder. Our summary lists: A running app reachable through the Chrome DevTools Protocol; Node.js for the verify scripts.
Does Agent-First Screenshots access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Agent-First Screenshots safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
What licence does Agent-First Screenshots use?
Agent-First Screenshots has a licence file (the repository's licence) that doesn't match a standard licence. Read it on GitHub before reusing the skill.
How many tokens does Agent-First Screenshots use?
About 1.2k tokens (SKILL.md is roughly 4.9k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Agent-First Screenshots?
Skills that share tags, products or a category with Agent-First Screenshots: Og Share Images (bonny/WordPress-Simple-History, 317 stars), Brand and Design Toolkit (nextlevelbuilder/ui-ux-pro-max-skill, 134k stars), Text to PNG Card Caster (lijigang/ljg-skills, 7.5k stars) and Typography Cover Designer (sugarforever/01coder-agent-skills, 136 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Agent-First Screenshots?
Devin-AXIS (a GitHub user) maintains it in Devin-AXIS/iPolloWork, which has 6,758 GitHub stars. The repository holds 30 skills in this directory. The repository was last updated on October 8, 2026.
Source: Devin-AXIS/iPolloWork on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.