Skip to main content Inicio Creadores 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.
Ir a la instalación Skills Marketplace Descubre y explora habilidades de IA creadas por la comunidad.
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Mostrar detalles del prompt Un comando directo omite el prompt de revisión. Revisa el origen antes de ejecutarlo.
npx skills add https://github.com/phoroth/AGENTIC --skill vibecode-production-qa-validatorEl comando permanece en una sola línea. Desplázate horizontalmente para revisarlo antes de copiarlo.
¿Prefieres una copia local? Descarga los archivos que SkillsMP tiene disponibles ahora.
Descargar Zip Descargando... Ocupaciones relacionadas SOC
Basado en la clasificación ocupacional 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 