Using AI to QC-QA a Real Web App — 8 Categories, 163 Items — Score Jumped from 49% to 89%

Functional Testing — From 56% to 87% with AI

The Starting Point — Why Build a QC-QA System with AI?

The team had someone doing QC-QA on web projects — but the problem was: slow checks, incomplete coverage, and no clear standard for what "complete" even means.

Multiple web projects worth 10 million baht and up. A single bug slipping into production could mean hundreds of thousands in losses. But having humans check everything manually — that's 2-3 days per release.

The goal: find a way to make the QC-QA team faster and more thorough, using AI.

That was the challenge. And so the AI got asked.

Deep Research Prompt — The First Question Asked to AI

In the world of QC/QA for web applications, mobile applications, and web design
for projects worth 10 million baht and above — what QC/QA processes are needed?

Do a deep research and show me everything, both free and paid.
Include prompts for AI-assisted auditing, tools that actually work,
and checklist items that need to be covered.

The AI deep research came back in 15 minutes — with results beyond expectations.

236 prompts. 32 tools. 195 checklist items. — from just a single question.

But raw data this massive — just dumping it in front of the team would be overwhelming. It needed to be organized into something actually usable.

Getting AI to Categorize — 8 Categories

From the 236 prompts, 32 tools, 195 checklist items gathered:

1. Separate free vs paid
2. Categorize by scan type and sub-items
3. Separate by tech stack (Next.js, React, Vue, etc.)
4. For quick workflow, separate by system category
5. Create main menu based on number of categories

AI came back with 8 categories — fully organized with item counts for each.

Each category has ready-made prompts — just hit Copy and paste into Cursor. Complete with recommended tools + install commands. The team doesn't need to memorize anything or Google stuff themselves.

What Do the 19 Items Check?

Today's deep dive is into the Functional Testing category with 19 items — because this is the category that was actually used on the ScanlyIQ project and uncovered 5 critical bugs.

Functional Testing breaks down into 4 groups:

Group 1 — E2E Testing (10 Items)

Group 2 — Cross-Browser (4 Items)

Group 3 — Responsive Design (4 Items)

Group 4 — Error Pages (1 Item)

Every item has a ready-made prompt — just hit Copy and paste into Cursor to let AI audit the project.

Real Audit Results — 5 Critical Bugs Found Hiding

The prompts from the Functional Testing category were pasted into Cursor and Claude was told to audit the actual ScanlyIQ project — not just read the checklist and tick ✅ boxes.

AI read every file of code, checked every route endpoint, examined middleware and auth logic — then gave back scores.

The results? Gut-wrenching.

The score before fixing was just 56% — only 110 out of 190 possible points. This was a project that was "thought to be" ready for deployment.

ZONE 1 — Critical Issues Caught by AI

5 critical issues — without auditing, these would definitely have shipped to production:

Item 1 is huge — Payment race condition. If the Stripe webhook fires before the system saves the stripeSessionId, the user pays but doesn't get credits. When would anyone find out? When the user comes complaining.

Item 3 is even scarier — allowDangerousEmailAccountLinking was turned on. The name literally says "dangerous" but nobody noticed. AI caught it.

ZONE 2 — Safe to Fix Right Away

AI Fixed All 12 Items — In a Single Session

The instruction to AI: "Can you fix all of these?"

AI fixed all 12 items. From creating the register endpoint, fixing the payment race condition, closing the OAuth vulnerability, creating error pages, all the way to adding CSS fallbacks — everything in a single session.

Final Scores — Per Item

Why Prompts Beat Expensive Tools — And the Workflow

Once upon a time, a QA tool costing tens of thousands per month was purchased — it could only check the "surface". Lighthouse scores, broken links, SSL expiry. That's it.

But a good prompt + AI that can read code? It found race conditions in the code. It found OAuth bypasses. It found email functions that were created but never actually called.

This is something no tool can do — unless there's a senior developer sitting down to do a code review.

The Actual Workflow — 5 Steps

All 5 steps took less than 1 hour total — for auditing + fixing 19 topics and 12 issues. Doing it manually? 2-3 days.

Try It Yourself — Prompt + FAQ

Here's the actual prompt used — copy and paste into Cursor:

[ROLE] You are a Senior QC Engineer auditing a web project
[PROJECT] Framework: nextjs | Path: ./
[URL] Dev: http://localhost:3000 | Prod: (not set yet)
[SCOPE] Audit only — do not modify any files

Audit "🧪 Functional Testing" — 19/19 items:

1. [CRITICAL] E2E: Happy Path for All User Flows
2. [HIGH] E2E: Form Validation
3. [CRITICAL] E2E: Authentication Flow
4. [CRITICAL] E2E: Authorization (RBAC)
5. [HIGH] E2E: CRUD Operations
6. [MEDIUM] E2E: Search & Filter
7. [LOW] E2E: Pagination
8. [MEDIUM] E2E: File Upload/Download
9. [CRITICAL] E2E: Payment Flow
10. [MEDIUM] E2E: Email Notifications
11. [HIGH] Cross-Browser: Chrome
12-14. [MEDIUM-LOW] Cross-Browser: Firefox, Safari, Edge
15. [HIGH] Responsive: Mobile (320-480px)
16-18. [MEDIUM-LOW] Responsive: Tablet, Desktop, Large Screen
19. [MEDIUM] Error Pages: 404/500

[OUTPUT]
===== Audit Summary =====
## ZONE 1 — Risky fixes (backup/test staging first)
## ZONE 2 — Safe to fix (no system impact)
## Score — Before: XX% → After: XX%

Change [PROJECT] to your framework and path, change [URL] to your dev URL — then tell AI to go.

FAQ — Frequently Asked Questions

Q: Do you need to know code to use this prompt?

Nope. Just open Cursor with the project to audit, copy the prompt, paste it, and tell AI to go — it reads all the code automatically. Results are written in plain language anyone can understand.

Q: Does this work with any language/framework?

Absolutely. This prompt is designed for web apps on any framework — Next.js, React, Vue, Angular, PHP, Django. Just change the [PROJECT] Framework.

Q: Are 19 items enough? What about Security, Performance?

Functional Testing is just 1 of 8 categories. Security (20 items), Performance (19 items), SEO (18 items) are in separate categories — each with its own prompt. Use the QC Dashboard to open them one at a time.

Q: Is it safe when AI fixes code? Won't it break more stuff?

Always audit first. Tell AI to audit only (do not modify files) → review results → if it looks good, then tell it to fix. And commit at every step in case rollback is needed.

Q: Why not just use Playwright directly instead of AI code review?

Playwright checks "behavior" (what happens when a button is clicked). AI checks "structure" (does the code have race conditions? is auth secure?). Best to use both — but if only one could be chosen, AI code review finds deeper problems.

Planning — From 33% to 85% with AI

Why Does Planning Need Auditing? — It's the Foundation

After running the Functional Testing category and bumping ScanlyIQ from 56% to 87% — curiosity kicked in: "What else would turn up if other categories were audited?"

Opened the QC Dashboard to the Planning — 10 items category. This one doesn't check for code bugs — it checks whether the project has the infrastructure to scale. Are there tests? CI/CD? Monitoring? Security headers?

The results? Even worse than Functional Testing.

33 out of 100. A project that "works" but has zero foundation — not a single test file, no CI/CD, no monitoring, and an ESLint config so broken it was useless.

What Do the 10 Items Check?

[ROLE] You are a Senior QC Engineer auditing a web project
[PROJECT] Framework: nextjs | Path: ./
[SCOPE] Audit only — do not modify any files

Audit "📋 Planning" — 10/10 items:

1. [MEDIUM] Define Browser/Device Matrix
2. [HIGH] Define Performance Budget (LCP<2.5s, CLS<0.1)
3. [HIGH] Define Accessibility Standard (WCAG 2.1 AA)
4. [MEDIUM] Define SEO Requirements
5. [CRITICAL] Define Security Requirements (OWASP Top 10)
6. [HIGH] Plan Test Strategy (Unit/Integration/E2E)
7. [MEDIUM] Define Code Quality Standards
8. [MEDIUM] Set Error Budget & Monitoring Plan
9. [MEDIUM] Design CI/CD Pipeline
10. [LOW] Define Definition of Done (DoD)

Scores Before Fix — Per Item

Total: 33/100 — The item that scored 0/10 was Test Strategy. A project with 56 API routes but not a single automated test.

ZONE 1 — Fixes That Could Break Things

ZONE 2 — Quick Wins to Fix Right Away

AI Fixed All 10 Items — Results

The instruction to AI: "Go ahead and do everything" — same approach as Functional Testing.

AI completed all 10 items in a single session:

Scores After Fix — Per Item

Total: 33/100 → 85/100 — up 52 points. The biggest jumps were Test Strategy (0 → 8) and CI/CD (2 → 9).

Lessons Learned from the Planning Category

Planning isn't just "making plans" — it's the project's foundational infrastructure. A project that works but has no tests, no CI/CD, no monitoring — that's like a house you can live in but has no foundation piles.

The funny part is AI pointed out that ESLint — which should be the "first line of defense" for code quality — had been broken the whole time without anyone noticing. Running pnpm lint gave "Oops! Something went wrong!" but nobody noticed because builds still passed.

Another thing: 0 test files for 56 API routes. Not because of laziness — but because "not knowing where to start". AI set up Vitest, wrote the first tests, set up CI/CD — all in 1 session. Now every push to GitHub automatically runs lint + type-check + test + build.

Security Testing — From 71% to 100% with AI

Why Is Security Scarier Than Other Categories?

Functional Testing finds bugs that break systems. Planning finds structural gaps. But Security? — it finds vulnerabilities that let others steal data.

For projects worth 10 million and up, if user data leaks — it's not just the cost of fixing the system, it's losing all trust.

Opened the QC Dashboard to the Security — 20 items category and ran it against ScanlyIQ:

71% sounds decent — but for Security, "decent" isn't enough. Failing just one item could mean getting hacked.

What Do the 20 Items Check?

[ROLE] You are a Senior QC Engineer auditing a web project
[PROJECT] Framework: nextjs | Path: ./
[SCOPE] Audit only — do not modify any files

Audit "🛡️ Security" — 20/20 items:

1. [CRITICAL] OWASP ZAP (0 High/Critical)
2. [CRITICAL] SQL Injection Test
3. [CRITICAL] XSS Test
4. [HIGH] CSRF Protection
5. [HIGH] Content Security Policy (CSP)
6. [HIGH] HTTPS Everywhere
7. [HIGH] HSTS Header
8. [MEDIUM] X-Content-Type-Options
9. [MEDIUM] X-Frame-Options
10. [MEDIUM] Referrer-Policy
11. [LOW] Permissions-Policy
12. [HIGH] Cookie Flags (Secure/HttpOnly/SameSite)
13. [HIGH] Rate Limiting on API
14. [HIGH] File Upload Validation
15. [CRITICAL] Dependency Scan (0 Critical)
16. [HIGH] SSL Grade A+
17. [MEDIUM] SRI (Subresource Integrity)
18. [CRITICAL] Secrets Scan (0 leaks)
19. [HIGH] Input Validation client+server
20. [MEDIUM] Security Headers Score A+

Note: 6 items (#1, #16, #17, #20 and 2 others) require a deployed URL or external tools — AI can audit 14/20 items via code review + pnpm audit

Scores Before Fix — Per Item

14 items audited: 10 pass, 2 fail, 2 warnings → 71%

ZONE 1 — Fixes That Could Break Things

Item 1 is the scariest — absolutely no Rate Limiting. Meaning anyone could fire unlimited requests at /api/auth/register or /api/upload/slip. Brute-force passwords? Possible. Burn through a user's credits? Possible. Upload huge files repeatedly until the server crashes? Possible.

Item 2 — the hono dependency that comes with shadcn had 9 vulnerabilities including 2 HIGH ones allowing access to any file on the server.

ZONE 2 — Quick Wins to Fix Right Away

AI Fixed Everything — Results

The instruction to AI: "Go ahead and do everything" — same approach as the previous 2 categories.

Things Already Done Right — AI Gave Props

Lessons Learned from the Security Category

Security differs from other categories in that no item is "unimportant". Functional Testing found a bug where registration didn't work — fix it and move on. But Security found no Rate Limiting — meaning if someone wanted to cause damage, they could do it right now.

Another interesting find: dependency vulnerability. The vulnerable hono wasn't directly imported — it came with shadcn, a UI library. No way to know without running pnpm audit. AI caught it and fixed it with pnpm overrides in 2 minutes.

Bottom line: Security isn't a "do once and done" thing — it needs re-checking every time dependencies are updated or new features are added. The QC Dashboard makes re-auditing easy — copy prompt, paste, tell AI, under 1 hour.

Performance — From 45% to 82% with AI

Why Is Performance the Easiest Thing to Overlook?

Functional Testing finds bugs that crash systems. Security finds hackable vulnerabilities. But Performance? — it doesn't break things immediately. It silently kills, slowly.

A web page loading 1 second slower = 32% higher bounce rate. 3 seconds slower? Half the users close the tab. But during dev, testing on localhost everything looks fast — problems only show up in production with real users.

Opened the QC Dashboard to the Performance — 19 items category and ran it against ScanlyIQ:

45% — the second lowest scoring category after Planning. The main issue: zero code splitting across the entire project, no lazy loading, images not optimized. Everything loads all at once.

What Do the 19 Items Check?

[ROLE] You are a Senior QC Engineer auditing a web project
[PROJECT] Framework: nextjs | Path: ./
[URL] Dev: http://localhost:3000 | Prod: (not set yet)
[SCOPE] Audit only — do not modify any files

Audit "⚡ Performance" — 19/19 items:

1. [HIGH] Lighthouse Performance >= 90
2. [HIGH] LCP < 2.5s
3. [HIGH] INP < 200ms
4. [HIGH] CLS < 0.1
5. [MEDIUM] TTFB < 800ms
6. [MEDIUM] FCP < 1.8s
7. [MEDIUM] Total Blocking Time < 200ms
8. [MEDIUM] Speed Index < 3.4s
9. [MEDIUM] Load Test: 100 concurrent users
10. [HIGH] API Response < 200ms (p95)
11. [LOW] Stress Test: 500 users
12. [HIGH] Memory Leak Check
13. [HIGH] DB Query < 100ms
14. [MEDIUM] Images Compressed (WebP)
15. [MEDIUM] CSS/JS Minified
16. [MEDIUM] Gzip/Brotli Enabled
17. [HIGH] Bundle < 500KB gzipped
18. [MEDIUM] Code Splitting done correctly
19. [MEDIUM] Lazy Loading below-the-fold

Note: 9 items (#1-4, #6-9, #11) require external tools or a deployed URL — AI can audit 10/19 items via code review + curl + build analysis

Scores Before Fix — Per Item

10 items audited: 4 pass, 5 fail, 1 warning → ~45%

ZONE 1 — Fixes That Could Break Things

Item 1 is the most critical — 0 dynamic imports across the entire project. Meaning heavy libraries like recharts (70KB), framer-motion (30KB), and exceljs (1MB) all load together regardless of which page is being viewed. Makes the initial bundle unnecessarily huge.

ZONE 2 — Quick Wins to Fix Right Away

AI Fixed Everything — Results

The instruction to AI: "Go ahead and do everything" — same approach as every category so far.

Heavy Dependencies Audited

Scores After Fix

10 items audited → 9 pass, 1 warning → ~82% (up from 45%, +37%)

Lessons Learned from the Performance Category

Performance differs from other categories in that full coverage requires external tools. Lighthouse, k6, PageSpeed Insights — many require a deployed URL for real measurements. But AI can audit nearly half from code alone — and the findings are just as important.

The shocking part: 0 dynamic imports across the entire project. Not because it was forgotten — but because "not knowing it was needed". Next.js App Router does route-level splitting automatically, but if components within pages don't lazy load, they still load as one big chunk.

Another thing: API cold start at 1.6 seconds for /api/auth/session — first request is painfully slow but subsequent ones are just 190ms. This was fixed with cache headers + stale-while-revalidate that AI added.

Bottom line: Performance needs 2 rounds of auditing — first round from code (AI can do this), second round from production URL (using Lighthouse + PageSpeed). The QC Dashboard provides prompts for both rounds, ready to use.

Development — From 52% to 81% with AI

Why Is Development QC More Important Than Expected?

This category is the "overlooked fundamentals" — not about features or UX, but about the quality of the code itself. If the codebase is organized, everything that follows becomes easier. If it's messy — everything falls like dominoes.

The ScanlyIQ project was built entirely with AI using Next.js + TypeScript + Prisma. "AI wrote it = good code" — that was the assumption all along. Until the actual audit.

52% — half the Development checklist failed. Even though builds passed, deployment worked, and there wasn't a single error.

What Do the 21 Items Check?

[ROLE] You are a Senior QC Engineer auditing a web project
[PROJECT] Framework: nextjs | Path: ./
[SCOPE] Audit only — do not modify any files

Audit "💻 Development" — 21/21 items:

1. [HIGH] ESLint 0 errors
2. [MEDIUM] Prettier format passes
3. [HIGH] TypeScript strict mode 0 errors
4. [HIGH] Unit Test Coverage >= 80%
5. [MEDIUM] Component Tests complete
6. [HIGH] API Route Tests for every Method
7. [CRITICAL] Dependency Vulnerabilities = 0 Critical
8. [LOW] License Compliance
9. [HIGH] Code Review passed
10. [MEDIUM] SonarLint Quality Check
11. [MEDIUM] No console.log/debugger
12. [CRITICAL] Environment Variables complete
13. [HIGH] Database Migration tested
14. [HIGH] API Error Handling complete
15. [HIGH] Input Validation all forms
16. [MEDIUM] Image Optimization
17. [MEDIUM] Bundle Size within budget
18. [LOW] Git Hooks works correctly
19. [MEDIUM] No unused dependencies
20. [MEDIUM] No circular imports
21. [CRITICAL] No secrets in codebase

21 items. By severity: 3 CRITICAL, 7 HIGH, 9 MEDIUM, 2 LOW. Tools used: ESLint, Prettier, TypeScript, Vitest, npm audit, depcheck, madge — mostly free.

Scores Before Fix — Per Item

6 pass, 5 warnings, 7 fail, 3 skipped → from 18 auditable items = 52%

The shocking part: builds pass, TypeScript has zero errors — but there are no tests at all. Unit tests had just 1 file (validations.test.ts) testing Zod schemas. Component tests? Zero. API tests? Zero. The entire project.

ZONE 1 — Fixes That Could Break Things

Item 1 is a great example of "builds pass" ≠ "everything's fine". Dev server runs normally, but production build breaks because Next.js collecting page data scans every directory — empty folders cause errors.

ZONE 2 — Quick Wins to Fix Right Away

These 8 quick wins can be done in 30 minutes. Most are just a single command — pnpm format fixes 188 files at once, pnpm remove drops unused deps in one go.

188 files failed formatting — but fixed with a single command. That's what the QC Dashboard helps with: identifies the problem + tells how to fix it + AI does it.

AI Fixed Everything — Results

The instruction to AI: "Go ahead and do everything" — same as every category.

Scores After Fix

18 items audited → 12 pass, 1 warning, 2 fail → ~81% (up from 52%, +29%)

Lessons Learned from the Development Category

This category teaches an important lesson: "it works" and "it works well" are very different. Code might build successfully, deploy fine, have zero TypeScript errors — but inside there could be 188 files with inconsistent formatting, 19 debug logs leaked into production, and 7 unused dependencies loaded on every install.

The interesting part: most problems can be fixed with a single command. Prettier formatting the entire project takes less than a second. Removing unused deps is just pnpm remove. But without a checklist — there's no way to even know there's a problem.

What AI couldn't do this round: write meaningful tests. Component tests and API tests need someone to define "what needs testing". AI can generate test boilerplate, but valuable tests need to come from someone who understands the business logic. These are the 2 items still failing — and they require real effort.

Deploy & Monitor — From 50% to 90% with AI

Why Is Deploy the Final Boss That Most People Fail?

Clean code, tests passing, good performance — but when it's time to actually deploy, everything breaks from step one. Build fails, env vars wrong, DNS not pointed, no migrations — problems that never showed up during dev.

The Deploy & Monitor category isn't just "click deploy and done" — it's verifying that the system is truly production-ready, from build, database, DNS, SSL, monitoring, all the way to backup strategy.

50% of the Deploy checklist failed — even though the dev server had been running perfectly fine the whole time. Production and Development are completely different worlds.

What Do the 17 Items Check?

[ROLE] You are a Senior QC Engineer auditing a web project
[PROJECT] Framework: nextjs | Path: ./
[SCOPE] Audit only — do not modify any files

Audit "🚀 Deploy & Monitor" — 17/17 items:

1. [CRITICAL] Production Build 0 Errors
2. [CRITICAL] Env Variables Production complete
3. [CRITICAL] Database Migration Applied
4. [HIGH] DNS Configuration OK
5. [HIGH] SSL Certificate Valid
6. [CRITICAL] Smoke Test: Homepage
7. [CRITICAL] Smoke Test: Login
8. [CRITICAL] Smoke Test: Core Features
9. [HIGH] API Health Check
10. [HIGH] Sentry Error Rate Normal
11. [MEDIUM] UptimeRobot Green
12. [MEDIUM] PageSpeed Maintained
13. [MEDIUM] SSL Labs A+
14. [MEDIUM] Mozilla Observatory A+
15. [MEDIUM] Search Console: No Errors
16. [HIGH] Backup Strategy Verified
17. [HIGH] Rollback Plan Documented

17 items split into: 6 CRITICAL, 6 HIGH, 5 MEDIUM. Important note — 7 items (#5, #8, #11-15) require a deployed URL, so AI can only audit 10/17 items; the rest need checking after deployment.

Scores Before Fix — Per Item

10 items audited → 4 pass, 3 warnings, 2 fail, 1 skipped → 50%

Interesting thing: Backup Strategy passed — the deployment guide has ready-made scripts for daily DB backups, weekly upload backups, remote backup, and complete restore procedures. But the problem: no Dockerfile yet — the entire deployment plan was written around Docker but the Dockerfile hadn't been created.

ZONE 1 — Fixes That Could Break Things

Item 1 is the most critical — db push works fine during dev, but in production it might drop columns or recreate tables if the schema changes. Prisma Migrate prevents this with migration history that tracks every change.

ZONE 2 — Quick Wins to Fix Right Away

AI Fixed Everything — Results

The instruction to AI: "Go ahead and do everything"

Scores After Fix

10 items audited → 8 pass, 1 warning, 1 fail → ~90% (up from 50%, +40%)

Lessons Learned from the Deploy & Monitor Category

This category has an important limitation: 7 of 17 items require a deployed URL (SSL Labs, PageSpeed, Mozilla Observatory, UptimeRobot, Search Console, SSL cert, core feature smoke test). So Deploy QC needs 2 rounds — before deploy (audit from code) and after deploy (audit from live URL).

What AI does well here is preparing infrastructure — creating Dockerfile, docker-compose, .env template, migration baseline, health endpoint. Everything that requires "creating files" AI handles perfectly. But what AI can't do is actually deploy — setting up DNS, creating a Sentry project, provisioning a VPS still has to be done manually.

Key lesson: Empty Resend API key = broken build. Many libraries throw errors during instantiation if the API key is an empty string — lazy initialization is needed (create the instance when actually called, not on import). This kind of thing is impossible to debug without actually trying a real build.

Accessibility — From 44% to 100% with AI

The Problem — A Site That "Works" But Isn't "Accessible"

Accessibility is the category devs tend to skip because "it looks fine to the eye" — but when actually tested with pa11y + Lighthouse, the Landing page scored just 96%, Login page 98%. Sounds high, but WCAG AA requires 100% to pass.

The QC Checklist of 16 items found 9 failures — only 44% passing.

The Prompt Used

Audit Accessibility of ScanlyIQ web app per WCAG 2.1 AA:
1. Check landmark structure — does it have main, nav, header?
2. Check for skip navigation link
3. Check aria-label on all icon-only buttons
4. Check alt text on all images — must be descriptive
5. Check touch targets ≥ 44px on all interactive elements
6. Check focus styles — every focusable element needs a visible indicator
7. Check color contrast ratio ≥ 4.5:1 (WCAG AA)
8. Check prefers-reduced-motion support
Measure with pa11y + Lighthouse before/after fixes

ZONE 1 — Issues AI Found + Fixed Immediately (8 Items)

ZONE 2 — Additional Issues Found by Lighthouse

AI Fixed Everything — Results

The instruction to AI: "Audit all Accessibility per WCAG AA — fix everything"

Scores After Fix

16 items audited → all 16 pass → 100% (up from 44%, +56%)

Lessons Learned from the Accessibility Category

An 8px touch target works with a mouse but not with a finger — progress dots smaller than 44px fail WCAG minimum. Looks "clickable" to the eye, but on an actual mobile device, nearly impossible to tap. AI catches this incredibly fast — just ask "which interactive elements have touch targets below 44px" and the answer comes instantly.

Another interesting finding: Lighthouse scores of 96-98% sound great but still don't pass WCAG AA. The failing issue was color contrast on a disabled link (2.33:1 when ≥4.5:1 is required). "Disabled" elements still need sufficient contrast — because screen reader users still see those elements.

Key lesson: prefers-reduced-motion is easy to forget — a @media rule needs to be added to CSS to disable animations/transitions for users who need it. AI creates this CSS rule in 10 seconds, but forget it and there's no way to be WCAG compliant.

SEO & Standards — From 38% to 91% with AI

The Problem — A Site That "Exists" But Google Can't Find

SEO & Standards was the last category audited — and the one with the most problems. Lighthouse SEO score on the Landing page was just 91%, which sounds fine, but digging into details revealed: sub-pages had no meta titles at all, no OG image, no structured data, no sitemap, no robots.txt.

The QC Checklist of 21 items found 13 failures — only 38% passing.

The Prompt Used

Audit SEO & Web Standards of ScanlyIQ web app per checklist:
1. Check meta title + description on every page (unique, appropriate length)
2. Check Open Graph tags — og:title, og:description, og:image
3. Check Twitter Card tags — twitter:card, twitter:image
4. Check Structured Data (JSON-LD) — Organization, WebApplication, FAQPage
5. Check Canonical URLs + metadataBase
6. Check robots.txt + sitemap.xml
7. Check Semantic HTML — heading hierarchy (H1 → H2 → H3 no skipping)
8. Check Image alt text on all images
9. Measure Lighthouse SEO score before/after fixes
Use Lighthouse + Google Rich Results Test to audit

ZONE 1 — Issues AI Found + Fixed Immediately (13 Items)

ZONE 2 — Manual Steps Required

AI Fixed Everything — Results

The instruction to AI: "Audit all SEO — meta tags, structured data, sitemap, robots.txt — fix everything"

Scores After Fix

21 items audited → 19 pass, 2 awaiting manual → ~91% (up from 38%, +53%)

Lessons Learned from the SEO & Standards Category

Structured Data (JSON-LD) makes Google "understand" the site — not just crawl it. Organization schema tells Google what company owns the site, WebApplication says it's a SaaS product, FAQPage enables FAQ Rich Snippets in search results. AI created all 3 schemas in under 1 minute — but without a Checklist, there's no way to know they're needed.

Another issue where AI helped a lot: Build failure from empty Resend API key. Next.js tries to collect page data during build, causing API routes to be instantiated — if a library throws an error in its constructor (like Resend requiring an API key), the entire build breaks. The fix is adding export const dynamic = "force-dynamic" so Next.js skips page data collection. AI debugged this instantly because it could see the error stack trace.

Key lesson: SEO that "looks good" (91%) may miss critical things — a high Lighthouse SEO score doesn't mean Google understands the site. Structured data, sitemap, robots.txt, unique meta titles on every page are all needed. Using only Lighthouse without a Checklist means missing structured data and sitemaps entirely.

Final Results — All 8 Categories Complete

All Results

Lessons Learned from AI QC-QA Across All 8 Categories

All categories complete — 8 categories, 163 items, from 49% to 89%. Every prompt and checklist used is available in the QC Dashboard, ready to use immediately.