Self-Paced Workshop — April 2026

The Complete AI Coding Workflow Workshop

A practitioner's guide to shipping production software with Claude Code, Cursor, and AI-powered development frameworks. From foundational concepts to team-wide enablement.

By Kalim · Head of AI, Liberate Labs

Workshop Modules

Module 01

The Universal Pattern Every AI Workflow Shares

Whether you use Claude Code, Cursor, Copilot, or Codex — every productive developer converges on the same meta-pattern. Internalize this before touching any tool.

01
Research
Read codebase deeply
02
Plan
Draft & annotate plan.md
03
Execute
Fresh agents, atomic tasks
04
Verify
Tests, lint, review diffs
05
Ship
Clean commits, PR, deploy

Why This Pattern Matters

The #1 mistake developers make with AI coding tools is letting the AI jump straight into writing code. Addy Osmani (Chrome team lead at Google) summarized the right approach: treat the LLM as a powerful pair programmer that requires clear direction, context, and oversight — not autonomous judgment. At Anthropic themselves, approximately 90% of the code for Claude Code is written by Claude Code itself, but always within structured workflows.

Context Engineering > Prompt Engineering

The paradigm shift in 2026 is from "prompt engineering" to context engineering — giving the AI the right information at the right time in the right format. Boris Cherny (Staff Engineer at Anthropic, creator of Claude Code) runs 10–15 sessions simultaneously with only ~100 lines in his CLAUDE.md file. His golden rule: "Anytime we see Claude do something incorrectly, we add it to CLAUDE.md so it doesn't repeat next time."

Context Rot: The Real Enemy

As a conversation grows, the AI accumulates prior messages, code snippets, and tool outputs that fill its context window. Quality degrades — the AI starts cutting corners. At 50% context usage, quality drops noticeably. At 70%+, hallucinations increase. At 90%+, responses become erratic. The fix: use subagents for heavy tasks, start fresh sessions for new work, and never dump information "just in case."

Key Insight from Boris Cherny's Workflow

His 6-step task loop: (1) Give Claude a task → (2) Claude creates a plan → (3) Review the plan → (4) Claude executes → (5) Review the diff → (6) If Claude made a mistake, have it write a rule in lessons.md. Over time, Claude literally teaches itself to be better at your specific project.

Essential Reads for This Module

Module 02

Claude Code Deep Dive

A terminal-first AI coding agent that reads files, runs commands, makes edits, and iterates. It's the backbone of the most productive AI-augmented engineering teams in 2026.

What Claude Code Actually Does

Claude Code is not autocomplete. It's an execution loop: it receives an instruction, pulls context from the codebase, chooses tools, makes changes, reads results, and decides what to do next. The prompt is one line; execution can be five or more steps. Understanding this loop is the key to using it effectively.

The Claude Code Ecosystem

Claude Code's power comes from its extensibility system. There are six main customization layers, each serving a different purpose:

LayerWhat It DoesKey Insight
CLAUDE.mdProject-level memory loaded every sessionAdvisory — Claude follows it ~80% of the time. Keep it lean.
SkillsOn-demand expertise loaded when relevantSkills are folders with SKILL.md, templates, scripts. Loaded dynamically.
SubagentsIsolated specialist assistants with fresh contextRun in own context with own tools. Keeps your main session clean.
HooksDeterministic scripts that run on events100% reliable — unlike CLAUDE.md which is advisory. Use for linting, formatting.
CommandsReusable prompt templates (/slash-commands)Markdown files in .claude/commands/. Automate repetitive workflows.
PluginsBundled packages of skills + hooks + agentsInstalled via /plugin from the marketplace. Community-shareable.
# Install Claude Code
npm install -g @anthropic-ai/claude-code

# Start in any project directory
claude

# Key shortcuts
Shift+Tab # Toggle Plan Mode (think before code)
Ctrl+S # Stash current prompt draft
Ctrl+B # Send long-running command to background
/compact # Compress context (use at 50-70% usage)
/rewind # Roll back conversation + code to checkpoint

Boris Cherny's Setup (Creator of Claude Code)

His CLAUDE.md is only ~100 lines / ~2,500 tokens. He runs 10–15 parallel sessions (5 terminal tabs, 5–10 web, a few mobile). Each session gets its own git worktree. His team's rule: the file is checked into git, shared by the whole team, and updated multiple times a week. See the full breakdown.

📖

Official Best Practices

Anthropic Docs — Canonical Reference

Plan Mode, CLAUDE.md, subagents, skills, hooks, MCP servers, parallel sessions, agent teams, CI/CD integration. The starting point for everything.

OfficialStart Here
💡

50 Claude Code Tips

Builder.io — Practical Daily Tips

Hook recipes (PostToolUse formatter, PreToolUse safety blocks), agent teams, /loop scheduling, statusline scripts, context compaction strategies, and more.

TipsPractical
🎯

Plan-first with Shift+Tab, TDD approach (70% fewer production bugs), custom slash commands, /rewind for safe experimentation, multi-session parallelism.

Claude CodeWorkflow
⚙️

Claude Code in Production

TrueFoundry — Mar 2026

Systems-level understanding: context ingestion, tool selection, iteration loops, failure modes, and scaling across a team. For engineering leads.

ArchitectureTeam
Module 03

Mastering CLAUDE.md

The single highest-leverage investment you can make. This file transforms Claude from a generic AI into a teammate who understands your codebase.

The Memory Hierarchy

Claude Code has a layered configuration system. Understanding it prevents duplication and conflicts:

  • Enterprise Policy — Organization-level rules (Claude for Teams)
  • ~/.claude/CLAUDE.md — Global personal preferences (loaded always)
  • ./CLAUDE.md — Project-level root (loaded always in this project)
  • ./src/auth/CLAUDE.md — Directory-level (loaded only when working in that directory)
  • .claude/local.md — Personal overrides, git-ignored

All levels combine — they don't replace each other. More specific rules override on conflicts.

What to Include (and What to Leave Out)

Claude Code's system prompt already contains ~50 instructions. That's nearly a third of the ~150-200 instruction limit models can reliably follow. Your CLAUDE.md must be lean — every line competes for attention.

✓ Include✗ Exclude
Build commands: npm run test, npm run buildPersonality instructions: "Be a senior engineer"
Non-obvious project conventions and architectureFormatting rules — use a linter/formatter hook instead
Common pitfalls specific to your codebase@-mentioning docs that embed entire files every session
Testing commands and verification scriptsDuplicate rules already in global or parent CLAUDE.md
Pointers to where to read more (just-in-time context)Step-by-step instructions for rare tasks (use Skills instead)

The HumanLayer Principle

CLAUDE.md is advisory (~80% compliance). Hooks are deterministic (100%). If something must happen every time without exception (formatting, linting, security checks), make it a hook. If it's guidance Claude should consider, CLAUDE.md is fine. Never send an LLM to do a linter's job. See Writing a Good CLAUDE.md for the full analysis.

📐

Next.js/TypeScript, Python/FastAPI, and generic templates. Based on official guidance and Boris Cherny's setup. Includes the "do's and don'ts" guide — the must-read companion file.

TemplatesStart Here
📝

Writing a Good CLAUDE.md

HumanLayer — Deep Analysis

Instruction limits, progressive disclosure, leverage diagrams. The most analytical treatment of what belongs in CLAUDE.md vs. hooks vs. skills.

GuideExpert
🧩

Claude Code Best Practice Repo

shanraisshan — Reference Implementation

Working demo of the full Command → Agent → Skill architecture pattern with weather example, sound hook system, and comprehensive CLAUDE.md configuration.

ReferenceAdvanced
Module 04

Skills, Subagents & Hooks

The extensibility system that transforms Claude Code from a chatbot into a configurable engineering platform.

Skills: On-Demand Expertise

Skills are folders with a SKILL.md file that give Claude specialized instructions for specific tasks. Unlike CLAUDE.md which loads every session, skills load dynamically only when relevant — keeping your context window clean.

Expert Tips on Skill Authoring

  • Skills are folders, not files — use references/, scripts/, examples/ subdirectories for progressive disclosure
  • The description field is a trigger, not a summary — write it for the model ("when should I fire?")
  • Don't state the obvious — focus on what pushes Claude out of its default behavior
  • Don't railroad Claude — give goals and constraints, not prescriptive step-by-step instructions
  • Build a Gotchas section — highest-signal content; add Claude's failure points over time
  • Embed !`command` in SKILL.md to inject dynamic shell output into the prompt at invocation time

Subagents: Isolated Specialists

Subagents run in their own context window with their own tools. They're defined in .claude/agents/ as markdown files with YAML frontmatter specifying name, description, tools, and model. Key properties include skills: (preloaded skills), mcpServers:, hooks:, isolation: "worktree", and effort: level.

Hooks: Deterministic Automation

Hooks run scripts automatically at specific lifecycle points. Available events include: PreToolUse, PostToolUse, UserPromptSubmit, Notification, Stop, SubagentStart/Stop, PreCompact, SessionStart/End, PermissionRequest, TaskCompleted, and more. Use hooks for anything that must happen 100% of the time.

# Example: Auto-format after every file edit (PostToolUse hook)
# Add to .claude/settings.json:
{
  "hooks": {
    "PostToolUse": [{
      "matcher": "Edit|Write",
      "hooks": [{
        "type": "command",
        "command": "npx prettier --write \"$CLAUDE_FILE_PATH\" 2>/dev/null || true"
      }]
    }]
  }
}

Build Skills from scratch, write frontmatter, distribute via plugins, deploy organization-wide, wire into subagents. The official course from Anthropic.

SkillsCourse
🎓

Agent Skills (DeepLearning.AI)

Short Course — Andrew Ng × Anthropic

Hands-on: skills across Claude.ai, Claude Code, API, and Agent SDK. Combine skills with MCP and subagents for complex workflows. Taught by Elie Schoppik.

SkillsHands-on
📋

The Claude A / Claude B iteration pattern, progressive disclosure, conciseness testing, and the "complete → identify → package → iterate" skill development cycle.

SkillsOfficial
📦

Skills Documentation

Claude Code Docs — Official

Full reference: SKILL.md format, frontmatter options, directory structure, subdirectory discovery for monorepos, scripts, progressive disclosure patterns.

SkillsReference
Module 05

GSD — Get Shit Done Framework

The spec-driven development framework with 45.6K+ GitHub stars that makes AI coding reliable at scale. Supports 8 AI runtimes including Claude Code and Cursor.

Why GSD Exists

Vibecoding has a bad reputation — you describe what you want, AI generates code, and you get inconsistent garbage that falls apart at scale. GSD fixes this by providing the context engineering layer that makes AI coding reliable. It forces planning before coding, spawns fresh context windows for each task, and verifies everything before shipping.

How It Works

GSD sits between you and your AI agent, structuring every interaction through four layers: Commands (your entry points), Workflows (orchestrators that load context and spawn agents), Agents (15 specialists with focused roles), and State (persistent .planning/ directory). The system uses 37 commands, wave-based parallel execution, and goal-backward verification.

GSD v1 vs v2

GSD v1 (get-shit-done, v1.28.0, 45.6K ⭐) is the prompt-based framework — installed as slash commands into your agent's configuration. Works across Claude Code, Cursor, Gemini CLI, Codex, Copilot, Windsurf, and Antigravity.

GSD v2 (gsd-2, newly released) is a standalone CLI built on the Pi SDK with direct TypeScript access to the agent harness. It can actually clear context between tasks, inject files at dispatch time, manage git branches, track costs, detect stuck loops, and auto-advance through entire milestones without human intervention.

# Install GSD v1 for Claude Code
npx get-shit-done-cc --claude --global

# Install for Cursor
npx get-shit-done-cc --cursor --global

# Install for all supported runtimes at once
npx get-shit-done-cc --all --global

# Core workflow
/gsd:new-project # AI interviews you, creates spec
/gsd:discuss-phase 1 # Resolve ambiguities upfront
/gsd:plan-phase 1 # Research + create verified plans
/gsd:execute-phase 1 # Fresh agents, atomic commits
/gsd:verify-work 1 # Goal-backward verification
/gsd:ship 1 # Create PR from verified work
/gsd:next # Auto-advance to next step

# Quick mode for ad-hoc tasks
/gsd:quick "Add dark mode toggle" --research --full
🚀

GSD v1 — GitHub (45.6K ⭐)

gsd-build • v1.28.0 • MIT License

The original prompt framework: 15 agents, 37 commands, multi-wave parallel execution. Trusted by engineers at Amazon, Google, Shopify, and Webflow.

GSD45.6K Stars
🧠

GSD v2 — Standalone Agent CLI

gsd-build • Newly Released

The evolution: standalone CLI on Pi SDK with real control over context, sessions, git, costs, and auto-recovery. 20+ model providers supported.

GSD v2New
🎓

GSD Interactive Lesson

CC for Everyone — 45-60 min

Build a real Expense Splitter app while learning GSD. Covers context rot, fresh subagent contexts, atomic verifiable builds. Hands-on walkthrough.

Hands-onTraining
📖

GSD Deep Dive: The Anatomy

codecentric — Technical

How GSD works under the hood. Spec-driven dev patterns, workflow files, Q&A requirement definition systems. Understand fundamentals to build your own.

ArchitectureTechnical
Module 06

Cursor IDE Workflows

The AI-first IDE built on VS Code. Over 90% of Salesforce developers and 40,000+ engineers at major companies now use it. Cursor 2.0 shipped agents, hooks, and the Composer model.

Key Cursor Concepts

  • Plan Mode (Shift+Tab) — Ask for a plan before coding. The most impactful single change.
  • Rules (.cursor/rules/*.mdc) — Project-specific instructions, auto-attached by glob patterns. Version-controlled.
  • Agent Skills — Same SKILL.md format as Claude Code. Loaded dynamically when relevant.
  • Background Agents — Work on separate branches in isolated Ubuntu VMs with internet access. Like AI pair programmers.
  • Hooks — Scripts that run before/after agent actions (e.g., auto-format on every edit).
  • Context referencing — Point at similar code: "Make a dropdown similar to @components/Select.tsx" dramatically improves output quality.

The .cursorrules File: Quick Wins

Create a .cursor/rules/ directory with .mdc files for project-specific rules. Key rules to add immediately: "Never replace code with placeholders", "Always provide complete code", "Break problems into smaller steps", "Always provide a PLAN with REASONING before making changes."

📖

Official Agent Best Practices

cursor.com — Canonical Reference

Plan Mode, rules, agent skills, review workflows (Stop → Review → Agent Review), background agents, and the "iterate on setup" philosophy.

CursorStart Here
🔧

Cursor Best Practices (Community)

digitalchild — GitHub

.cursorrules files, .mdc rule files, Composer vs Agent mode, instructions.md, context management, .cursorignore, and the full rule priority system.

ConfigPractical
💡

Production Cursor Workflow

N's Blog — Real-World Lessons

The 10-line .cursorrules that fixed common problems, context-referencing technique, morning planning / afternoon execution workflow split.

ProductionWorkflow
📋

PRDs with Cursor 2026

ChatPRD — Spec-Driven

Product Requirement Documents + Cursor's Cloud Agents + Interactive UIs + Multi-model support. Connecting product thinking to code generation.

PRDProduct
Module 07

Official Courses & Certifications

Anthropic Academy launched 13 free courses on March 2, 2026. All free, all with certificates, no paid subscription needed. Plus additional resources from DeepLearning.AI and Coursera.

Anthropic Academy — The Official Platform

Hosted on Skilljar at anthropic.skilljar.com, these courses are taught by the engineers who built Claude. Every completed course awards an official certificate you can add to LinkedIn. The full catalog takes approximately 15-20 hours to complete.

🏛️

Claude Code in Action

Anthropic Academy — ~1 hour — FREE

21 lessons: AI coding assistant architecture, tool system, context management, custom commands, MCP integration, GitHub automation, hooks, and the SDK. Best ROI course in the entire Academy.

CertificateOfficial
🏛️

Introduction to Agent Skills

Anthropic Academy — FREE

Build Skills from SKILL.md frontmatter, organize with progressive disclosure, distribute via plugins, deploy organization-wide, wire into subagents. Troubleshooting included.

CertificateSkills
🏛️

Introduction to Subagents

Anthropic Academy — ~20 min — FREE

Use and create subagents to manage context, delegate tasks, and build specialized workflows that keep your main conversation clean and focused.

CertificateAgents
🏛️

Claude 101

Anthropic Academy — FREE

First conversations, prompting, desktop app, Projects, Artifacts, Skills, enterprise search, Research Mode, and role-specific use cases. The entry point for non-developers.

CertificateBeginner
🏛️

MCP Courses (Intro + Advanced)

Anthropic Academy — FREE

Build MCP servers and clients from scratch in Python. Three core primitives: tools, resources, prompts. Advanced course covers sampling, notifications, transport mechanisms for production.

CertificateMCP
🏛️

Building with the Claude API

Anthropic Academy — 8+ hours — FREE

The deepest course: 84 lectures, 10 quizzes. API authentication, multi-turn conversations, prompt engineering, tool use, streaming, extended thinking, RAG, and production patterns.

CertificateAPI

Official Anthropic Webinars

Live and recorded deep dives directly from the Anthropic engineering team — covering practical workflows you won't find in the docs.

🎥

Claude Code in an Hour: A Developer's Intro

Anthropic Webinar — Live / Recorded

The fastest way to go from zero to productive with Claude Code. Ideal for team workshops — watch together, then immediately apply to your own projects.

WebinarBeginner
🎥

Advanced Patterns: Subagents, MCP & Scaling

Anthropic Webinar — Live / Recorded

Deep dive into subagents, MCP server integration, and scaling to real codebases. Covers the advanced patterns that separate beginners from power users.

WebinarAdvanced

Additional Learning Resources

🎓

Agent Skills with Anthropic

DeepLearning.AI — Short Course

Andrew Ng × Anthropic. Build skills across Claude.ai, Claude Code, API, and Agent SDK. Combine with MCP and subagents. Create a research agent from scratch.

CourseSkills
🎓

Claude Code in Action (Coursera)

Coursera — FREE Enrollment

Same content as Anthropic Academy version but with Coursera Coach AI assistant, additional quizzes, assessments, and interactive dialogues for reinforcement.

CourseInteractive
🎓

Claude Code: Prototype to Production

Udemy — Frank Kane (ex-Amazon)

Build a complete online radio station web app from scratch. Hands-on project covering the full dev lifecycle, limitations of AI, and when human insight is essential.

CourseProject
📚

Anthropic Courses (GitHub)

Official Jupyter Notebooks

5 interactive notebook courses: API fundamentals, prompt engineering tutorial, real-world prompting, prompt evaluations, and tool use. All code-along format.

NotebooksCode-Along

Recommended Learning Path

  • Developer (1 hour): Claude Code in Action → earn certificate → immediate productivity boost
  • Full Stack (4 hours): Claude Code in Action → Introduction to Agent Skills → Introduction to Subagents → MCP Intro
  • Manager / Lead (2-3 hours): Claude 101 → AI Fluency: Framework & Foundations
  • Complete Path (~15 hours): All courses above + Building with the Claude API + Advanced MCP
Module 08

Essential Repos, Tools & References

The curated collection of community resources, tools, and references that accelerate your AI coding workflow.

awesome-claude-code

The Definitive Curated List

Skills, hooks, slash-commands, agent orchestrators, CLAUDE.md files, plugins, tooling, and educational resources. Updated daily. Bookmark this and check weekly.

Awesome ListEssential
🔬

Claude Code Unpacked

ccunpacked.dev — Visual Architecture Map

Interactive deep-dive into Claude Code's internals mapped from the source: the agent loop from keypress to response, 40+ built-in tools, multi-agent orchestration, slash commands, and unreleased features. 929 HN points. Essential for understanding how it actually works.

ArchitectureMust See
📦

Everything Claude Code

affaan-m — Comprehensive Collection

A comprehensive collection of Claude Code resources, guides, tools, and community projects in one place. Great as a discovery starting point alongside awesome-claude-code.

CollectionComprehensive
📚

Claude Code Ultimate Guide

Florian Bruniaux — 6 months of daily practice

Beginner to power user. Production templates, security auditing (24 CVEs, 655 malicious skills tracked), context management rules, quizzes, cheatsheet, and case studies.

GuideComprehensive
🎓

claude-howto (Visual Tutorial)

v2.2.0 — 10-Module Learning Path

Progressive learning with diagrams and copy-paste templates. Install your first slash command in 15 minutes. Includes quizzes per module. Perfect for onboarding.

TutorialTraining
🔧

Claude Code Templates (CLI)

100+ installable components via npm

Install agents, commands, hooks, MCPs, and settings via a single CLI. Real-time session monitoring dashboard. Complete dev stack in one command.

CLI ToolInstallable
📐

CLAUDE.md Templates Kit

Next.js, FastAPI, Generic

Copy-paste starter templates based on official guidance and Boris Cherny's setup. Lean, battle-tested configs with the do's-and-don'ts companion guide.

TemplatesStart Here
🛠️

Claude Code Workflows (Plugin)

End-to-end dev workflow plugins

Plugin marketplace: dev-workflows (backend), dev-workflows-frontend, discover (product discovery), metronome (prevents shortcut-taking), governance (signoff checkpoints).

PluginsWorkflow
🔗

Claude Toolbox / Starter Kit

serpro69 — Template Repository

Template repo with kk plugin (9 skills, 4 commands, hooks). Team-first: project-scoped settings shared via git. Template sync workflow for updates.

TemplateTeam
📊

Guide to Claude Code 2.0

sankalp — Practitioner's Perspective

Skills vs plugins vs hooks in practice, real-world CLAUDE.md approach, when to use subagents, MCP integration decisions, and the "harness heavy-carries" insight.

ExperiencePractical
Module 09

For QA Engineers

AI doesn't replace QA — it shifts the role from writing repetitive test code to designing testing strategy. Claude Code + Playwright is the most powerful QA automation combination available today.

How Claude Code Transforms QA Workflows

Claude integrates directly with frameworks like Playwright, Selenium, and Cypress — going from generated test cases to running them inside your CI/CD pipeline with minimal manual translation. Playwright now ships with three specialized agents (planner, generator, and healer) that work as Claude Code subagents specifically built for test automation.

The "Council of Sub Agents" Pattern (OpenObserve Case Study)

OpenObserve's QA team built 8 specialized AI agents powered by Claude Code that automate their entire E2E testing pipeline. Feature analysis dropped from 45-60 minutes to 5-10 minutes, flaky tests reduced by 85%, and test coverage grew from 380 to 700+ tests. The key insight: specialization over generalization — early iterations tried using one "super agent" and failed.

  • The Analyst — dives into source code, extracts data-test selectors, maps user workflows, identifies edge cases
  • The Architect — creates prioritized test plan (P0 critical, P1 core, P2 edge cases)
  • The Engineer — writes Playwright test code using Page Object Model patterns
  • The Sentinel — audits generated code for framework violations, anti-patterns, security issues

Quick Wins for QA Teams

  • Test generation from specs: claude "read the auth module and generate Playwright E2E tests for login, registration, and password reset"
  • Automated PR testing: Set up Claude Code as a GitHub Action that runs QA checks on every pull request and posts a verification report as a PR comment
  • Flaky test healing: When tests fail, Claude analyzes the report, identifies root causes (timing, bad selector, or actual bug), and suggests fixes
  • Test case documentation: Claude generates detailed tables with inputs, expected results, and rationale — matching enterprise QA documentation standards

The "Quinn" Pattern — AI QA on Every PR

Create a QA persona that runs on every pull request via GitHub Actions using anthropics/claude-code-action with Playwright MCP. The agent tests the app like a real user — clicks buttons, fills forms, resizes the browser, checks mobile layouts — and writes detailed bug reports. Setup guide: Building an AI QA Engineer with Claude Code and Playwright MCP

🧪

Council of Sub Agents (700+ Tests)

OpenObserve — Full Case Study

How 8 specialized Claude Code agents automated E2E testing. 85% reduction in flaky tests, caught production bugs while writing tests. Full implementation details.

Case StudyMust Read
🎭

Playwright Agents + Claude Code

Shipyard — Subagent Testing

Playwright's 3 specialized agents (planner, generator, healer) as Claude Code subagents. How the planner works through scenarios like a QA engineer would.

PlaywrightSubagents
🔧

Playwright MCP + Claude Code Guide

Testomat.io — Full Setup Guide

Complete setup: MCP server config, Three Amigos workflow integration, requirement-based test generation, failure analysis, and automated test healing.

MCPGuide
📋

Test Case Generation with MCP

TestCollab — Tutorial

From raw codebase to fully populated test suite in minutes using TestCollab MCP Server (17 tools). Generate suites, write cases, manage plans, log execution results.

Test MgmtMCP
🛡️

Automated QA in Claude Code

Foxbox Digital — Real Project Lessons

Real QA workflow with Claude: recorder-to-code pipeline, Page Object Model generation, common pitfalls (fragile selectors, hardcoded values), and the human/AI handoff points.

ProductionLessons
📊

Claude AI for Test Generation & QA

Second Talent — Comprehensive Review

Structured evaluation: Claude scored 9.5/10 on test generation quality. Covers positive/negative test cases, Jest suites, CI/CD integration, and edge case coverage.

ReviewEvaluation
Module 10

For Designers

The design workflow is being redefined. Designers at Jane Street now design with Claude more than Figma. The Claude Code + Figma MCP bridge is eliminating the translation layer between design and code.

The New Design Paradigm

In February 2026, Figma officially launched Claude Code to Figma — an MCP integration that lets you capture a rendered UI from a browser (production, staging, or localhost) and convert it into editable Figma frames. Not images. Not screenshots. Fully editable layers with proper naming and auto layout. You can push changes back and forth between code and canvas.

Figma's CEO says the traditional "product → design → code" sequence is dead. Modern workflows start anywhere and go everywhere. The ultimate skill is now deciding what to build, not how to build it.

Three Design Workflows with Claude Code

Workflow A: Code-First Exploration

Describe what you want → Claude Code builds it → Send to Figma for refinement → Push changes back. A Jane Street designer reports that prototypes built this way have "felt better in almost every way compared to mockups and docs." Claude gave unlimited iteration — unbothered when they changed their mind for the 50th time.

Workflow B: Design System Skills

Build Claude Code skills that encode your design system: principles, component specs, content strategy, motion guidelines. Then create capability skills that compose these into pipelines: PRD → design ticket → user flow → generate design → review → QA signoff.

Workflow C: FigJam + Claude for Strategy

Generate user flow diagrams, Gantt charts, system architecture diagrams, and decision trees directly from PRDs or conversations with Claude — all as editable FigJam diagrams for team collaboration.

Practical Experiments to Try

  • Design analytics archaeology: Render legacy features from production code back into editable Figma layers, cross-reference with analytics
  • Accessibility checker: Run automated analysis, generate violations as annotated Figma layers with suggested fixes, push corrected designs back to code
  • A/B test variant generator: Feed performance data (drop-off rates, rage clicks) into Claude, generate multiple design variants, land them in Figma as editable explorations
  • Realistic prototyping: Build working prototypes for user research interviews — more realistic than Figma prototypes, with real data and interactions
🎨

Claude Code to Figma (Official)

Figma Blog — Feb 2026

The official launch announcement. How code-first exploration meets canvas-based divergence. Capture browser UI as editable Figma frames, iterate between code and design.

FigmaOfficial
✍️

A designer's experience building prototype features in the actual codebase. "Workflow improvements that would have taken days of engineering back-and-forth, or more likely would never have happened."

DesignMust Read
📐

A Designer's Guide to Claude Code

Katherine Yeh — Design Bootcamp / Medium

The complete skill architecture for designers: reference skills (principles, specs), capability skills (design review, generation, prototyping), and MCP tool connectors. Full pipeline examples.

SkillsArchitecture
🎯

Figma MCP: The Designer's Playbook

ADPList — Setup Guide + Workflows

"After 100 days of vibe-coding as a designer" — the smoothest workflow for 5x faster designs. Figma MCP setup, token-first workflow (C), and one-shot game built from FigJam flowchart.

Figma MCPPlaybook
💬

Claude + FigJam for Strategic Thinking

Figma Blog — Diagramming

Turn AI conversations into editable FigJam diagrams. User flows from PRDs, system architecture from code, Gantt charts, decision trees. Visual collaboration for PMs, designers, and engineers.

FigJamStrategy
Module 11

For Product Managers

PMs face increasing pressure to move beyond writing requirements and waiting for sprints. Claude Code enables non-engineers to build functional prototypes, investigate user issues, and analyze codebases directly.

The PM's Claude Code Toolkit

Product managers don't need to become engineers. But learning to work with Claude Code unlocks capabilities that were previously impossible without developer help:

  • Build functional prototypes — describe a feature, Claude builds a working version you can test with users
  • Investigate user issues — query databases, read logs, trace bugs through the codebase
  • Generate PRDs that work — specs that Claude Code can actually execute, not just documents for humans
  • Competitive analysis — Claude Cowork for scanning competitor pricing pages, critiquing their UI, generating strategy decks
  • Data analysis — connect to databases via MCP, run SQL queries, generate reports with visualizations

The "Baby Steps" Framework

The most common PM mistake is the "spec dump" — feeding a complete feature specification and expecting a miracle. The baby steps framework breaks features into 3-5 focused tasks with clear verification criteria at each step. Build → verify → add complexity → verify → integrate → verify.

MCP Servers for Product Work

Connect Claude Code to your product tools: GitHub MCP (create PRs, update issues, run Actions), Jira MCP (update tickets, add comments, estimate story points), Figma MCP (bridge design and implementation), Slack MCP (notifications, fetch messages), Database MCP (query data, analyze schemas).

Five Real PM Workflows with Claude Code

  • Rapid prototyping: "Build a working prototype of this user onboarding flow" → test with real users in hours, not weeks
  • Bug investigation: "Trace why users are seeing error X" → Claude reads logs, finds root cause, suggests fix
  • Sprint planning support: "Analyze the auth module and estimate complexity for adding OAuth" → informed story point discussions
  • Documentation generation: "Read the codebase and generate API documentation for the partner integration" → always up-to-date docs
  • User analytics: Connect to your database → "Show me the drop-off funnel for the checkout flow this month" → instant data analysis
📋

How to Use Claude Code as a PM

ProdMgmt World — Complete Guide

5 real workflows with step-by-step examples. Installation, agents, MCP servers, the "baby steps" framework, cost management, and avoiding the "spec dump" anti-pattern.

PM GuidePractical
🎯

PRDs with Cursor (2026)

ChatPRD — Spec-Driven Development

How to write PRDs that AI agents can actually execute. Cursor's Cloud Agents, Interactive UIs, multi-model support. Connecting product thinking to code generation.

PRDCursor
💡

Claude Code to Figma & Product Taste

Department of Product — Strategy

The 5 meta-skills that matter now: problem shaping, context curation, product "taste," agent orchestration, and knowing when NOT to use agents. The new PM skillset.

StrategyMeta-Skills
🏛️

Claude 101 (Anthropic Academy)

FREE — Certificate Included

The starting course for PMs: prompting, Claude desktop app, Projects, Artifacts, Skills, Research Mode, and role-specific use cases. Certificate for LinkedIn.

CourseBeginner
Module 12

Team Enablement Playbook

A phased approach to rolling out AI coding workflows across your engineering team. Designed for technical leads and engineering managers.

Phase 1: Foundation (Week 1–2)

Phase 2: Workflow Adoption (Week 3–4)

  • Enforce plan-first: No coding without Plan Mode review. Have a second Claude review plans as a staff engineer.
  • Run one full GSD cycle: /gsd:new-project → discuss → plan → execute → verify → ship on a real feature
  • Start the "mistake → rule" loop: Every AI error becomes a CLAUDE.md rule or hook. Commit weekly.
  • Complete: Introduction to Agent Skills course → build first custom skill
  • Set up hooks: Auto-format (PostToolUse), safety blocks (PreToolUse for destructive commands)

Phase 3: Scale & Optimize (Week 5+)

  • Custom slash commands per project: /new-component, /fix-issue, /deploy, /test-coverage, etc.
  • MCP integrations: Connect to Notion, Slack, GitHub, Linear, Figma for workflow automation
  • Subagent specialists: Create security-reviewer, performance-auditor, and documentation-generator agents
  • Plugins: Evaluate and install from the marketplace (/plugin), create and share team-specific plugins
  • Metrics: Track cycle time, bug rates, AI-assisted vs manual commit ratios, context usage patterns
  • Parallel workflows: Git worktrees for concurrent development, agent teams for large refactoring

Measurement Framework

Most teams operate at only 15-25% flow efficiency — 75-85% of lead time sits in queues and delays. If AI accelerates coding but review queues grow, overall delivery won't improve. Measure:

  • Before/after baselines: Establish metrics before introducing AI tools, compare after rollout
  • Cycle time (not just coding speed) — end-to-end from issue to production
  • Bug rates and revert frequency — faster output is costly if defects increase
  • Context usage patterns — are developers hitting context rot regularly?
  • Developer satisfaction — qualitative feedback on workflow friction