Web Anatomy

Skills for your AI agent that ship landing pages that work. Built from the plays the best SaaS companies actually shipped, grounded in a scored benchmark library so every recommendation cites a real page instead of generic advice.

$ npx skills add GabrielAmz/web-anatomy

Installs the Web Anatomy skill pack for Claude Code, OpenAI Codex, Cursor, Windsurf, and any agent that supports the Agent Skills spec.

What Web Anatomy is

Most AI agents rework a page from generic advice: add social proof, make the CTA stronger, tighten the headline. Web Anatomy gives the agent evidence instead. The skills read a page as a structure of known sections (hero, value proposition, trust, testimonial, pricing, FAQ, CTA), then ground every move in a benchmark library of real pages scored section by section.

The benchmark behind the skills (numbers to confirm before release):

3,500+ scored sections
500+ landing pages
290+ companies

The skills run standalone with built-in patterns. Connecting the hosted MCP (highly recommended) pulls the live benchmark data and real reference screenshots into every report. See Live benchmark data.

The four altitudes

Web Anatomy works at four zoom levels. The altitude matches the question being asked.

Altitude	The question	Skill
Page	What do the strongest pages in this market do, and how does mine compare?	`find-examples`
Audit	How does my whole page stack up, and what should I change first?	`audit-page`
Section	How do I level up one section, from foundational to best-in-class?	`research-best-practices`
Fix	Rework the page or section, or build a new one, with grounded copy-paste changes.	`improve-page`

Run webanatomy-setup once first. It captures product, ICP, industry, competitors, and proof assets into .agents/webanatomy-context.md, so every skill gives sharper, on-brand recommendations.

The skills

Skill	Altitude	What it does
`webanatomy-setup`	Foundation	Run once. Captures product, ICP, industry, competitors, proof assets, and priority pages into `.agents/webanatomy-context.md`.
`find-examples`	Page	The market scan. Pulls the top-ranked pages and sections in a market, shows what to steal, and when you share your page, labels how it compares. Absorbs the old `benchmark-compare`.
`audit-page`	Audit	Scores the current page against a CRO rubric, diagnoses it section by section, and returns a prioritized fix list. Runs standalone, no MCP required.
`research-best-practices`	Section	The section deep-dive. Takes one section and returns a tiered improvement ladder (foundational, competitive, best-in-class), each grounded in real benchmark sections.
`improve-page`	Fix	The flagship executor. Turns a diagnosis, a tier, or a structure into grounded copy-paste fixes; improves an existing page or builds a new one.

Visual Reports

Web Anatomy does not rely on chat to render screenshots. The output skills write local visual artifacts:

.webanatomy/
├── find-examples/
├── audit-page/
├── research-best-practices/
└── improve-page/
    └── topic-date/
        ├── report.md
        ├── report.html
        └── references/
            ├── current.png
            └── company-section.png

The chat response should stay short: top findings, report path, and any screenshot or MCP limitations. report.html is the product experience.

Live benchmark data (optional, highly recommended)

The skills work on their own, so install them and start immediately. Connecting the hosted Web Anatomy MCP is never mandatory, but highly recommended: it grounds every recommendation in live benchmark data and real reference examples instead of static guidance, which is where the skills are at their best. It needs a beta token and one config command per IDE:

Sign in at https://www.webanatomy.ai/dashboard/mcp to get your token + per-IDE config. You must be signed in, because the page generates your personal token there.

The skills use MCP tools such as search_pages, get_page, search_sections, and get_section when connected, and degrade gracefully to static guidance when not. Scores, thresholds, raw marker coordinates, and benchmark field names stay internal; user-facing reports translate them into plain-English patterns and gap labels.

Why "Anatomy"

Most AI-agent skill packs frame pages as a job (CRO, copywriting, SEO). Web Anatomy frames them as a structure: hero, proof, problem, solution, pricing, FAQ, CTA. Every section has known patterns, known anti-patterns, and known reference companies.

Every Web Anatomy skill turns a page into parts: hero, proof, problem, solution, pricing, FAQ, CTA. Each part has known patterns, anti-patterns, and benchmark examples. The framework and the evidence travel together.

Compatibility

✅ Claude Code
✅ OpenAI Codex
✅ Cursor
✅ Windsurf
✅ Any agent that reads .agents/skills/<name>/SKILL.md per the Agent Skills spec

Install options

# Recommended: installs the whole pack to .agents/skills/
npx skills add GabrielAmz/web-anatomy

# Update later (or just re-run the command above, it's idempotent)
npx skills update GabrielAmz/web-anatomy

# Or clone and copy manually
git clone https://github.com/GabrielAmz/web-anatomy
cp -r web-anatomy/skills/* .agents/skills/

After install, start with webanatomy-setup. The benchmark-backed workflows degrade gracefully when MCP isn't connected, falling back to static/reference guidance, but they are at their best with live benchmark data, so connecting MCP is highly recommended.

Repo layout

skills/ holds the skill pack, the source of truth installed by npx skills add.

Contributing

PRs welcome. See CONTRIBUTING.md for the new-skill recipe: kebab-case, YAML front matter, clear workflow names, and body under 5K tokens.

License

MIT. Use it, fork it, sell it, ship it.

Built by Gabriel Amzallag. The Web Anatomy pack is a public extraction of the patterns powering a private landing-page benchmark and audit tool. The skills give you the framework; the analyzer gives you the data.

WebAnatomy