qa

Use when completing any task (final validation step), running audits, preparing for deployment, or when ESLint/TypeScript/build errors occur.

SKILL.md

GitHub

QA Skill

Canonical Sources

This skill references the following globals — read them BEFORE starting work:

  • system/globals/responsiveness.md — Breakpoints, test order, anti-patterns

Domain

Testing, Validation, Code Quality, Launch Readiness

KPIs

Metric Target Measurement
Lighthouse Best Practices >90 Lighthouse JSON → categories.best-practices.score * 100
ESLint Errors 0 npm run lint -- --format json
ESLint Warnings 0 npm run lint -- --format json
Formatting Issues 0 npm run format:check
HTML Validation Errors 0 npx html-validate dist/

Rules

Build Pipeline

# Full QA pipeline
npm run check:kpis    # All static convention checks (single source of truth)
npm run lint          # ESLint errors/warnings
npm run format:check  # Prettier formatting
npm run check         # Astro type check — covers .astro templates, which tsc alone does not
npm run build         # Astro build (0 errors, 0 warnings)

Shortcut: npm run validate runs check:kpis, lint, format:check and check in sequence.

Pre-Launch Checklist

Content

  • No placeholder content ("Lorem ipsum", "TODO", "FIXME")
  • All links work (no # or javascript:void(0))
  • Images have descriptive alt text
  • Text is proofread

Branding

  • Logo replaced (no longer AstroDeck default)
  • Favicon set (public/favicon.svg)
  • OG image created (public/og-image.png, 1200x630px)
  • Site title and description in astro.config.mjs

Legal

  • Imprint present (required in DACH region)
  • Privacy policy present
  • Cookie banner configured (if tracking active)

Analytics & Forms

  • Analytics code integrated (if desired)
  • Forms submit to correct endpoints
  • Forms have honeypot/CAPTCHA

Performance

  • Lighthouse Performance >90
  • Images optimized (WebP/AVIF, responsive sizes)
  • No unnecessary client:load directives
  • External scripts with SRI

Lighthouse Targets

Category Minimum Ideal
Performance 90 95+
Accessibility 90 95+
Best Practices 90 95+
SEO 90 95+

Dark Mode Testing

  • All pages checked in dark mode
  • No white surfaces or unreadable text
  • Images/icons visible (no black logo on black background)
  • Toggle works and persists selection

Cross-Browser

  • Chrome/Edge (Chromium)
  • Firefox
  • Safari (WebKit)
  • Mobile Safari (iOS)
  • Chrome Mobile (Android)

Non-Negotiable

These rules always apply — even under time pressure, even for "just a small update":

  • No commit without npm run build. "I only changed text" — content changes can also break the build (missing frontmatter fields, broken links).
  • No ESLint ignore without comment. // eslint-disable-next-line is allowed, but only with an explanation of why the rule doesn't apply here.
  • No skipping the QA pipeline. "It's urgent" is not an exception. The pipeline (lint → format → tsc → build) takes under 30 seconds.
  • Lighthouse always all 4 categories. Never measure only performance and ignore the rest. A score drop in any category is a blocker.
  • Responsive test is part of QA. "Looks good on my monitor" doesn't count. At minimum, 375px and 1280px must be checked.

Before Applying

Read LEARNINGS.md in this directory to avoid known anti-patterns.