Claude Code for QA.

The 30-second pitch

Four things you walk away able to do tonight.

Where Claude Code sits in your stack.

Think of it as a terminal-native pair tester. It speaks files, shells, and — through MCP servers — browsers, Jira, Confluence, Notion, GitHub, calendars, even your inbox. Your job is to orchestrate, not to type.

Setup · macOS / Linux / WSL

Five lines. One terminal.

# 1. install
npm install -g @anthropic-ai/claude-code

# 2. cd into your QA repo
cd ~/work/qa-portfolio

# 3. start a session
claude

# 4. first thing you say
> /init  → writes CLAUDE.md

# 5. then ask anything
> read the repo and tell me what test framework we use

A session has four moving parts.

Most QA workflows live entirely inside Read + Bash + a Playwright MCP. You almost never need root, and you almost never need to leave the terminal.

Three ways to talk to the agent.

> run the login spec and screenshot
  every failure

> /init
> /review
> /compact

> !npx playwright test --headed
> !git status

Rule of thumb · use prompts for thinking, slash commands for workflows you repeat, and shell when you already know the exact command.

The complete cheat-sheet

Every slash command a QA touches.

QA-authored customs to add to .claude/commands/ · /flaky · /smoke · /bug-from-trace · /audit-locators · /gen-pom · /triage-failures · /quarantine · /report-run.

Need the full cheat-sheet?

The complete keyboard shortcuts · slash commands · config & env · skills & agents reference card lives in the Reference appendix at the end of the deck. Jump there anytime — print it, pin it above your desk.

Read · Edit · Write · Bash.
Plus Grep · Glob · WebFetch. Everything else is sugar on top.

> open tests/login.spec.ts, find the assertion
  that checks the toast, and tighten it to verify
  both text and aria-role

// agent will:
  Read(tests/login.spec.ts)
  Edit(tests/login.spec.ts)  // 1 hunk
  Bash(npx playwright test login --reporter=line)
  // reports green ✓

What goes inside CLAUDE.md

Nine sections every QA repo needs.

Treat CLAUDE.md as your team's pair-programming contract. Write it once, every session obeys it. Run /init to scaffold, then edit by hand. Lives at the repo root.

# QA Conventions · qa-portfolio

## 1. Stack
- Framework: Playwright 1.49+
- Test runner: @playwright/test
- Lang: TypeScript strict
- Node: 20.x · pnpm

## 2. Folder layout
- tests/e2e/        · browser specs
- tests/api/        · APIRequestContext
- tests/fixtures/   · shared fixtures
- tests/pom/        · page objects
- tests/data/       · faker builders

## 3. Locators — STRICT
- Prefer getByRole, getByLabel, getByTestId.
- Never raw .locator('xpath=…').
- Brittle CSS must include a "// why" comment.

## 4. Waits
- No page.waitForTimeout.
- Use auto-wait + expect.poll only.
- Retry once, then quarantine.

## 5. Data
- Generate with @faker-js/faker.
- Never hard-code emails / phones / addresses.
- Test users: env-based, not committed.

## 6. Tagging
- @smoke @regression @flaky @wip
- CI runs @smoke on every PR.

## 7. Reporting
- HTML + JSON reporter on CI.
- Attach trace + screenshot on retry.

## 8. Commits
- Conventional Commits.
- No co-author trailers.
- No "🤖 Generated with…" footers.

## 9. Do / Don't
- DO: ask before deleting any spec.
- DO: run the impacted spec after every edit.
- DON'T: edit playwright.config without a plan.
- DON'T: bump deps without a separate PR.

Hire specialists, not generalists.

A subagent is a separate Claude session spawned for one bounded job. Its output is summarised back — your main context stays clean. Think of them as contractors who clock out when done. Note · the Plan subagent below is the planner specialist — distinct from Plan-mode (⇧Tab toggle, read-only thinking on the main agent).

> explore: find every place we
  click "Add to cart"

> plan: add a parallel visual
  regression suite for /pricing

> review the last 3 commits
  for race conditions

> e2e: add coverage for
  password-reset happy path

> tdd: implement the new
  promo-code validator

> security: review the new
  /auth/reset endpoint

Two ways to scale your main agent

Subagent vs Agent Team.

Old model · main agent spawns isolated subagents; results flow upward. New model · main agent acts as team lead, all teammates share a task list, communicate peer-to-peer. Pick the model that fits the job.

When to pick which

From contractors → task board → engineering team

The three levels of Claude Code agents.

As coordination needs grow, you climb the ladder · isolated Subagents → managed Agent View → collaborative Agent Teams. Each level adds shared state and inter-agent communication. Pick the lowest level that fits the job.

When to pick which level

What is a Skill

Skills are playbooks Claude reads on demand.

A Skill is a reusable, versioned collection of instructions, resources, and examples that teaches Claude Code how to complete a specific type of task. Drop one into .claude/skills/<name>/SKILL.md (repo) or ~/.claude/skills/<name>/SKILL.md (personal). Claude auto-discovers and auto-triggers on description match.

How a Skill runs · 5 steps

A real skill · flake-hunter

---
name: flake-hunter
description: Use when a Playwright spec
  fails intermittently. Locates the wait,
  rewrites it to expect-based polling,
  re-runs 10× to confirm stability.
---

## Steps
1. Read the failing spec.
2. Identify any waitForTimeout / sleep.
3. Replace with expect.poll().
4. Run npx playwright test --repeat-each=10.
5. Report flake-rate before vs after.

Canonical docs · build your own

Build your own skill in under 10 minutes

A Skill is a markdown file with a recipe.

Frontmatter declares name + description. Body holds the procedure. Drop in ~/.claude/skills/<skill>/SKILL.md (global) or .claude/skills/<skill>/SKILL.md (repo-scoped). Claude auto-discovers and triggers on description match.

---
name: flake-hunter
description: Use when a Playwright spec
  fails intermittently or has any sleep /
  waitForTimeout / networkidle wait. Locates
  the bad wait, rewrites with expect.poll,
  re-runs 20x to confirm stability.
allowed-tools: Read, Edit, Bash, Grep, Glob
---

# Flake Hunter

## When to trigger
- Spec failed retry on CI.
- User says "this is flaky" / "intermittent".
- Code contains waitForTimeout / sleep.

## Procedure
1. Read the spec end-to-end.
2. Grep for: waitForTimeout, sleep,
   networkidle, hard delays.
3. For each hit, replace with expect.poll
   or explicit element wait.
4. Run npx playwright test {file} \
     --repeat-each=20 --workers=1.
5. Report flake-rate before vs after
   as a markdown table.
6. If still flaky > 5%, surface the
   most-likely locator candidate.

## Stop conditions
- 20/20 pass · report success.
- Any locator looks brittle · ask user.

> /skill-creator
// or, with the skill name:
> use skill-creator to build a
  skill called "locator-auditor"
  that scans tests/ for raw xpath
  and proposes role-based replacements

Don't write skills from scratch · install them

Skill marketplaces · qaskills.sh + skills.sh.

Two community registries let you npx-install pre-built skills into your Claude Code (or Cursor / Copilot / Windsurf). qaskills.sh is QA-only · 450+ testing skills. skills.sh is the broader directory across all domains. Both ship via one command · zero copy-paste.

npx @qaskills/cli add playwright-e2e
npx @qaskills/cli add api-test-generator
npx @qaskills/cli add flaky-test-detector
npx @qaskills/cli add wcag-audit
npx @qaskills/cli add selenium-converter

npx skillsadd anthropic/frontend-design
npx skillsadd vercel/react-best-practices
npx skillsadd microsoft/azure-ai
npx skillsadd anthropic/skill-creator
npx skillsadd <owner/repo>  # any GitHub skill

QA-relevant skills worth installing first day

# 1. land in your test repo
cd ~/work/my-qa-repo && claude

# 2. paste this prompt — claude installs the lot for you
> install these skills into .claude/skills/ and update CLAUDE.md
  to mention each one is available:
    - npx @qaskills/cli add playwright-e2e
    - npx @qaskills/cli add api-test-generator
    - npx @qaskills/cli add flaky-test-detector
    - npx @qaskills/cli add wcag-audit
    - npx skillsadd anthropic/skill-creator
    - npx skillsadd anthropic/security-review
  After install, run /skills and confirm all six show up.

Hooks fire around tool calls.

A hook is a shell command the harness runs at a lifecycle event. Use them to auto-format on save, run a smoke test after every write, or block edits to main.

"hooks": {
  "PostToolUse": [
    {
      "matcher": "Edit|Write",
      "hooks": [{
        "type": "command",
        "command": "npx prettier --write $CLAUDE_FILE_PATH"
      }]
    }
  ],
  "SessionStart": [{
    "hooks": [{
      "type": "command",
      "command": "echo '🧪 QA mode ready. Run /init.'"
    }]
  }]
}

MCP turns Claude into a browser, a Jira, a Notion, a Gmail.

Model Context Protocol is the USB-C of AI tools. A small server exposes verbs (navigate, click, createJiraIssue); Claude calls them like any other tool. For QA, the killer one is the Playwright MCP.

Demo · authoring a spec without typing locators

"Open saucedemo.com, log in, add a hoodie, screenshot the cart."

import { test, expect } from '@playwright/test';

test('guest adds backpack to cart', async ({ page }) => {
  await page.goto('https://www.saucedemo.com');
  await page.getByRole('textbox', { name: /user/i }).fill('standard_user');
  await page.getByRole('textbox', { name: /pass/i }).fill('secret_sauce');
  await page.getByRole('button', { name: 'Login' }).click();

  await page.getByRole('button', { name: /add to cart/i }).first().click();
  await page.getByRole('link', { name: /cart/i }).click();

  await expect(page.getByText('Sauce Labs Backpack')).toBeVisible();
});

API tests from a single curl.

Paste a curl, an OpenAPI URL, or a Postman export. The agent infers the contract and generates a fixture-based suite — schema validation, negative paths, auth variants, the lot.

> generate API tests for this endpoint with positive,
  negative, schema, and auth coverage. use playwright
  APIRequestContext, group by describe, log only on fail.

curl -X POST https://api.demo.dev/v1/users \
  -H 'Authorization: Bearer $T' \
  -H 'Content-Type: application/json' \
  -d '{"email":"a@b.co","plan":"pro"}'

import { test, expect } from '@playwright/test';
import { z } from 'zod';

const User = z.object({
  id: z.string().uuid(),
  email: z.string().email(),
  plan: z.enum(['free', 'pro'])
});

test.describe('POST /v1/users', () => {
  test('creates a pro user', async ({ request }) => {
    const r = await request.post('/v1/users', {
      data: { email: 'a@b.co', plan: 'pro' }
    });
    expect(r.status()).toBe(201);
    User.parse(await r.json());
  });

  test('rejects bad email', async ({ request }) => {
    const r = await request.post('/v1/users', {
      data: { email: 'not-an-email', plan: 'pro' }
    });
    expect(r.status()).toBe(400);
  });
});

From a screenshot to a filed bug.

> [screenshot.png attached]
  user reports the price chip overflows on
  the pricing card on mobile. reproduce in
  Chromium @ 390×844, capture a trace,
  attach screenshot, file a Jira bug in
  QA project with steps + expected/actual.

Drag a screenshot. Get tests.

Claude is multimodal — it reads images natively. Paste a Figma export, a customer's broken-UI screenshot, a flaky CI run's failure image. It identifies the component, locates it in code, proposes a fix or a test.

QA reviews code too. Now they have leverage.

tests/login.spec.ts:14: ⚠ medium:
  page.waitForTimeout(2000) introduces
  fixed sleep. fix: use expect.poll()
  on the dashboard heading.

src/auth/middleware.ts:42: 🔴 high:
  token comparison uses ==, vulnerable
  to timing attack. fix: crypto.timingSafeEqual.

playwright.config.ts:8: ◇ low:
  retries: 3 hides flakes. fix: cap at 1
  and quarantine instead.

Run Claude in your pipeline.

The same CLI is headless. Put it on GitHub Actions to auto-triage failing tests, generate PR review comments, or open a Jira when a smoke fails on main.

name: qa-bot
on: { pull_request: { types: [opened, synchronize] } }
jobs:
  triage:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Install Playwright
        run: npx playwright install --with-deps
      - name: Claude review + smoke
        env: { ANTHROPIC_API_KEY: ${{ secrets.ANTHROPIC_API_KEY }} }
        run: |
          npx -y @anthropic-ai/claude-code -p \
            "review this PR for QA risk, then run npx playwright test --grep @smoke
             and post a summary as a PR comment"

The -p flag (print/headless) gives you a one-shot run that exits with stdout. Perfect for cron, CI, or wrapping in your own scripts.

Cost guardrails · keep CI bills bounded

timeout 600s npx -y @anthropic-ai/claude-code -p \
  --model claude-haiku-4 \
  --max-turns 6 \
  "review the changes in this PR for QA risk only.
   focus on: flaky waits, hard-coded data, missing assertions.
   skip style nits. cap report at 8 bullets." < $(git diff origin/main)

Plan first. Then let it loose.

large refactors · scary migrations ·
unfamiliar codebases · auth changes

> work on this in a worktree
  so my dev server keeps running

Together these are the two safety belts that let you run the agent autonomously on a long task while you go to lunch. Come back to a green PR.

Things that will save you a workday.

Make your own /commands

Your team. Your verbs.

Drop a markdown file in .claude/commands/. The filename becomes the command. Inside, write the prompt template — with placeholders. Share it via git so every QA in your team has the same playbook.

---
description: Hunt a flaky Playwright spec
argument-hint: [spec path]
---

You are debugging a flaky Playwright test.

Spec path: $ARGUMENTS

Do these in order:
1. Read the spec end-to-end.
2. Find every waitForTimeout, sleep,
   hard-coded delay, or networkidle wait.
3. Replace with expect.poll / explicit
   element wait.
4. Run it --repeat-each=20.
5. Report flake rate before vs after as a table.

Stop and ask if any locator looks brittle.

> /flaky tests/checkout.spec.ts

// claude expands the template, fills
// $ARGUMENTS, and runs the playbook

A QA day · before vs after.

One session, every job vs one agent, one job

Vibe Coding vs Software Factory.

Pile every role onto one Claude session and you get context chaos — research notes, frontend code, QA assertions, reviewer remarks all bleed into the same buffer. The fix · split roles across small, focused agents in a pipeline. Each agent owns one job, with clean context, and hands off to the next.

What this means for QA

> Build a software factory pipeline for QA-482.
  Step 1 · researcher subagent · pull AC from Jira, summarise.
  Step 2 · spec subagent · turn AC into Gherkin scenarios.
  Step 3 · test subagent · write Playwright specs from Gherkin.
  Step 4 · validator subagent · run the suite, report pass/fail.
  Each step in its own context · pass only the artefact forward.
  Stop and ask if any step output looks off.

When your repo has 12 apps and 8 test suites

Claude Code in a monorepo.

One Claude session can scope multiple packages via /add-dir. Per-package CLAUDE.md overrides the root one. Per-package skills live under packages/<app>/.claude/skills/. Run diff-aware tests so you don't smoke-test the whole world for a 1-file fix.

## Repo · Turborepo monorepo

Layout:
  apps/web/        Next.js app
  apps/admin/      admin dashboard
  apps/api/        Express API
  packages/ui/     shared components
  packages/qa/     shared Playwright fixtures

Each app has its own CLAUDE.md.
ALWAYS read the package-level CLAUDE.md
before editing inside that package.

Diff-aware test command:
  turbo test --filter='[origin/main]'

CI runs only changed packages.

> /add-dir apps/web
> /add-dir packages/qa

> the new apps/web/PricingCard component
  reuses fixtures from packages/qa. Read
  both CLAUDE.md files, then write a Playwright
  spec at apps/web/tests/pricing.spec.ts
  that imports the shared checkoutFixture.
  Run only that one spec:

  turbo test --filter=web -- --grep=pricing

Monorepo cookbook

Migration playbook · don't rewrite by hand

From Cypress · Selenium · TestCafe → Playwright.

Four-step playbook. Claude does 90% of the mechanical work · you review the diff. Cite the selenium-to-playwright skill from qaskills.sh in your prompt and it follows the official translation map.

Locator translation matrix

> migrate cypress/e2e/ to Playwright at tests/e2e/.
  Use the selenium-to-playwright skill from qaskills.sh.
  Rules:
    - Use getByRole / getByLabel / getByTestId first.
    - No waitForTimeout. Replace with expect-based waits.
    - cy.intercept → page.route. cy.task → fixture method.
    - Anything you're not 95% sure about, tag @flaky + add a TODO.
  After conversion, run the new suite locally and report:
    - total specs converted
    - pass count / fail count / @flaky count
    - diff in run-time vs old Cypress suite

Numbers that drive QA decisions

Flake rate · MTBF · p95 — let Claude do the math.

Claude can ingest your Playwright JSON reporter output, compute the stability metrics that matter, and rank specs by flake risk. Wire it into CI · fail the build if flake rate goes above 2%.

The four numbers

---
description: Read the last 30 Playwright
  JSON reports, compute flake rate, rank
  flakiest specs, propose fixes for top 5.
argument-hint: [days]
---

You have $ARGUMENTS days of JSON reports
under .playwright/reports/.

For each spec, compute:
  - total runs
  - failed-then-passed-on-retry count
  - flake rate (= retries / runs * 100)
  - p95 duration

Sort by flake rate desc.
For the top 5, read the spec file and
propose 1-line fixes.

Output as a markdown table + a fix list.

# after the playwright job
- name: Flake gate
  run: |
    rate=$(node scripts/flake-rate.js)
    echo "flake rate: ${rate}%"
    if (( $(echo "$rate > 2.0" | bc -l) )); then
      echo "::error::Flake rate ${rate}% exceeds 2%"
      exit 1
    fi

# scripts/flake-rate.js
const { suites } = require('./playwright-report.json');
const all = suites.flatMap(s => s.specs);
const retries = all.filter(s => s.tests[0].results.length > 1).length;
console.log(((retries / all.length) * 100).toFixed(2));

> /report-flake 7
  also: produce a 5-bullet exec summary for the QA channel —
  start with the headline number, then the biggest mover,
  then top-3 specs to fix this week. Format for Slack.

When your test framework has no public docs

Teach Claude your in-house harness.

Three ways to teach Claude a framework it's never seen — pick one or stack all three. Pattern works for any internal CLI / DSL / fixture system.

## AcmeTest · our in-house test harness

Locators are NEVER raw CSS. Always use:
  acme.locate('@:')

Fixtures live in tests/_fixtures/ and are
auto-injected · NEVER instantiate manually.

Setup hook is beforeScenario, not beforeEach.

Assertions use acme.expect(x).toMatchSnapshot();
DO NOT import @playwright/test.

CLI:
  acme-test run --spec=tests/login.acme
  acme-test list-fixtures
  acme-test snapshot --update --spec=…

Reports land in .acme/reports/<ts>/.
Trace files at .acme/traces/<ts>/<spec>.trace.

Minimal custom MCP wrapper (Node)

import { Server } from '@modelcontextprotocol/sdk/server';
import { exec } from 'node:child_process';
import { promisify } from 'node:util';
const sh = promisify(exec);

const server = new Server({ name: 'acme-test', version: '1.0' });

server.tool('acme_run', {
  description: 'Run an AcmeTest spec and return the JSON report.',
  inputSchema: { type: 'object', properties: { spec: { type: 'string' } }, required: ['spec'] }
}, async ({ spec }) => {
  const { stdout } = await sh(`acme-test run --spec=${spec} --json`);
  return { content: [{ type: 'text', text: stdout }] };
});

server.tool('acme_list_fixtures', { description: 'List all available fixtures.' },
  async () => ({ content: [{ type: 'text', text: (await sh('acme-test list-fixtures')).stdout }] }));

server.start({ transport: 'stdio' });

{
  "mcpServers": {
    "acme-test": {
      "command": "node",
      "args": [".claude/mcp/acme-test/server.js"]
    }
  }
}

Day-by-day playbook for week one

Onboard a new QA to Claude Code in 5 days.

Hand a printable checklist to every new hire. By Friday they ship their first PR. By week two they're authoring custom skills.

The buddy prompt template

> /btw I'm a new QA on this repo. I'm trying to understand
  why tests/checkout/payment.spec.ts uses a custom
  fixture instead of the shared one in packages/qa.
  Read both files, give me a 4-bullet explanation a junior
  tester can follow. Do not change any code.

# /btw runs the question as a side-thread so the senior's
# main session isn't polluted.

Week-2 KPIs (manager checklist)

Capstone · channels → skill → site → live URL

Your channels become your portfolio.

Step 1 · package yourself as a Skill

Aggregate 6 channels into one Skill.

The Skill becomes the single source of truth — every later prompt reads from it. Whenever you publish new content, you re-run the Skill and the site updates itself.

> create a new skill at .claude/skills/pramod-me/SKILL.md that
  packages me as data. Aggregate the following channels and produce
  a single data.json file in the same folder:

  - GitHub      → https://github.com/promode
  - LinkedIn    → https://www.linkedin.com/in/thetestingacademy
  - Blog        → https://scrolltest.com
  - YouTube     → https://www.youtube.com/@TheTestingAcademy
  - Instagram   → https://instagram.com/thetestingacademy
  - Medium      → https://medium.com/@thetestingacademy

  For each channel:
    1. Fetch the public page with WebFetch.
    2. Extract: handle, follower count if visible, top 6 items
       (repo / post / video / reel / article) with title, url, date.
    3. Pull a one-line bio + headshot URL where available.

  Then in SKILL.md frontmatter:
    name: pramod-me
    description: Use whenever the user needs current data about
      Pramod Dutta — bio, top repos, latest videos, recent talks,
      newest blog posts — to render a personal site or CV.
    allowed-tools: WebFetch, Read, Write, Bash

  Procedure section must:
    - Read data.json if <= 7 days old, otherwise refresh from sources.
    - Expose 5 helpers: getBio(), getTopRepos(), getLatestVideos(),
      getRecentPosts(), getTalks().
    - Cache to data.json. Pretty-print, ASCII-only, sorted by date desc.

  Verify by running the skill end-to-end and pasting a summary of
  the JSON it produced. Stop if any fetch fails — ask before retrying.

Step 2 · scaffold + content + style

One mega-prompt → full Next.js site.

> using the pramod-me skill, scaffold a Next.js 15 portfolio at
  ./qa-portfolio. Requirements:

  STACK
    - Next 15 (app router), TypeScript strict, Tailwind, MDX.
    - Inter (sans) + JetBrains Mono. Teal accent #1a7c79.
    - Light theme, doc-style layout. No purple gradients, no neon.

  ROUTES
    /              hero · headline · 3 chip tags · CTA "watch on YouTube"
    /work          top 6 repos pulled from getTopRepos()
    /talks         talks + slide decks
    /writing       latest blog + Medium articles via getRecentPosts()
    /videos        embed latest 6 YouTube videos via getLatestVideos()
    /social        LinkedIn / Instagram cards, last 3 posts each
    /contact       email · calendar embed · X / GitHub links

  COMPONENTS
    - <ChannelStrip /> at footer · 6 icons → 6 URLs.
    - <Card /> with title, date, source-badge, hover lift.
    - <Hero /> · pulls from getBio() at build time.

  DATA
    - Read from .claude/skills/pramod-me/data.json.
    - getStaticProps for /work /talks /writing /videos.
    - ISR every 24h on prod.

  SEO + META
    - OpenGraph image generated dynamically per route.
    - JSON-LD Person schema on home.
    - sitemap.xml + robots.txt.

  After scaffold finishes, run pnpm dev and confirm the
  home page renders without console errors. Take a screenshot at
  390x844 and 1440x900, save them as docs/hero-mobile.png
  and docs/hero-desktop.png. Then stop and report.

Step 4 · Vercel + Testing Academy upload

From localhost to thetestingacademy.com.

> deploy ./qa-portfolio to vercel.
  - run vercel login if needed (hand
    me the OTP prompt).
  - project name: pramod-qa
  - link to repo github.com/promode/qa-portfolio
  - env vars (encrypted):
      ANTHROPIC_API_KEY
      YOUTUBE_API_KEY
      MEDIUM_RSS_URL
  - run vercel --prod.
  - print preview + prod URLs.
  - run playwright suite against
    the PROD url; paste HTML report.
  - finally, attach custom domain:
      pramod.thetestingacademy.com

> publish this masterclass deck to
  app.thetestingacademy.com/masterclass
  /ClaudeCode.html.

  Steps:
  - rename index.html → ClaudeCode.html.
  - SSH/SFTP to the app host using
    creds from ~/.ssh/tta_deploy.
  - place under
    /var/www/app/masterclass/.
  - chmod 644, chown www-data.
  - reload nginx.
  - verify with curl + a Playwright
    snapshot of the live URL.
  - commit the deck source to
    github.com/thetestingacademy/
    masterclass-decks on a new
    branch · open a PR.

Live demo · fill the form → see your portfolio appear

Try the portfolio generator right here.

Fill in your channels. Click Generate. A complete single-file portfolio renders in the preview pane on the right. Download it, deploy it. This is the same HTML Claude Code produces in the capstone — only here it runs in your browser so you can preview it instantly.

After download · ship it to Vercel

# 1. install vercel cli once
npm i -g vercel

# 2. make a folder, drop the file in
mkdir my-qa-portfolio && cd my-qa-portfolio
mv ~/Downloads/portfolio.html ./index.html

# 3. push to vercel · prod
vercel --prod

# follow prompts → pick project name → done.
# you get a https URL in ~20s.

# add a custom domain
vercel domains add pramod.thetestingacademy.com
vercel alias set <deployment-url> pramod.thetestingacademy.com

# add CI: redeploy on every push
vercel link
git init && git add . && git commit -m "init"
gh repo create pramod-qa --public --source=. --push

# vercel auto-detects the repo and
# rebuilds on every push to main.

Print-friendly reference · pin this above your desk

Claude Code · full cheat sheet.

Every keybinding, slash command, skill knob, hook tag, MCP transport, env var. Lifted from Claude Code v2.1+ release notes. Use ⌘P to print this page; the grid below collapses cleanly to A4.

Don't do these. Ever.

The new QA toolbelt.

Where to go next.