GET /api/agent/context/[id] — annotation + HTML + diff in one
+ request.
+
+ ),
+ },
+ {
+ index: '04',
+ title: 'Plan + execute',
+ body: 'TDD plan; subagents implement; DS edits are first-class plan tasks.',
+ markup: (
+ <>
+ Patches land via PATCH /api/mockups/[id]/version-patch. Reviewer sees the diff
+ inline.
+
+ ),
+ },
+ {
+ index: '05',
+ title: 'Visual + behavior QA',
+ body: 'Live route vs DS reference. Chrome MCP drives the state matrix; deltas loop until parity.',
+ markup: 'Regressions reopen the loop on the same pin. Same surface, same protocol, no rebuild.',
+ },
+];
+
+export function DesignFeatureFlow() {
+ return (
+
+ design-feature orchestrates the whole lifecycle of a user-visible feature —
+ from "I want a pricing card" to a parity check against the Design System. Markup is the
+ substrate that turns every phase into a hosted, addressable artifact: a pin, a version, a
+ diff.
+
{p.body}
+
+ Mockup hosted on the same surface as production. Pins anchor to the same DOM. The agent
+ reads context, patches HTML, and replies on the thread — every step in 0→5{' '}
+ leaves an addressable trail.
+
- design-feature orchestrates the whole lifecycle of a user-visible feature —
- from "I want a pricing card" to a parity check against the Design System. Markup is the
- substrate that turns every phase into a hosted, addressable artifact: a pin, a version, a
- diff.
+ design-feature is a community skill that gets the most out of your AI agent and
+ Markup. It runs the agent through a UI/UX brainstorm, hands you a live tweaker to explore
+ every option it proposes, and only opens the implementation conversation once the design is
+ locked.
{p.body}
-| Capability | -- Markup - | -Slack + screenshots | -Figma comments | -
|---|---|---|---|
| {r.cap} | -{r.us} | -{r.a} | -{r.b} | -
GET /api/agent/context/[id] — annotation + HTML + diff in one
- request.
-
- ),
+ body: 'The implementation conversation only opens after the design is locked. No UI re-design at this layer.',
+ markup:
+ 'With Markup, the agent already sees the final mockup and the full review thread before the technical discussion starts.',
},
{
index: '04',
- title: 'Plan + execute',
- body: 'TDD plan; subagents implement; DS edits are first-class plan tasks.',
- markup: (
- <>
- Patches land via PATCH /api/mockups/[id]/version-patch. Reviewer sees the diff
- inline.
-
- ),
+ title: 'Plan + build',
+ body: 'A TDD plan splits the work into small tasks. Sub-agents implement them in parallel against the locked design.',
+ markup:
+ 'With Markup, the agent ships each change as a versioned patch. You see exactly what was changed and reply on the original thread.',
},
{
index: '05',
title: 'Visual + behavior QA',
- body: 'Live route vs DS reference. Chrome MCP drives the state matrix; deltas loop until parity.',
- markup: 'Regressions reopen the loop on the same pin. Same surface, same protocol, no rebuild.',
+ body: 'A browser-driven check compares the live build against the Design System reference and loops on any drift.',
+ markup:
+ 'With Markup, any regression reopens the same review surface. You drop a new pin and the loop starts again, no rebuild needed.',
},
];
@@ -105,9 +100,9 @@ export function DesignFeatureFlow() {
- Mockup hosted on the same surface as production. Pins anchor to the same DOM. The agent
- reads context, patches HTML, and replies on the thread — every step in 0→5{' '}
- leaves an addressable trail.
+ The mockup lives on the same surface as production. Pins anchor to the same DOM. The agent
+ reads context, patches HTML, and replies on the thread, so every step from 0 to{' '}
+ 5 leaves an addressable trail.
POST /api/mockups/[id]/annotations.
- Body required; pins optional.
-
- ),
- },
- {
- title: 'Context',
- body: (
- <>
- GET /api/agent/context/[id] returns the annotation, the current inline HTML,
- and a diff since creation — in one request.
-
- ),
- },
- {
- title: 'Patch',
- body: (
- <>
- PATCH /api/mockups/[id]/version-patch accepts standard unified diffs against a
- base version. Atomic, append-only.
-
- ),
- },
- {
- title: 'Reply',
- body: (
- <>
- POST /api/threads/[id]/reply closes the loop. The reviewer sees the diff inline
- and resolves.
-
- ),
- },
-];
-
-export function FixLoopSteps() {
- return (
- - A reviewer drops a pin. The agent fetches one aggregated context payload, applies a patch, - and replies on the thread. That's the loop — same shape whether the agent is Claude Code, - Cursor, Aider, or your own CI script. -
-{s.body}
-
- A live Markup surface, running on your browser. Drop pins, write annotations, react, reply —
- everything persists in localStorage so the next visitor finds a clean slate.{' '}
+ A live Markup surface, running on your browser. Drop pins, write annotations, react, reply.
+ Everything persists in localStorage so the next visitor finds a clean slate.{' '}
Reset any time.
{c.body}
+{body}
{p.body}
- elements that split text nodes, so we
+ // assert against the concatenated text of the last in the section.
+ const paragraphs = container.querySelectorAll('p');
+ const codaText = paragraphs[paragraphs.length - 1]?.textContent;
+ expect(codaText).toContain('leaves an addressable trail');
+ });
+});
From cf52fd40704817a6744ee925c415b14a5721e3b2 Mon Sep 17 00:00:00 2001
From: AlexandreCamillo <43162926+AlexandreCamillo@users.noreply.github.com>
Date: Fri, 29 May 2026 03:34:33 +0000
Subject: [PATCH 10/11] test(landing): render tests for ThreeUp, Quickstart,
and FAQ
These components had no direct tests before; adding minimal render
tests lifts branch + line coverage to recover the regression
introduced by removing FixLoopSteps and CompareTable.
The FAQ test also pins the removal of the 'pin coordinates' question
so it can't drift back in unnoticed.
---
tests/landing/FAQ.render.test.tsx | 38 ++++++++++++++++++++++++
tests/landing/Quickstart.render.test.tsx | 29 ++++++++++++++++++
tests/landing/ThreeUp.render.test.tsx | 26 ++++++++++++++++
3 files changed, 93 insertions(+)
create mode 100644 tests/landing/FAQ.render.test.tsx
create mode 100644 tests/landing/Quickstart.render.test.tsx
create mode 100644 tests/landing/ThreeUp.render.test.tsx
diff --git a/tests/landing/FAQ.render.test.tsx b/tests/landing/FAQ.render.test.tsx
new file mode 100644
index 00000000..94c5f0fb
--- /dev/null
+++ b/tests/landing/FAQ.render.test.tsx
@@ -0,0 +1,38 @@
+// @vitest-environment jsdom
+import { render } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { FAQ } from '@/components/landing/FAQ';
+
+describe('