Skills
.Work. You
Rest

above-the-fold-audit

Community

Move your mobile CTA above the fold.

Marketing & Sales#landing page#playwright#conversion optimization#above the fold#mobile cta#hero audit#surgical css
Authorandersoncollab
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill identifies why a primary mobile CTA renders below the fold and fixes it with a minimal CSS change that doesn’t require redesigning the page.

Core Features & Use Cases

  • Live mobile measurement with Playwright: Screenshots and computed layout checks across common small-viewport breakpoints (iPhone SE, iPhone 14, Galaxy S8).
  • Hero DOM root-cause discovery: Detects offenders like min-height: 100vh, excessive mobile padding, oversized decorative mockups, and DOM ordering issues.
  • Surgical, mobile-scoped CSS patch: Injects an @media (max-width: 768px) stylesheet to adjust sizing, padding, ordering, and caps mockups, then re-measures for pixel-level impact.
  • Shareable proof for stakeholders: Produces before/after visuals plus a measured impact summary so reviewers can verify the fix quickly.

Quick Start

Run the above-the-fold-audit against a public URL and ask it to produce a mobile-only CSS patch that moves the primary CTA above the fold with measured before/after screenshots.

Dependency Matrix

Required Modules

None required

Components

references

đź’» Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: above-the-fold-audit
Download link: https://github.com/andersoncollab/design-agent/archive/main.zip#above-the-fold-audit

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.