Skip to main content ホーム クリエイター 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.
インストールへ移動 Skills Marketplace コミュニティが作成したAIスキルを発見・探索
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/phoroth/AGENTIC --skill vibecode-production-qa-validatorコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
Zipをダウンロード ダウンロード中... 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 