page-as-data
Install as an agent skill
One command teaches the coding agents in a project to read screens with
page-as-data instead of taking screenshots:
npx @keenskills/page-as-data initIn a terminal it runs a short wizard. It checks Node and Chrome, asks which
agents to set up (the ones found in the project are ticked), shows the files
before writing them, offers to read your app once, and ends with commands to
copy. In scripts, CI and agents, or with --yes, it asks nothing.
It finds the agents the project already uses and writes each one's own file:
| Agent | File |
|---|---|
| Claude Code | .claude/skills/page-as-data/SKILL.md |
Codex, opencode, Amp and other AGENTS.md readers |
a block in AGENTS.md |
| Gemini CLI | a block in GEMINI.md |
| Cursor | .cursor/rules/page-as-data.mdc |
| Windsurf | .windsurf/rules/page-as-data.md |
| Cline | .clinerules/page-as-data.md (a block, when .clinerules is one file) |
| GitHub Copilot | .github/instructions/page-as-data.instructions.md |
When it finds none, it installs for Claude Code and AGENTS.md. Run it again
to update. It changes only what it wrote: in AGENTS.md and GEMINI.md, only
the text between <!-- page-as-data:start --> and <!-- page-as-data:end -->.
| Option | What it does |
|---|---|
--yes |
Ask nothing; use the agents found in the project. |
--agent claude,cursor |
Choose agents: claude, agents, gemini, cursor, windsurf, cline, copilot, or all. |
--global |
Install the Claude Code skill for every project, in ~/.claude/skills. |
--force |
Replace a same-named file that page-as-data did not write. |
--dry-run |
Show what would change, and write nothing. |
--dir path |
The project folder. Default: the current folder. |
npx @keenskills/page-as-data uninstall removes what init wrote, and nothing else.
As a Claude Code plugin
/plugin marketplace add keenskills/skills
/plugin install page-as-data@keenskills