Skip to main content Accueil Créateurs phoroth agentic vibecode-production-qa-validator
vibecode-production-qa-validator 13-phase production QA for fullstack Next.js apps: build verification, SEO tags, OG images, favicon, route regression, API auth, page speed, lazy load, vulnerability scan, UI/UX cards, error boundaries, database, secure rendering, and cleanup.
Aller à l'installation Skills Marketplace Découvrez et explorez les compétences IA créées par la communauté.
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Afficher les détails du prompt Une commande directe contourne le prompt de vérification. Examinez la source avant de l'exécuter.
npx skills add https://github.com/phoroth/AGENTIC --skill vibecode-production-qa-validatorLa commande reste sur une seule ligne. Faites défiler horizontalement pour la vérifier avant de la copier.
Vous préférez une copie locale ? Téléchargez les fichiers actuellement disponibles dans SkillsMP.
Télécharger Zip Téléchargement... Métiers associés SOC
Basé sur la classification professionnelle SOC
name vibecode-production-qa-validator description 13-phase production QA for fullstack Next.js apps: build verification, SEO tags, OG images, favicon, route regression, API auth, page speed, lazy load, vulnerability scan, UI/UX cards, error boundaries, database, secure rendering, and cleanup. category devops risk safe source self source_type self date_added 2026-05-31 author Whoisabhishekadhikari tags ["qa","nextjs","production","deployment","seo","authentication","api","performance","favicon","cleanup","lighthouse","database","security","ui-ux"] tools ["claude","cursor","gemini","claude-code","opencode"] version 2.0.0
Production QA Validator
Run phases in order. Fix failures before moving to next.
When to Use
Use before shipping or promoting a fullstack Next.js app to production.
Use after large UI, SEO, auth, API, database, or dependency changes need a concrete launch-readiness pass.
Use when you need a compact command-driven checklist for build, route, metadata, performance, security, and cleanup checks.
export PROD_URL="https://yourdomain.com"
export QA_AUTH_HEADER=""
export PAGESPEED_API_KEY=""
Consolidated Runner
qa:all full Phase 1: Code Integrity
qa:code test -- --runInBand --passWithNoTests; }
Phase 2: Build Verification
qa:build local log ; log ="$(mktemp "${TMPDIR:-/tmp} /qa-build.XXXXXX.log" ) " || return 1; set -o pipefail; npm run build 2>&1 | tee "$log " ; local rc=$?; set +o pipefail; [ "$rc " -eq 0 ] && ! grep -qi "error\|failed" "$log " ; local ok=$?; rm -f "$log " ; return "$ok " ; }
Symbol Meaning ○Static ●SSG λDynamic/serverless ⊕Partial prerender
Phase 3: API Session & Authentication qa:auth local F=0
for ep in /api/auth/login /api/auth/session /api/auth/logout; do
curl -so /dev/null -w "%{http_code}" "$PROD_URL$ep " | grep -q "200\|401" || { echo " ✗ $ep unreachable" ; ((F++)); }
done
curl -so /dev/null -w "%{http_code}" "$PROD_URL /api/protected" | grep -q "401\|403" || echo " ⚠ Protected route not denying unauthenticated"
return $F
}
qa:auth:cookies for ep in /api/auth/session /api/auth/login; do
curl -sI "$PROD_URL$ep " | grep -i "^set-cookie:" | while IFS= read -r c; do
echo " $ep : $(echo "$c " | cut -d= -f1) "
echo "$c " | grep -qi "HttpOnly" || echo " ✗ Missing HttpOnly"
echo "$c " | grep -qi "Secure" || echo " ✗ Missing Secure"
echo "$c " | grep -qi "SameSite" || echo " ⚠ Missing SameSite"
done
done
}
Phase 4: Route Regression qa:routes local F=0; for p; do local C=$(curl -so /dev/null -w "%{http_code}" "$PROD_URL$p " ); echo "$C $p " ; [ "$C " = "200" ] || ((F++)); done ; return $F ; }
qa:robots "$PROD_URL /robots.txt" | grep -qi "Disallow: /$" && echo " ✗ Blocks all crawlers" || echo " ✓ OK" ; }
qa:sitemap "$PROD_URL /sitemap.xml" | python3 -c "import sys,xml.etree.ElementTree as ET; ET.parse(sys.stdin); print('✓ Valid XML')" ; }
Phase 5: SEO — Tags, Images, Favicon, Slugs qa:seo local H=$(curl -s "$PROD_URL " ); local F=0
for t in "og:title" "og:description" "og:image" "twitter:card" "canonical" "description" ; do echo "$H " | grep -qi "$t " || { echo " ✗ $t " ; ((F++)); }; done
echo "$H " | grep -qi "<title>" || { echo " ✗ <title>" ; ((F++)); }
local T=$(echo "$H " | grep -oP '<title>\K[^<]+' ); local L=${#T} ; [ $L -ge 30 -a $L -le 60 ] || echo " ⚠ Title ${L} chars (target 30-60)"
curl -so /dev/null -w "%{http_code}" "$PROD_URL /favicon.ico" | grep -q 200 || echo " ⚠ No favicon.ico"
return $F
}
qa:seo:ogimage local I=$(curl -s "$PROD_URL " | grep -oP 'og:image" content="\K[^"]+' ); [[ "$I " =~ ^http ]] || I="$PROD_URL$I "
curl -so /dev/null -w "%{http_code}" "$I " | grep -q 200 || { echo " ✗ og:image returns non-200" ; return 1; }
command -v identify &>/dev/null && curl -s "$I " | identify -format "%wx%h" - 2>/dev/null | grep -qP "12\d{2}x6\d{2}" && echo " ✓ ≥ 1200x630" || echo " ⚠ Install imagemagick to check dimensions"
}
Phase 6: API Route Behavior qa:api for p; do
local R=$(curl -so /dev/null -w "%{http_code} %{content_type}" "$PROD_URL$p " )
echo " $p → $R "
done
local E=$(curl -s "$PROD_URL /api/nonexistent" )
echo "$E " | python3 -c "import sys,json; d=json.load(sys.stdin); assert 'error' in d; print('✓ Consistent errors')" 2>/dev/null || echo " ⚠ Inconsistent error shape"
}
Phase 7: Git Hygiene qa:git local S=$(git diff HEAD 2>/dev/null | grep -i "password\|secret\|api_key\|localhost:3000" | grep "^+" )
[ -n "$S " ] && { echo " ✗ Secrets in diff!" ; echo "$S " ; return 1; } || echo " ✓ No secrets"
local A=$(git status --short 2>/dev/null | grep -E "\.next|node_modules" | head -3)
[ -n "$A " ] && echo " ⚠ Build artifacts:" && echo "$A " || echo " ✓ No artifacts"
}
Phase 8: Post-Deployment Smoke Test qa:smoke "$PROD_URL " | head -1 | grep -q "200" && echo " ✓ Homepage" || echo " ✗ Homepage"
curl -sI "$PROD_URL /sitemap.xml" | head -1 | grep -q "200" && echo " ✓ Sitemap" || echo " ✗ Sitemap"
}
Phase 9: Page Speed, Lazy Load & Bundles qa:lazyload local N=$(grep -r "loading=" app/ --include="*.tsx" 2>/dev/null | grep -c "lazy" || true )
echo " Lazy images: $N "
grep -rn "next/dynamic\|dynamic((" app/ --include="*.tsx" 2>/dev/null | head -5 | grep . || echo " ⚠ No dynamic imports"
}
qa:heavyload ls -lhS .next/static/chunks/*.js 2>/dev/null | head -5
local W=$(curl -so /dev/null -w "%{size_download}" "$PROD_URL " 2>/dev/null || echo 0)
echo " HTML weight: ~$((W/1024) )KB"
echo " ⚠ Run 'npx lighthouse $PROD_URL --view' for full weight analysis"
}
Phase 10: Cleanup & Vulnerability Scan qa:vulns "critical|high" | grep . && echo " ✗ Vulnerabilities!" || echo " ✓ No critical/high vulns"
npm outdated 2>/dev/null | head -5 | grep . || echo " ✓ All up to date"
local D=$(grep -rn "eval(\|new Function(\|document.write(" app/ src/ --include="*.ts" --include="*.tsx" 2>/dev/null | head -5)
[ -n "$D " ] && echo " ⚠ Dangerous patterns:" && echo "$D " || echo " ✓ No dangerous patterns"
}
qa:cleanup local D=$(git diff --cached 2>/dev/null | grep "^+" | grep -i "console\.log\|debugger" | head -5)
[ -n "$D " ] && echo " ✗ Debug artifacts:" && echo "$D " || echo " ✓ No debug artifacts"
local T=$(git diff --cached 2>/dev/null | grep "^+" | grep -i "TODO\|FIXME\|HACK" | head -5)
[ -n "$T " ] && echo " ⚠ TODOs remain:" && echo "$T "
}
Phase 11: UI/UX — Cards, Animation, Error Boundaries qa:ux:cards local E=$(grep -rn "text-overflow\|line-clamp\|truncate" app/ --include="*.css" --include="*.tsx" 2>/dev/null | head -3)
[ -n "$E " ] && echo " ✓ Text overflow handling" || echo " ⚠ No text overflow handling"
local A=$(grep -rn "aspect-\|object-fit" app/ --include="*.css" --include="*.tsx" 2>/dev/null | head -3)
[ -n "$A " ] && echo " ✓ aspect-ratio/object-fit used" || echo " ⚠ No aspect-ratio set"
}
qa:ux:boundaries for f in app/error.tsx app/global-error.tsx app/not-found.tsx app/loading.tsx; do
[ -f "$f " ] && echo " ✓ $f " || echo " ⚠ Missing $f "
done
}
qa:ux:animation local A=$(grep -rn "animation.*width\|transition.*height\|@keyframes.*top\|@keyframes.*margin" app/ --include="*.css" --include="*.tsx" 2>/dev/null | head -5)
[ -n "$A " ] && echo " ⚠ Layout-triggering animations:" && echo "$A " || echo " ✓ No layout-triggering animations"
local P=$(grep -r "@media.*prefers-reduced-motion" app/ --include="*.css" --include="*.tsx" 2>/dev/null | head -3)
[ -n "$P " ] && echo " ✓ prefers-reduced-motion found in CSS" || echo " ⚠ No prefers-reduced-motion in CSS"
}
Phase 12: Database & Data Layer qa:database local H=$(grep -rn "postgres://\|mysql://\|mongodb://" app/ src/ --include="*.ts" --include="*.tsx" 2>/dev/null | grep -v ".env" | head -5)
[ -n "$H " ] && { echo " ✗ Hardcoded DB URL:" ; echo "$H " ; } || echo " ✓ No hardcoded DB URLs"
local R=$(grep -rn "\$queryRaw\|\.raw(" app/ src/ --include="*.ts" --include="*.tsx" 2>/dev/null | head -5)
[ -n "$R " ] && echo " ⚠ Raw SQL:" && echo "$R " || echo " ✓ No raw SQL"
local N=$(grep -rn "\.findMany\|\.findUnique" app/ src/ --include="*.ts" --include="*.tsx" 2>/dev/null | grep -v "include:" | head -5)
[ -n "$N " ] && echo " ⚠ Possible N+1:" && echo "$N " || echo " ✓ No N+1 patterns"
}
qa:db:migrations "prisma/migrations" ] && echo " ✓ Prisma: $(ls prisma/migrations 2>/dev/null | wc -l) migrations" || echo " - No prisma migrations dir"
local M=$(ls db/migrations/*.sql 2>/dev/null | head -5); [ -n "$M " ] && echo " ✓ SQL migrations:" && echo "$M " || echo " - No SQL migration files"
}
Phase 13: Secure Data Rendering qa:secure local S=$(git grep -n "api_key\|API_KEY\|secret_key\|PRIVATE_KEY" -- ':!*.env*' ':!*test*' 2>/dev/null | head -5)
[ -n "$S " ] && echo " ✗ Secrets in source:" && echo "$S " || echo " ✓ No hardcoded secrets"
local D=$(grep -rn "dangerouslySetInnerHTML" app/ src/ --include="*.tsx" 2>/dev/null | head -5)
[ -n "$D " ] && echo " ⚠ XSS risk — use DOMPurify:" && echo "$D " || echo " ✓ No dangerouslySetInnerHTML"
local T=$(grep -rn "localStorage\|sessionStorage" app/ src/ --include="*.ts" --include="*.tsx" 2>/dev/null | grep -i "token\|jwt\|secret" | head -5)
[ -n "$T " ] && echo " ⚠ Tokens in storage — use httpOnly cookies:" && echo "$T " || echo " ✓ No tokens in storage"
curl -s "$PROD_URL /api/nonexistent" 2>/dev/null | grep -qi "stack\|Error:" && echo " ✗ Stack trace leak" || echo " ✓ No stack leak"
}
Pre-Commit Hook cat > .git/hooks/pre-commit << 'EOF'
npx tsc --noEmit || exit 1
npx eslint . --ext .js,.jsx,.ts,.tsx --max-warnings 0 || exit 1
EOF
chmod +x .git/hooks/pre-commit
CI/CD (GitHub Actions) name: QA
on: [push , pull_request ]
jobs:
qa:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
- run: npm ci
- run: npx tsc --noEmit
- run: npx eslint . --ext .js,.jsx,.ts,.tsx --max-warnings 0
- run: npm test -- --runInBand --passWithNoTests
- run: npm run build
Best Practices ✅ Do ❌ Don't Run full 13-phase flow before deploy Skip typecheck or lint Set PROD_URL in profile/.envrc Hardcode URLs in scripts OG images ≥ 1200×630 Use small OG images Animate with transform+opacity Animate width/height/top Show loading/error/empty states Leave users on blank screens prefers-reduced-motion for animationsForce motion on all users HttpOnly + Secure cookies for tokens localStorage for auth tokens Error boundaries at all levels White screen on crash Database indexes + include/populate N+1 queries in loops npm audit before deployDeploy with known vulns
Common Pitfalls Problem Solution OG tags missing in raw HTML Use export const metadata in Next.js Disallow: / in robots.txtBlocks all crawlers — use specific paths Cards different heights in grid Use display: grid with equal-height rows, not flex Text overflows card Add text-overflow: ellipsis + overflow: hidden Animation jank Animate transform not width/height Form submits twice Disable button on first click Console errors in prod Add no-console ESLint rule DB connection timeout Add connection pooling (PgBouncer/Prisma Accelerate) Sensitive data in API Strip passwordHash/secret in response transformer App crashes on error Add app/error.tsx error boundary Large JS bundles Dynamic import heavy components, analyze with next/bundle-analyzer Images load slowly Add loading="lazy", use WebP/AVIF, resize to display size
Security Notes
All qa:* functions are read-only (tsc, lint, test, build, curl, grep)
PROD_URL and QA_AUTH_HEADER only for enprojectnments you ownBasic secret scanning in git diff — for prod, use trufflehog/git-secrets
Auth tests with real credentials against prod is destructive — use staging
Limitations
Passing all phases reduces risk but doesn't eliminate production bugs
Some checks depend on project-specific tooling (Prisma, NextAuth, etc.)
Manual UX testing still required for critical user journeys
SEO checks verify raw HTML only — not social preview rendering
Route checks verify status codes, not content correctness
Master Checklist
Phase 1: Code
Phase 2: Build
Phase 3: Auth
Phase 4: Routes
Phase 5: SEO
Phase 6: API
Phase 7: Git
Phase 8: Smoke
Phase 9: Speed
Phase 10: Clean
Phase 11: UI/UX
Phase 12: Database
Phase 13: Secure Rendering 