sdd-verify

Original：🇺🇸 English

Translated

Surface-aware end-to-end verification of a change — determine whether it touches a FRONTEND surface (rendered UI) or an API/backend surface, then validate the right way. Frontend → chrome-devtools MCP (open the affected page, screenshot, confirm it renders, check console/network/accessibility). API → a Playwright request script that hits the affected endpoints and asserts status + response shape. Use after implementing a change, or in the harness Validate step, to confirm it actually works in the running app — not just that unit tests pass. Requires the chrome-devtools-mcp plugin (frontend) and/or Playwright (API); both are wired up by the kit installer.

6installs

Sourcealejandro-cedeno-10/agentic-sdd-kit

Added on2026-07-07

NPX Install

npx skill4agent add alejandro-cedeno-10/agentic-sdd-kit sdd-verify

SKILL.md Content

View Translation Comparison →

Surface-aware verification

Unit tests prove the code does what its tests say; this skill proves the change works in the running app. It picks the validation that matches what the change actually touches.

1. Detect the surface (from the diff)

Inspect

git diff

for the change:

Frontend if it touches rendered UI:
```
.tsx/.jsx/.vue/.svelte/.html/.css/.scss
```
, component or page/route dirs, design tokens, a Storybook, etc.
API / backend if it touches request handlers, routes, controllers, resolvers, an OpenAPI/Swagger spec, serializers, or lambda handlers.
A change can be both — validate both surfaces.

If neither surface is present (pure lib/tooling/docs), say so and stop — there is nothing to drive; the unit-test floor is the whole gate.

2. Frontend → chrome-devtools MCP

Requires the

chrome-devtools-mcp

plugin (load its tools via ToolSearch:

+chrome navigate

).

Start (or confirm) the dev server — read the project's run/dev script; do NOT assume a port.
```
navigate_page
```
to the affected route(s).
```
take_screenshot
```
— confirm the design renders (layout, the changed component, no obvious breakage). If the change has a reference design, compare against it.
```
list_console_messages
```
— no new errors.
```
list_network_requests
```
— no failed calls for the view. Optionally run an accessibility/Lighthouse check on the affected page.
Report: rendered ✓/✗, console clean ✓/✗, network clean ✓/✗, with the screenshot as evidence.

3. API → Playwright request script

Requires Playwright (the kit installer confirms it; else

pnpm add -D @playwright/test

).

Identify the affected endpoints (method + path) from the diff and any OpenAPI delta.

Write a throwaway script under

scripts-dev/

(e.g.

api_smoke.spec.ts

) using Playwright's

request

context — NOT a browser:

ts

import { test, expect, request } from '@playwright/test'
test('affected endpoint', async () => {
  const api = await request.newContext({ baseURL: process.env.BASE_API_URL })
  const res = await api.get('/the/affected/path')      // or .post(...) with a body
  expect(res.status()).toBe(200)
  expect(await res.json()).toMatchObject({ /* the shape the delta spec promises */ })
})

Run it with THIS shell's own credentials/env (do not assume-role, do not widen IAM):
```
npx playwright test scripts-dev/api_smoke.spec.ts
```
.
Report status codes + shape assertions per endpoint; keep or delete the script per the repo's convention.

When in the flow

The harness's Validate phase runs the deterministic floor (unit tests +

openspec --strict

); it does NOT auto-drive a browser or an API. Invoke THIS skill yourself — or have the agent invoke it — after implementing a change, or before approving a PR, to confirm the running surface actually works. It stays a skill (not an automated gate) so the harness remains stack-agnostic.

Rules

Drive the REAL surface; a passing unit suite is not the same as "the page renders" or "the endpoint returns the promised shape".
Never widen credentials/IAM to make a check pass — use the session's own environment.
Throwaway API scripts live under
```
scripts-dev/
```
; never commit secrets into them.