Agent skill

Mapping Webapp

by oaustegard in oaustegard/claude-skills

Generate behavioral/feature documentation for web apps using code-first analysis.

MITAuto-check passedProductivity & Automation

Install Mapping Webapp

skills CLI
$ npx skills add oaustegard/claude-skills --skill mapping-webapp -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install oaustegard/claude-skills mapping-webapp --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/oaustegard/claude-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/mapping-webapp .claude/skills/mapping-webapp && rm -rf skills-src

Use ~/.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/

Facts

Skill name
mapping-webapp
GitHub stars
150
Used in
1 other repo
Token cost
~1.5k tokens
SKILL.md length
549 words
Files
14 (incl. scripts)
Skills in repo
93
Repo updated
First seen
Licence
MIT

At a glance

Generate behavioral/feature documentation for web apps using code-first analysis.

  • Works in 4 steps: DISCOVER → ANALYZE → VERIFY (optional) → …
  • Documenting app behavior
  • SKILL.md covers Prerequisites, Usage, Architecture: Code-First… and Environment-Adaptive Batching, plus 5 more sections
  • Runs Python scripts from its folder; calls python; needs ANTHROPIC_API_KEY

What it does

Mapping Webapp is an agent skill from oaustegard/claude-skills. Generate behavioral/feature documentation for web apps using code-first analysis. Reads source code via tree-sitting to produce FEATURES.md, with optional visual verification via browser automation. Companion to tree-sitting. Use when documenting app behavior, creating feature inventories, generating behavioral ground truth for agents, or before modifying UI code. Triggers on "map features", "document app behavior", "feature inventory", "what does this app do".

Its SKILL.md is about 1.5k tokens, which your agent loads only when the skill is triggered. The skill folder holds 14 other files, including scripts (for example `CHANGELOG.md`, `scripts/__init__.py` and `scripts/analyze.py`).

It sits in Productivity & Automation, covering Browser automation. It works with Anthropic API. The repository describes itself as: My collection of Claude skills. The licence is MIT.

When your agent uses it

  • Documenting app behavior
  • Creating feature inventories
  • Generating behavioral ground truth for agents
  • Before modifying UI code

Example prompts

  • “map features”
  • “document app behavior”
  • “feature inventory”
  • “/mapping-webapp”

Requirements

  • Python 3
  • A credential in ANTHROPIC_API_KEY

Workflow steps

4 steps, taken from the step headings in SKILL.md.

  1. DISCOVER
  2. ANALYZE
  3. VERIFY (optional)
  4. ASSEMBLE

What it can do on your machine

Read from SKILL.md and the folder at commit 559a6cd. 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 12 files in scripts/ (Python), which the agent can run.

    Shell commands in SKILL.md call:

    • python

    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 these keys or tokens, usually read from environment variables:

    • ANTHROPIC_API_KEY

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Mapping Webapp loads about 1.5k tokens when it runs. Until then it costs about 120 tokens; SKILL.md has 549 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~120
When it runs · the whole SKILL.md, loaded when a task matches
~1.5k

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

The full file from oaustegard/claude-skills at commit 559a6cd, republished under its MIT licence (© oaustegard). 549 words, ~1,544 tokens.

Download SKILL.mdSave it as .claude/skills/mapping-webapp/SKILL.md (or your agent's skills folder). This skill also uses 13 other files; get the full folder from GitHub.
name
mapping-webapp
description
Generate behavioral/feature documentation for web apps using code-first analysis. Reads source code via tree-sitting to produce _FEATURES.md, with optional visual verification via browser automation. Companion to tree-sitting. Use when documenting app behavior, creating feature inventories, generating behavioral ground truth for agents, or before modifying UI code. Triggers on "map features", "document app behavior", "feature inventory", "what does this app do".
metadata.version
0.4.1

Mapping Webapp

Generate _FEATURES.md files documenting what a web app does — screens, flows, states, behavioral invariants. Companion to tree-sitting, which surfaces code structure.

v0.3.0: Code-first architecture. The code IS the ground truth; screenshots are supplementary verification.

Prerequisites

  1. tree-sitting must be installed (structure is scanned at runtime)
  2. Claude API key available (via api-credentials skill or ANTHROPIC_API_KEY env var)
  3. Optional: webctl for visual verification (not required for --code-only)

Usage

bash
# Code-only analysis (no browser needed):
python /mnt/skills/user/mapping-webapp/scripts/featuremap.py \
  --app-url https://example.com --codebase /path/to/repo --code-only

# Full pipeline (code analysis + selective visual verification):
python /mnt/skills/user/mapping-webapp/scripts/featuremap.py \
  --app-url https://example.com --codebase /path/to/repo

# Incremental update:
python /mnt/skills/user/mapping-webapp/scripts/featuremap.py \
  --app-url https://example.com --codebase . --incremental
Options
FlagDefaultDescription
--app-urlrequiredBase URL of the web app
--codebaserequiredPath to repo root
--output<codebase>/_FEATURES.mdOutput path
--max-pages100Cap on pages to discover
--code-onlyfalseSkip all vision — code analysis only
--verify-onlyfalseOnly run vision on already-analyzed pages
--batch-sizeautoPages per batch (auto-detected from environment)
--incrementalfalseOnly re-process changed pages
--viewport1280x720Screenshot viewport (WxH)
--routesnoneComma-separated routes or path to routes file
--screenshots-dir<codebase>/screenshotsWhere to store PNGs
--modelclaude-sonnet-4-6 (set in scripts/featuremap.py; that file is the source of truth)Claude model for analysis/vision
--dry-run / -nfalseDiscover only, print sitemap

Architecture: Code-First Pipeline

Phase 1: DISCOVER

Discovers pages from code structure, not browser crawling:

  • Scans for HTML files (static sites)
  • Detects framework routing conventions (Next.js, SvelteKit, etc.)
  • Scans the codebase for page references
  • Supplements with --routes for manual seeding

No browser required for discovery.

Phase 2: ANALYZE

Reads source code for each discovered page and uses Claude API (text, not vision) to generate behavioral descriptions:

  • Finds relevant source files (HTML + referenced JS/CSS)
  • Includes tree-sitting excerpts for code context
  • Produces: what the user sees, interactions, invariants, code references

Code-derived descriptions are usable standalone. Vision is enrichment, not requirement.

Phase 3: VERIFY (optional)

Selective visual verification for pages where it adds value:

  • Skips error pages (404, 500), gated pages, redirects
  • Captures screenshots + accessibility trees via webctl
  • Sends to Claude vision API to verify/enrich code descriptions
  • Falls back to code description if vision fails

Skipped entirely with --code-only. Run only this phase with --verify-only.

Show full SKILL.md (226 more words)Show less
Phase 4: ASSEMBLE

Compiles all descriptions into _FEATURES.md:

  • Source badges indicate code-analyzed vs visually-verified
  • Screenshot references only for verified pages
  • Status summary with breakdown by source

Environment-Adaptive Batching

The skill auto-detects the runtime environment and adjusts batch size:

EnvironmentBatch SizeNotes
Claude.ai container4 pagesShort bash timeouts
Claude Code on Web12 pagesLonger execution windows
Local CLIUnbatchedFull control

Override with --batch-size N.

Progress is checkpointed after each batch via _FEATURES_MANIFEST.json, so work survives if a conversation ends mid-pipeline.

Incremental Mode

Each run stores page hashes and descriptions in _FEATURES_MANIFEST.json. With --incremental:

  • Code analysis: skips pages with existing descriptions
  • Visual verification: skips pages with unchanged screenshots
  • Descriptions from previous runs are preserved and merged

Auth / Gated Pages

Pages requiring authentication are detected during verification (redirect detection + text heuristics) and marked GATED. The skill generates step-by-step manual capture instructions in GATED_PAGES.md.

Output Format

markdown
# _FEATURES.md — App Name
Generated: 2026-03-22T12:00:00+0000
App URL: https://example.com

## Feature Inventory

### Status Summary
- **Documented:** 45 pages
  - Code-analyzed: 40
  - Visually verified: 5
- **Gated (auth required):** 2 pages

### Page Title (`/route`)
> *Derived from source code analysis*

**What the user sees:** Prose description from code analysis.

**Interactions:**
- Button "X" → does Y

**Invariants:**
- Rule 1

**Code:** `src/page.html` :1

---

Relationship to CLAUDE.md

_FEATURES.md is the behavioral source of truth. Structure is not persisted alongside it — it is derived on demand:

  1. tree-sitting → structure, scanned at runtime
  2. mapping-webapp → _FEATURES.md (behavioral)
  3. Merge the behavioral layer into CLAUDE.md architecture/concepts sections

Limitations

  • Code analysis requires Claude API calls (tokens)
  • Visual verification requires webctl + a running app instance
  • SPAs with client-side routing may need --routes flag
  • Auth-gated pages require human intervention for visual verification
  • Code analysis quality depends on source code readability

© oaustegard, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 13 other files (scripts) in mapping-webapp of oaustegard/claude-skills.

  • SKILL.md
  • CHANGELOG.md
  • scripts/__init__.py
  • scripts/analyze.py
  • scripts/assemble.py
  • scripts/auth_instructions.py
  • scripts/capture.py
  • scripts/codecontext.py
  • scripts/describe.py
  • scripts/discover.py
  • scripts/environment.py
  • scripts/featuremap.py
  • scripts/staleness.py
  • scripts/verify.py

Open the folder on GitHubat commit 559a6cd

Used in 1 other repository

We found 3 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in oaustegard/claude-skills, which our catalogue first saw on October 7, 2026.

Compare with similar skills

Mapping Webapp 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.

Mapping Webapp compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Mapping Webapp this skilloaustegard/claude-skills1501 repos~1.5kAutomated safety check: PassMIT
Dev-Browser CLI AutomationSawyerHood/dev-browser6.7k1 repos~455Automated safety check: PassMIT
Camoufox CLIBin-Huang/camoufox-cli3501 repos~4.5kAutomated safety check: PassMIT
Browser Use Terminalbrowser-use/terminal651—~2.1kAutomated safety check: PassMIT
Codex Bridge Chatgptanightmonarch/codex-bridge-chatgpt145—~1.1kAutomated safety check: PassMIT
Webctlcosinusalpha/webctl419—~1.7kAutomated safety check: PassNone

Similar skills

  • Dev-Browser CLI Automation

    SawyerHood/dev-browser

    Browser automation with persistent named pages via the dev-browser CLI. Use when users ask to navigate websites, fill forms, take screenshots, extract web…

    6.7k GitHub starsUsed in 1 repo~455 tokens
    Productivity & AutomationAuto-check passed
  • Camoufox CLI

    Bin-Huang/camoufox-cli

    Anti-detect browser automation CLI & Skills for AI agents. An agent skill from Bin-Huang/camoufox-cli.

    350 GitHub starsUsed in 1 repo~4.5k tokens
    Productivity & AutomationAuto-check passed
  • Browser Use Terminal

    browser-use/terminal

    Direct browser control via the Browser Use Terminal CLI. An agent skill from browser-use/terminal.

    651 GitHub stars~2.1k tokensUpdated 1 mo ago
    Productivity & AutomationAuto-check passed
  • Codex Bridge Chatgpt

    anightmonarch/codex-bridge-chatgpt

    A skill your agent uses when a complex repository task needs ChatGPT web reasoning while Codex remains responsible for local evidence, edits, and tests.

    145 GitHub stars~1.1k tokensUpdated 1 mo ago
    Productivity & AutomationAuto-check passed
  • Webctl

    cosinusalpha/webctl

    Browser automation via CLI. An agent skill from cosinusalpha/webctl.

    419 GitHub stars~1.7k tokensUpdated 4 mo ago
    Productivity & AutomationAuto-check passed
  • Consult Oracle

    tobihagemann/turbo

    Consult ChatGPT Pro via ChatGPT browser automation for problems that resist standard approaches.

    406 GitHub starsUsed in 1 repo~1.1k tokens
    Productivity & AutomationAuto-check passed

More from oaustegard/claude-skills

All 93 skills in this repo
  • Bluesky Zeitgeist Sampler

    oaustegard/claude-skills

    Deprecated sampler that captures short windows of the Bluesky firehose, clusters trending terms and builds an HTML report; replaced by the browsing-bluesky skill.

    150 GitHub starsUsed in 1 repo~1.4k tokens
    Auto-check passed
  • Vega-Lite Interactive Charts

    oaustegard/claude-skills

    Builds interactive Vega-Lite charts from uploaded data: analyzes the fields, picks five to ten fitting chart types, and produces a React artifact with the data embedded inline.

    150 GitHub stars~2.1k tokensUpdated 5 days ago
    Auto-check passed
  • Single-File HTML Composer

    oaustegard/claude-skills

    Builds self-contained single-file HTML pages such as reports, decks, postmortems, flowcharts and prototypes from a small spec using a bundled Python composer and templates.

    150 GitHub stars~3.2k tokensUpdated 5 days ago
    Auto-check passed
  • Declauding

    oaustegard/claude-skills

    Rewrites model-sounding prose into plain technical writing and checks that every claim survives, for PR text, docs, commit messages and similar drafts.

    150 GitHub stars~5.1k tokensUpdated 5 days ago
    Auto-check passed
  • Forecasting Reverso

    oaustegard/claude-skills

    Zero-shot univariate time series forecasting using the Reverso foundation model (NumPy/Numba CPU-only inference).

    150 GitHub starsUsed in 1 repo~1.5k tokens
    Auto-check passed
  • Preact Developer

    oaustegard/claude-skills

    Guides building standards-based Preact apps with native-first choices, HTM syntax, import maps and vendored ESM, from single-file demos to larger builds.

    150 GitHub stars~4.6k tokensUpdated 5 days ago
    Auto-check passed

Works with

Questions about Mapping Webapp

What does Mapping Webapp do?

Generate behavioral/feature documentation for web apps using code-first analysis. Mapping Webapp is an agent skill from oaustegard/claude-skills. Generate behavioral/feature documentation for web apps using code-first analysis.

When should I use Mapping Webapp?

Mapping Webapp fits situations like: documenting app behavior; creating feature inventories; generating behavioral ground truth for agents; before modifying UI code.

How do I install Mapping Webapp in Claude Code?

Run `npx skills add oaustegard/claude-skills --skill mapping-webapp -a claude-code`. Or copy the skill folder (mapping-webapp in oaustegard/claude-skills) into .claude/skills/mapping-webapp in your project. Claude Code loads it when a task matches its description.

How do I install Mapping Webapp in Codex?

Run `npx skills add oaustegard/claude-skills --skill mapping-webapp -a codex`. Or copy the skill folder (mapping-webapp in oaustegard/claude-skills) into .agents/skills/mapping-webapp in your project. Codex loads it when a task matches its description.

Can I use Mapping Webapp 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 oaustegard/claude-skills --skill mapping-webapp -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/mapping-webapp, .gemini/skills/mapping-webapp, .github/skills/mapping-webapp and .opencode/skills/mapping-webapp in your project.

What does Mapping Webapp need to run?

Going by SKILL.md and its folder, Mapping Webapp needs Python for the scripts in its folder, the command-line tools its instructions call (python) and credentials named ANTHROPIC_API_KEY. Our summary lists: Python 3; A credential in ANTHROPIC_API_KEY.

Does Mapping Webapp 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 Mapping Webapp 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 Mapping Webapp use?

Mapping Webapp is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Mapping Webapp use?

About 1.5k tokens (SKILL.md is roughly 6.2k 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 Mapping Webapp?

Skills that share tags, products or a category with Mapping Webapp: Dev-Browser CLI Automation (SawyerHood/dev-browser, 6.7k stars), Camoufox CLI (Bin-Huang/camoufox-cli, 350 stars), Browser Use Terminal (browser-use/terminal, 651 stars) and Codex Bridge Chatgpt (anightmonarch/codex-bridge-chatgpt, 145 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Mapping Webapp?

oaustegard (a GitHub user) maintains it in oaustegard/claude-skills, which has 150 GitHub stars. The repository holds 93 skills in this directory. The repository was last updated on October 2, 2026.

Source: oaustegard/claude-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.