From design-qa
Use when validating SEO basics, Open Graph, Twitter Card, JSON-LD, viewport meta, lang attribute, and heading hierarchy on a deployed page. Important for marketing sites and SEO-sensitive client work.
npx claudepluginhub my-stacks/claude-code-skills --plugin design-qaThis skill uses the workspace's default tool permissions.
You're validating the meta layer of a page: the bits that don't render visually but determine how the page appears in search results, social embeds, and assistive tech.
Provides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
Analyzes multiple pages for keyword overlap, SEO cannibalization risks, and content duplication. Suggests differentiation, consolidation, and resolution strategies when reviewing similar content.
Share bugs, ideas, or general feedback.
You're validating the meta layer of a page: the bits that don't render visually but determine how the page appears in search results, social embeds, and assistive tech.
${CLAUDE_PLUGIN_ROOT}/bin/run-seo.sh <url> — extracts and validates everything below. Output: .claude/design-qa/reports/<timestamp>/seo/report.json.
<title> present, length 30–60 chars (Google truncates around 60).<meta name="description"> present, length 70–160 chars.<link rel="canonical"> present and absolute.<html lang="..."> set to a valid BCP 47 code.<meta charset="utf-8"> early in <head>.<meta name="viewport" content="width=device-width, initial-scale=1"> (no user-scalable=no — that's an a11y violation).Required:
og:titleog:descriptionog:image — runner verifies the URL is reachable (with timeout, redirect cap, and size cap). MIME and dimensions are extracted into the report data but not validated automatically; the recommended target of 1200×630 is a manual check.og:urlog:type (website, article, product, etc.)Recommended:
og:site_nameog:localetwitter:card (summary or summary_large_image).twitter:title, twitter:description, twitter:image.summary_large_image, image should be 1200×675 (16:9-ish).The runner (run-seo.mjs) parses every <script type="application/ld+json"> block and reports whether it is valid JSON. Schema.org shape validation (e.g. checking that Organization has name/url/logo) is not performed automatically today — flag shape violations manually if you spot them in the extracted data.jsonLd array.
<h1> (zero = high; >1 = high).<img> has an alt attribute. Empty alt="" is OK for decorative images; missing alt is reported as medium.aria-hidden="true" or in <svg role="img"><title>...</title></svg> form.target="_blank" without rel="noopener" (security + perf) — reported as medium severity.<title>, missing <html lang>, malformed JSON-LD.## SEO & Meta
### Required ✅/❌
- Title: ✅ "Acme — Modern accounting for studios" (52 chars)
- Description: ❌ Missing.
- Canonical: ✅ https://acme.com/
- Viewport: ✅
- HTML lang: ✅ en
### Open Graph
- og:title: ✅
- og:description: ❌
- og:image: ⚠️ Present but 800×420 (recommended 1200×630)
- og:url: ✅
- og:type: ✅ website
### Twitter Card: ❌ No twitter meta tags
### JSON-LD: ✅ 1 block valid (Organization)
### Headings: ❌ 2 h1s detected
- "Modern accounting" (hero)
- "Pricing" (section header — should be h2)
### Images: ⚠️ 3 of 14 missing alt
- /assets/hero-bg.png (line 42)
- ...