Website Analyzer Skill

A comprehensive, multi-dimensional website analysis framework following Anthropic's best practices for prompt clarity, structured reasoning, and actionable output. Covers everything from surface-level design to deep business strategy alignment.

Step 0 — Pre-Analysis Setup

Before fetching anything:

Confirm the URL is live and accessible. If the user gave a partial URL (e.g., builtwithvince.com), prepend https://.
Clarify analysis depth if not stated — default to full analysis unless user asks for a focused audit (e.g., "just UX" or "just SEO").
Fetch the homepage using web_fetch. Also fetch:
- /about or /about-us (for brand/philosophy)
- /services, /products, or /pricing (for offer clarity)
- Any page the user specifically mentions
Note what you can and cannot access — server-side code, databases, and private APIs are inaccessible. Be transparent about coverage limits.

Step 1 — First Impressions (The 5-Second Test)

Simulate what a first-time visitor perceives within 5 seconds of landing:

Primary message: What does this site communicate immediately? Is the headline clear?
Visual hierarchy: Where does the eye go first? Is there a clear focal point?
Trust signals: Does the site feel credible, professional, and safe immediately?
Call-to-action visibility: Is there an obvious next step above the fold?
Brand tone: Formal or casual? Corporate or personal? Warm or transactional?

Rate this section: Strong / Adequate / Needs Work

Step 2 — Business Philosophy & Brand Positioning

Analyze the deeper strategic intent behind the site:

2a. Mission & Philosophy

What problem is this business trying to solve?
Is there a stated or implied "why" (purpose beyond profit)?
Does the content reflect a coherent worldview or philosophy?
Is the brand voice consistent across pages?

2b. Positioning

How does the brand position itself relative to competitors?
Is the unique value proposition (UVP) explicitly stated?
Is the brand niche or broad? Specialist or generalist?
Does the site own a clear category in the visitor's mind?

2c. Trust & Authority

Testimonials, case studies, social proof — are they present and credible?
Are credentials, certifications, or affiliations shown?
Is the founder/team visible? (Human trust layer)
Press mentions, awards, or third-party validation?

Step 3 — Target Audience Analysis

Reconstruct who this site is built for:

Inferred primary persona: Job role, pain level, sophistication, context of visit
Secondary personas: Anyone else the site appears to serve
Audience-content match: Does the copy speak in the audience's language?
Emotional triggers used: Fear, aspiration, belonging, FOMO, logic, authority?
Sophistication level: Is the copy written for beginners, practitioners, or experts?
Geography/context signals: Are there regional, cultural, or timezone cues?

Flag mismatches between presumed audience and actual copy/design decisions.

Step 4 — Frontend Analysis

4a. Visual Design

Layout system: Grid, flexbox, or freeform? Consistent spacing?
Color palette: How many colors? Does it follow a 60-30-10 rule?
Typography: Font pairing, size hierarchy, readability on both desktop and mobile
Imagery: Stock vs. original, quality, relevance, load weight
Whitespace usage: Cluttered or breathable?
Design consistency: Does the visual language hold across all pages?

4b. User Experience (UX)

Navigation: Is it intuitive? Are menu labels clear and predictable?
Information architecture: Is content organized logically?
Scroll behavior: Is important content above the fold? Is scroll depth rewarded?
Friction points: Any confusing flows, dead ends, or broken interactions?
Forms: Are they simple, labeled clearly, and minimal in fields?
Micro-interactions: Hover states, transitions, feedback cues — present and functional?

4c. Mobile Responsiveness

Does the layout adapt cleanly to mobile screen sizes?
Are tap targets appropriately sized (minimum 44px)?
Is the font readable without zooming?
Are images and videos properly constrained?
Does the mobile experience feel native or like a squished desktop?

4d. Accessibility (WCAG Basics)

Color contrast ratio — does text pass AA standard (4.5:1)?
Alt text on images?
Keyboard navigability visible?
Semantic HTML use (headings, landmarks, labels)?
ARIA attributes present where needed?

Step 5 — Copywriting & Content Analysis

Headline quality: Clear, benefit-led, and specific? Or vague and generic?
Body copy voice: Does it match the brand philosophy?
Clarity of offer: Can a visitor understand what's being sold/offered in one sentence?
CTA copy: Is it action-oriented and specific? ("Book a Call" vs. "Submit")
Storytelling: Is there narrative flow that leads the visitor toward a decision?
SEO copy signals: Are primary keywords present naturally in headings and body?
Length and density: Is copy appropriate for the audience's patience level?
Proof elements: Numbers, results, specifics — or generic claims?

Step 6 — Conversion Architecture

Evaluate how the site drives visitors toward a goal:

Primary conversion goal: What action is the site designed to produce?
Conversion funnel clarity: Is there a clear path from awareness → interest → action?
CTA placement and frequency: Too few, too many, or well-timed?
Objection handling: Does the site anticipate and address buyer hesitations?
Lead capture mechanisms: Forms, email opt-ins, chat widgets, booking tools?
Exit intent / retargeting signals: Any pop-ups, sticky CTAs, or persistent offers?
Social proof placement: Is proof shown closest to the point of decision?
Friction removal: Is the path to conversion as short as possible?

Step 7 — SEO & Discoverability

Surface-level on-page SEO review (no backend access):

Title tags: Present, descriptive, and under 60 characters?
Meta descriptions: Present and compelling?
Heading hierarchy: Single H1, logical H2–H4 structure?
URL structure: Clean, readable, keyword-rich slugs?
Internal linking: Pages linked logically for crawlability?
Image optimization: File names descriptive? Alt text present?
Page speed signals: Visible heavy assets (uncompressed images, render-blocking scripts)?
Schema/structured data: Any visible signs of rich snippet markup?
Blog/content strategy: Is there ongoing content being published?

Use web_fetch on page source when deeper inspection is needed.

Step 8 — Technical Stack Inference

Based on visible HTML, meta tags, script sources, and footer credits:

CMS or builder: WordPress, Webflow, Framer, Squarespace, custom, etc.
Frontend framework signals: React, Vue, Next.js, vanilla JS?
Analytics tools: Google Analytics, Plausible, Hotjar, etc. (check for GA tags or pixel scripts)
Marketing/CRM integrations: HubSpot, GoHighLevel, ActiveCampaign snippets?
Chat or support tools: Intercom, Drift, Crisp, etc.
Payment or booking tools: Stripe, Calendly, TidyCal embeds?
Performance tools: CDN headers, lazy loading signals, caching headers if visible?
Security signals: HTTPS present? SSL cert valid?

Note: This is inference, not inspection. Be appropriately hedged.

Step 9 — Performance Signals (Observational)

Without running Lighthouse directly, note visible performance indicators:

Excessive or unoptimized images
Render-blocking script tags in <head>
Number of external third-party scripts loaded
Video autoplay without lazy loading
Heavy animation libraries
Fonts loaded from multiple sources

If the user wants a formal Lighthouse audit,

website-analyzer