Skip to content

Open-source agent skills

Sharper senses for your coding agent

Skills that let an agent read what a web page really shows, and draw architecture diagrams you can print. Each one installs with a single command.

Browse skillsHow to use

Skills

page-as-data

Read a web page as data instead of a screenshot: what is on screen, what broke behind it, and layout defects at phone and desktop widths.

npx @keenskills/page-as-data init
Read the page-as-data docs

Architecture diagrams

Professional, print-ready architecture diagrams (Azure, AWS, GCP, network topology) as editable draw.io files plus PNG and PDF.

npx @keenskills/drawing-architecture-diagrams init
Read the Architecture diagrams docs

Three steps, no setup

  1. 1

    Install the skill

    Run init in your project. It finds the agents you use and writes the skill in each one’s own format.

  2. 2

    Ask your agent

    Say what you need in plain words: check this page on a phone, or draw this system on one A4 page.

  3. 3

    Get real output

    Your agent reads the page as data, or builds a draw.io file with PNG and PDF, and fixes what it finds.

Works with the agent you use

Questions

Which coding agents do they work with?

Claude Code, Codex and other agents that read AGENTS.md, Gemini CLI, Cursor, Windsurf, Cline and GitHub Copilot. init finds the ones your project uses; --agent picks them yourself.

What do they need?

Node 22 or newer to install. page-as-data also needs Chrome, Chromium or Edge. The diagram skill needs Python 3.9 or newer, and draw.io desktop for PNG and PDF export.

Can I install only one?

Yes. Each skill is its own npm package and its own Claude Code plugin, with its own version and changelog.

How do I remove one?

Run the same package with uninstall. It removes what init wrote and nothing else.

Are they free?

Yes. Both are MIT licensed and open source on GitHub.