USM

Appearance

usm/mkt-mock-interfaces [built] ​

Add two side-by-side animated mock interfaces below the "Works with your client" section — left is an agentic IDE/chat with USM-aware agent prompts and responses, right is a mock browser showing the corresponding spec/docs loading. Both animate in sync to demonstrate the spec-first development cycle. Responsive (stacks on mobile, side-by-side on desktop).

Status: built

Why this exists ​

Show visitors the spec-first workflow in action by animating two synced mock interfaces — an agentic IDE/chat on the left where the agent references USM specs and tools, and a browser on the right where the corresponding spec/docs page loads. Makes the abstract "specs drive code, code drives docs" loop concrete and visual.

Design decisions ​

reuse-cli-animation-pattern [accepted] ​

Decision: Reuse the line-by-line reveal pattern from CliAnimation for both mocks

Rationale: CliAnimation already has a working scene/line/delay system with typewriter reveal. Reusing it keeps the two new mocks consistent and low-risk.

Consequences: A new ChatMock and BrowserMock component, each with their own scenes array

two-command-cycle [accepted] ​

Decision: Cycle two command/spec pairs: draft_feature then generate

Rationale: Shows the spec-first write flow (draft to spec appears in browser) and the docs flow (generate to docs page appears). Two scenes cover both halves of the USM value prop.

Consequences: Each mock has 2 scenes that loop

responsive-stack [accepted] ​

Decision: Side-by-side on md+ screens, stacked on mobile

Rationale: Standard responsive pattern for two-column comparisons. Both mocks should be fully visible side-by-side on desktop for the synced effect.

Consequences: grid grid-cols-1 md:grid-cols-2 gap-6 layout

How it works ​

Chat mock animation (chat-mock-flow) ​

Cycles through 2 scenes showing an agentic IDE/chat interface with USM-aware agent responses.

  1. Render — IDE chrome with file tabs and chat panel
  2. Type — user prompt about adding a login feature
  3. Stream — agent response referencing usm_draft_feature and the spec
  4. Show — agent writes code referencing the spec contracts
  5. Cycle — advance to next scene after hold

Browser mock animation (browser-mock-flow) ​

Cycles through 2 scenes showing a browser loading the spec/docs corresponding to the chat action.

  1. Render — browser chrome with URL bar
  2. Navigate — URL changes to the spec/docs page
  3. Load — skeleton placeholders then content fills in
  4. Show — spec content (contracts, flows) rendered
  5. Cycle — advance to next scene after hold

Flow Diagrams ​

mermaid
sequenceDiagram
    participant User
    participant Browser

    User->>Browser: render browser chrome with URL bar
    User->>Browser: navigate to URL changes to the spec/docs page
    User->>Browser: load skeleton placeholders then content fills in
    User->>Browser: show spec content (contracts, flows) rendered
    User->>Browser: cycle advance to next scene after hold

Guarantees ​

two-mock-interfaces ​

Two side-by-side animated mock interfaces below the Works with your client section

Acceptance criteria:

  • [ ] Left mock = agentic IDE/chat with agent prompts and responses referencing USM
  • [ ] Right mock = browser window showing specs/docs loading for the corresponding command
  • [ ] Both mock interfaces animate (typing, streaming responses, page loads)
  • [ ] Layout is responsive (stacks on mobile, side-by-side on desktop)

usm-references-in-chat ​

Agent chat references USM tools and specs

Acceptance criteria:

  • [ ] Agent mentions usm_read, usm_write_feature, or similar MCP tools
  • [ ] Agent references a feature spec before coding
  • [ ] Spec-first workflow is visible in the dialogue

browser-specs-loading ​

Right mock browser shows specs/docs loading in response to the agent action

Acceptance criteria:

  • [ ] Browser URL bar updates to a docs/spec URL
  • [ ] Page content loads progressively (skeleton then content)
  • [ ] Loaded content matches the spec the agent just wrote or read

synced-timing ​

The two mocks are loosely synced so the chat action appears to trigger the browser load

Acceptance criteria:

  • [ ] Chat completes an action then browser loads the corresponding spec
  • [ ] Cycle repeats with a different command/spec pair

Test specifications ​

both-mocks-render ​

Given:

  • render: true

Then:

  • assertion: both mocks render with chrome (window controls / tabs)
  • assertion: chat mock shows user prompts and agent responses
  • assertion: browser mock shows URL bar and page content

usm-references-visible ​

Given:

  • scene: 1

Then:

  • assertion: left mock references usm tools or specs
  • assertion: right mock shows the spec content that matches

responsive-layout ​

Given:

  • viewport: "both"

Then:

  • assertion: mocks stack vertically on small screens
  • assertion: mocks are side-by-side on md+

Implementation ​

  • Primary: web/src/components/mock-interfaces.tsx
  • Test code status: none

See Also ​

  • usm/mkt-language-tabs