Skip to main content

Claude Code skill

The site-health-audit skill teaches Claude Code the exact workflow for analyzing a Webflow site: identify the site, fetch only the data it needs, and return Webflow-specific fixes (not generic web advice). Install it once and any Claude Code session can run audits against your scans.

Prerequisites​

  • Claude Code installed (claude CLI on your $PATH)
  • An MCP connection to Site Health configured in Claude Code. Either:
    • the Claude.ai connector (OAuth, recommended), or
    • an API key registered via claude mcp add site-health --url "https://sitehealth.octagramlabs.com/api/mcp" --header "Authorization: Bearer YOUR_SITE_HEALTH_API_KEY"

Verify the connection works before installing the skill:

claude mcp list

You should see site-health listed.

Install the skill​

Skills live at ~/.claude/skills/. The Site Health repo ships the skill — clone it, copy the folder, done:

git clone https://github.com/octagramlabs/site-health.git
mkdir -p ~/.claude/skills
cp -r site-health/skills/site-health-audit ~/.claude/skills/

Confirm the skill is picked up:

ls ~/.claude/skills/site-health-audit/
# SKILL.md

Start a new Claude Code session in any directory. The skill auto-loads when your prompt matches its triggers (any mention of Webflow performance, LCP, accessibility, a Site Health site, etc.).

What the skill does for you​

Without the skill, Claude Code calls MCP tools in whatever order it guesses. With the skill installed, Claude Code follows a deterministic workflow:

  1. Identify the site. Runs list_sites, matches the user's site by name or domain, or infers from the current workspace (package.json, git remote).
  2. Fetch only necessary data. Picks the minimum tool set for the question — get_latest_scan alone for "what's the current state," plus get_page_details and get_lcp_elements for "why is it slow."
  3. Analyze in Webflow context. Suggests fixes in Webflow Designer terms ("In the Designer canvas, select the hero image element → Settings → enable responsive images"), not generic web advice.
  4. Output a structured response. TL;DR, top 3–5 issues ranked by impact × effort, each with a concrete Webflow action, expected score delta, and effort estimate.
  5. Offer follow-ups. Generate a client report, pull the trend, dig into a specific page.

Example session​

You: Audit studio-brava.webflow.io

Claude Code (paraphrased):

I'll pull the latest scan for studio-brava.

calls list_sites → finds site, grabs ID calls get_latest_scan(siteId) → Performance 68, SEO 94, A11y 82, BP 91 calls get_page_details(scanId) → worst page is /pricing, LCP 3.2s calls get_lcp_elements(scanId) → LCP element is img.hero-bg (1.8 MB)

TL;DR: Mobile Performance is 68/100. LCP of 3.2s on /pricing is the biggest issue.

Top 3 fixes:

  1. Hero image on /pricing is 1.8 MB. In Webflow Designer, select the hero image element → Settings → enable "Use Webflow responsive images." Also compress the source to <200 KB. Impact: LCP 3.2s → ~1.8s (+15 Performance). Effort: 5 min.
  2. CLS from sticky navbar. Designer → navbar → set position: fixed with explicit min-height on the content wrapper. Impact: CLS 0.18 → <0.05. Effort: 10 min.
  3. Intercom script adds 340 ms TBT. Move to Site Settings → Custom Code → Footer, wrap in setTimeout(..., 2000) or requestIdleCallback. Impact: −280 ms TBT. Effort: 15 min.

Next steps: swap the hero image (biggest win), fix navbar CLS, defer Intercom, re-scan.

Want me to generate a client-facing report URL?

The skill only works if MCP is connected. See Claude.ai connector for OAuth setup or Claude Desktop for API-key-based setup (the same API key works for Claude Code via claude mcp add).

Troubleshooting​

Claude Code doesn't seem to use the skill. Skills load based on prompt triggers. Say "audit my Webflow site" or explicitly "use the site-health-audit skill." Check ls ~/.claude/skills/site-health-audit/SKILL.md — if that file is missing, the copy step didn't work.

Tools not available error inside the skill. The skill assumes MCP is configured. Run claude mcp list. If site-health isn't listed, go back to the Claude.ai connector or add it with claude mcp add.

Skill works but suggests generic fixes instead of Webflow-specific ones. Reinstall the skill — you may have an older copy. rm -rf ~/.claude/skills/site-health-audit && cp -r site-health/skills/site-health-audit ~/.claude/skills/.

"No completed scans yet" on a site you know has scans. The OAuth token or API key is scoped to a different Site Health user. Check which account owns the site and reauthenticate with that account.