By brandonhall
Spec-driven element screenshots for marketing sites. Playwright-based, auth-aware (5 strategies), with a DOM-tweak verb catalog and a JS escape hatch.
A Claude Code plugin that captures element-level screenshots from any web app, driven by a YAML spec. Designed for marketing sites that need product UI imagery — FeatureBlock images, email previews, hero posters, OG cards.
In Claude Code:
/plugin marketplace add brandonhall/marketing-screenshots
/plugin install marketing-screenshots@marketing-screenshots
Open a new session, then run the one-time setup in the plugin's assets/ directory:
cd ~/.claude/plugins/<...>/marketing-screenshots/plugins/marketing-screenshots/skills/screenshot/assets
npm run setup
(This installs Node deps and downloads the Chromium binary Playwright needs.)
/plugin marketplace update marketing-screenshots
/plugin uninstall marketing-screenshots@marketing-screenshots
/plugin marketplace remove marketing-screenshots
cd <plugin-assets>
mkdir -p examples/tmp
node capture.mjs examples/fastapi-docs-spec.yaml
ls examples/tmp/
Two screenshots from fastapi.tiangolo.com (the hero and the install code block) appear in examples/tmp/.
output_dir: ./public/marketing
app:
base_url: https://app.yoursite.com
auth:
strategy: none # or: headers | storage_state | interactive | mint_jwt
shots:
- slug: pricing-hero
url: /pricing
wait_for: 'h1:has-text("Pricing")'
target:
anchor: { tag: h1, text: 'Pricing' }
walk_up_until: { class_contains: 'hero' }
style: marketing-card
Run it:
cd <plugin-assets>
node capture.mjs /path/to/your/spec.yaml
The full spec schema, all auth strategies, target descriptors, and tweak verbs are documented in the skill itself:
<plugin-assets>/../SKILL.md
Playwright eliminates every workaround other approaches need:
animations: 'disabled'.viewports: { mobile: { device: 'iPhone 13' } } triggers md:/lg: Tailwind breakpoints.MIT — see LICENSE.
See DESIGN.md for the design rationale and PLAN.md for the implementation plan.
Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimBased on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
npx claudepluginhub brandonhall/marketing-screenshots --plugin marketing-screenshotsStops Claude from answering web-content questions with stale training data. Routes through specialized MCPs → WebFetch → Chrome MCP → Playwright, with refuse-and-install fallback.
Comprehensive skill pack with 66 specialized skills for full-stack developers: 12 language experts (Python, TypeScript, Go, Rust, C++, Swift, Kotlin, C#, PHP, Java, SQL, JavaScript), 10 backend frameworks, 6 frontend/mobile, plus infrastructure, DevOps, security, and testing. Features progressive disclosure architecture for 50% faster loading.
Harness-native ECC operator layer - 67 agents, 271 skills, 92 legacy command shims, reusable hooks, rules, selective install profiles, and production-ready workflows for Claude Code, Codex, OpenCode, Cursor, and related agent harnesses
Binary reverse engineering, malware analysis, firmware security, and software protection research for authorized security research, CTF competitions, and defensive security
v9.44.1 — Patch release for Gemini environment/version detection and qwen auth gating. Run /octo:setup.
Next.js development expertise with skills for App Router, Server Components, Route Handlers, Server Actions, and authentication patterns
Comprehensive .NET development skills for modern C#, ASP.NET, MAUI, Blazor, Aspire, EF Core, Native AOT, testing, security, performance optimization, CI/CD, and cloud-native applications