verify-and-diagnose
Apply when verifying that a feature works at runtime or debugging why it doesn't. Two modes: VERIFY (confirmatory — decide what checks a feature needs and construct them: typecheck, unit, integration, concurrency, browser/e2e, accessibility, performance budgets) and DIAGNOSE (investigative — find the root cause of a failure, regression, flaky test, or performance problem using browser automation, React and Chrome devtools, logs, network inspection, and profiling). Use this whenever a test or the verify gate fails, when something renders or behaves wrong, when chasing a slow or intermittent bug, or when deciding which checks to add. The verify-gate runner (feature-workflow/scripts/verify.py) executes checks; this skill is the knowledge of what to check and how to debug. Pick the mode before starting: confirming "does it meet spec" is VERIFY, investigating "why doesn't it" is DIAGNOSE.
What this skill does
# Verify and Diagnose The runtime feedback loop. The whole build discipline is worthless if you can't tell whether what you built works, and can't find out why when it doesn't. This skill is the two halves of that: **confirm** (verify) and **investigate** (diagnose). Both stand on observation. It composes with the rest of the system. The verify *gate* lives in `feature-workflow` (STAGE 1.5) and runs commands from `boundary.config.json`'s `verify[]`; this skill is the knowledge of *what those commands should be* and *how to debug when they go red*. The interface is config — no code coupling. The boundary-discipline model is used here as a map: it tells you what to verify and where bugs live. ## STEP 0 — Pick the mode | If you are… | Mode | File | |---|---|---| | confirming a feature meets spec; deciding/constructing checks; setting up the gate | **VERIFY** | `references/verify.md` | | finding why something fails, regressed, is flaky, or is slow | **DIAGNOSE** | `references/diagnose.md` | Decision rule: **confirming → VERIFY. investigating → DIAGNOSE.** They differ in shape — verify is binary, repeatable, gate-shaped; diagnose is open-ended, hypothesis-driven, search-shaped. They share tooling and hand off constantly (verify fails → diagnose → fix → verify), which is why they're one skill. Then read `references/observe.md` once (the shared observation surfaces), and follow your mode file. ## When to engage - Building a feature and deciding what proves it works → **VERIFY** (the checks feed the gate). - The verify gate or a test failed; something misbehaves → **DIAGNOSE**. - Pure static placement of boundaries (no running system) → that's `boundary-discipline`, not this skill. ## The handoff back to the machine A confirmed root cause should leave two deposits: a **regression check** added to the gate (shift-left — the bug can't reship) and, on the third bug of one shape, a **capture for the knowledge ratchet** (a new scan pattern / lint rule / reference). A fix that moves a boundary is a **boundary-discipline REFACTOR**. ## Files - `references/observe.md` — shared: how to observe a running system (browser, devtools, network, logs, profiler) + the boundary signals. Read once per task. - `references/verify.md` — confirmatory mode: construct gate-worthy checks, grounded in the boundary model and shift-left. - `references/diagnose.md` — investigative mode: hypothesis-driven debugging with the boundary model as a localization map. ## Note on the outer loop `observe.md` is written so its surfaces have production analogs (RUM, traces, log aggregation, error tracking). The future production-telemetry skill is the *same observation reference pointed at prod* — this skill is the foundation for the outer feedback loop, not only the inner one.
Related in Web Dev
generating-lwc-components
IncludedLightning Web Components with PICKLES methodology and 165-point scoring. Use this skill when the user creates or edits LWC components, builds wire service patterns, or writes Jest tests for LWC. TRIGGER when: user creates/edits LWC components, touches lwc/**/*.js, .html, .css, .js-meta.xml files, or asks about wire service, SLDS, or Jest LWC tests. DO NOT TRIGGER when: Apex classes (use generating-apex), Aura components, or Visualforce.
tanstack-query
IncludedManage server state in React with TanStack Query v5. Set up queries with useQuery, mutations with useMutation, configure QueryClient caching strategies, implement optimistic updates, and handle infinite scroll with useInfiniteQuery. Use when: setting up data fetching in React projects, migrating from v4 to v5, or fixing object syntax required errors, query callbacks removed issues, cacheTime renamed to gcTime, isPending vs isLoading confusion, keepPreviousData removed problems.
document-processor-api
IncludedProcess documents with Nutrient DWS. Use when the user wants to generate PDFs from HTML or URLs, convert Office/images/PDFs, assemble or split packets, OCR scans, extract text/tables/key-value pairs, redact PII, watermark, sign, fill forms, optimize PDFs, or produce compliance outputs like PDF/A or PDF/UA. Triggers include convert to PDF, merge these PDFs, OCR this scan, extract tables, redact PII, sign this PDF, make this PDF/A, or linearize for web delivery.
nutrient-document-processing
IncludedProcess documents with Nutrient DWS. Use when the user wants to generate PDFs from HTML or URLs, convert Office/images/PDFs, assemble or split packets, OCR scans, extract text/tables/key-value pairs, redact PII, watermark, sign, fill forms, optimize PDFs, or produce compliance outputs like PDF/A or PDF/UA. Triggers include convert to PDF, merge these PDFs, OCR this scan, extract tables, redact PII, sign this PDF, make this PDF/A, or linearize for web delivery.
tanstack-query
IncludedManage server state in React with TanStack Query v5. Covers useMutationState, simplified optimistic updates, throwOnError, network mode (offline/PWA), and infiniteQueryOptions. Use when setting up data fetching, fixing v4→v5 migration errors (object syntax, gcTime, isPending, keepPreviousData), or debugging SSR/hydration issues with streaming server components.
accelint-nextjs-best-practices
IncludedNext.js performance optimization and best practices. Use when writing Next.js code (App Router or Pages Router); implementing Server Components, Server Actions, or API routes; optimizing RSC serialization, data fetching, or server-side rendering; reviewing Next.js code for performance issues; fixing authentication in Server Actions; or implementing Suspense boundaries, parallel data fetching, or request deduplication.