By my-stacks
Headless responsive UI review across breakpoints, themes, a11y, Core Web Vitals, SEO, and visual regression. Built for Vercel preview deploys.
npx claudepluginhub my-stacks/claude-code-skills --plugin design-qaThis plugin requires configuration values that are prompted when the plugin is enabled. Sensitive values are stored in your system keychain.
argosTokenArgos CI token for visual regression baselines. Get from argos-ci.com.
${user_config.argosToken}authStrategyHow the QA agent authenticates to protected app routes.
${user_config.authStrategy}browserDriverBrowser driver. 'playwright-mcp' (default) uses Microsoft Playwright MCP. 'agent-browser' uses Vercel agent-browser CLI for token-efficient runs and real Mobile Safari.
${user_config.browserDriver}breakpointPresetBreakpoint matrix to sweep. 'fast' = 5 widths. 'agency-default' = 18 widths covering grey areas. 'thorough' = 18 widths + ultra-wide + foldable outer + landscape.
${user_config.breakpointPreset}Just the accessibility audit. Runs axe-core and Pa11y at the configured breakpoints, including hover/focus/dark-mode states.
Bootstrap authentication for design QA. Copies the right Playwright auth setup template into the project, gitignores the storage-state directory, and prompts for credentials.
Just Core Web Vitals and Lighthouse. Mobile + desktop runs.
Just the breakpoint screenshot matrix without the full review. Useful for quick visual diffs.
Run a full headless design QA review against a URL. Sweeps breakpoints, runs axe + Lighthouse + SEO checks, optionally uploads to Argos, and produces a structured report.
SEO, Open Graph, Twitter Card, and JSON-LD validation.
One-time-per-machine setup. Installs Playwright browsers, axe-core, Lighthouse, Pa11y, and (if configured) agent-browser.
Capture or update the visual regression baseline. Uses Argos if configured, otherwise Playwright's toHaveScreenshot baselines.
Use when comparing the current page against a stored visual baseline. Uses Argos when an Argos token is configured, otherwise falls back to Playwright's built-in toHaveScreenshot.
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.
Use when running a WCAG 2.2 AA accessibility audit on a deployed web page. Combines axe-core and Pa11y, triggers hover/focus states (which axe misses by default), tests across light/dark themes, and outputs severity-ranked findings.
Use when measuring Lighthouse / Core Web Vitals (LCP, INP, CLS, TBT) on a deployed page. Runs both mobile and desktop profiles, reports actual measured numbers, and identifies top opportunities.
Use when capturing screenshots of a deployed web page across many viewport widths to find layout breaks. Specifically catches "grey area" widths (700, 900, 1180) where designs commonly fail between standard breakpoints. Sweeps 18 widths × light/dark/reduced-motion themes by default.
Use whenever the design-qa agent needs to apply project-specific design principles, brand voice, page-type priorities, or strictness level to a review. Loads .claude/design-qa/reviewer.json.
Semantic search for Claude Code conversations. Remember past discussions, decisions, and patterns.
Requires secrets
Needs API keys or credentials to function
Share bugs, ideas, or general feedback.
reviewerConfigPathPath (relative to project root) to the reviewer persona config. Defaults to .claude/design-qa/reviewer.json.
${user_config.reviewerConfigPath}vercelBypassSecretVercel Protection Bypass for Automation secret. Used as x-vercel-protection-bypass header to access protected preview deploys.
${user_config.vercelBypassSecret}argosUploadOnReviewAuto-upload screenshots to Argos at the end of /design-qa:review. Requires argosToken.
${user_config.argosUploadOnReview}Upstash Context7 MCP server for up-to-date documentation lookup. Pull version-specific documentation and code examples directly from source repositories into your LLM context.
Comprehensive startup business analysis with market sizing (TAM/SAM/SOM), financial modeling, team planning, and strategic research
Permanent coding companion for Claude Code — survives any update. MCP-based terminal pet with ASCII art, stats, reactions, and personality.
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.
Comprehensive PR review agents specializing in comments, tests, error handling, type design, code quality, and code simplification