Verify with a PRD

The task tracker now has a schema, an API, pages, access control, and a workflow. The PRD pins all of that down: a plain-language requirements document where every entry is backed by a real test, so anyone can confirm the app does what it should by watching it rather than reading code. This page adds one feature entry end to end; the full system is covered in PRD Verification.

Declare the requirement

Add the entry to prd.json at the app root:

{
  "sections": [
    {
      "id": "tasks",
      "title": "Managing tasks",
      "entries": [
        {
          "id": "tasks.member-can-add",
          "title": "A member can add a task",
          "behavior": "A signed-in member types a task and adds it; the task appears in their list.",
          "acceptanceCriteria": [
            "The new task appears in the member's list immediately"
          ],
          "test": { "type": "e2e", "file": "prd/tests/tasks.member-can-add.spec.ts", "name": "tasks.member-can-add" }
        }
      ]
    }
  ]
}

The entry is a claim in plain language. The binding keeps it honest: test.name must equal the entry id, and the build fails on any entry whose test doesn’t exist.

Write the hero test

Create prd/tests/tasks.member-can-add.spec.ts, a story told in steps, each one user action ending on its visible result:

import { definePrdTest, expect } from "@synthetiq/app-framework/prd/harness";

definePrdTest("tasks.member-can-add", async ({ prd }) => {
  const page = await prd.actAs({ scopes: [] }); // any signed-in member

  await prd.step("A member opens their task list", async () => {
    await page.goto("/");
    await expect(page.getByText("No tasks yet")).toBeVisible();
  });
  await prd.step("They type a new task", async () => {
    await page.getByLabel("New task").pressSequentially("Ship the report", { delay: 90 });
  });
  await prd.step("They click Add", async () => {
    await page.getByRole("button", { name: "Add" }).click();
    await expect(page.getByText("Ship the report")).toBeVisible();
  });
  await prd.verify("The task 'Ship the report' now appears in their list", async () => {
    const task = page.getByText("Ship the report");
    await prd.highlight(task);
    await expect(task).toBeVisible();
  });
});

prd.step marks one beat of the recording; prd.verify records an assertion with its plain-language label. The harness handles watchability automatically: pacing, a visible cursor, your step labels shown as the flow plays, and who’s acting at each step.

Run it

synthetiq-app build      # compiles, and runs the PRD suite
synthetiq-app prd:test   # full run: records the videos and writes results back

prd:test boots the app against a throwaway test database with all services stubbed, runs the entry, and writes the result into prd.json along with recordings in both light and dark themes.

Watch it

Open the app’s PRD view and click into the entry. You’ll find the video with a synced step timeline, the database state the test started from and ended with, and every service call the app made. From here on, the suite re-runs on every build: change the app, and this entry either stays green or tells you exactly what broke.

Going further

This entry is the simplest case. The PRD system covers considerably more:

Feature tests — seeding data, acting as multiple users with different permissions and data
Verifying calculations — proving metrics and aggregations produce exact values
Services and workflows — asserting what the app sends, and running workflows for real
Access verification — the machine-checked access matrix for every endpoint

Platform Docs

Synthetiq Desktop

Synthetiq CLI

App Framework

Services Framework

Workflows Framework

Platform API

Deployments

Verify with a PRD

Declare the requirement

Write the hero test

Run it

Watch it

Going further

​Declare the requirement

​Write the hero test

​Run it

​Watch it

​Going further

Declare the requirement

Write the hero test

Run it

Watch it

Going further