# Prompt: build a new channel from the design system

Paste everything under the line into Cursor's chat in Agent mode, or Claude Code, with this repo open. It reads the design system's files, writes 1 skill and 1 renderer, and the new channel appears on /saga/case/system, under "Use it live". For another channel, change the first line and the 2 file names in steps 2 and 3.

To reset afterwards: `git checkout -- app/case/system/live/channels.ts && rm -f design-system/skills/teams-card.md app/case/system/live/TeamsCard.tsx`

---

Channel: Microsoft Teams

You are adding 1 new channel to the design system of a B2B ordering agent, in this repo. Do the 5 steps in order. Change no other file.

1. Read design-system/llms.txt. Each link /saga/ds/<path> is the file design-system/<path>. Read each one, and skip the 2 .zip files. Read skills/rules.md first: an output that breaks 1 line of it is rejected. Then read app/case/system/live/channels.ts.

2. Create design-system/skills/teams-card.md, in the same shape as skills/whatsapp-card.md: Use when, the channel's own limits, Must show, Tokens, Checked. Name 2 sizes: "Teams desktop" and "Teams mobile".

3. Create app/case/system/live/TeamsCard.tsx. It exports these 3 things and nothing else:
   - `teamsCard(order: ExampleOrder)`: the order as a Teams Adaptive Card, JSON, version 1.5. Every value comes from the order.
   - `TeamsCard({ order, size }: LiveRenderProps)`: draws `teamsCard(order)` by walking its JSON, so the drawing and the card never differ, at that size: "Teams desktop" at most 34rem wide, "Teams mobile" at most 22rem wide. Inline styles only. The stage sets every token as a CSS variable, for example agent.acted.fg is `var(--ds-agent-acted-fg)`. Use role tokens from roles.json first, such as `var(--ds-card-bg)` and `var(--ds-action-primary-bg)`. Where no role token exists for body text, quiet text or an inner fill, use the semantic ones: `var(--ds-text-primary)`, `var(--ds-text-secondary)`, `var(--ds-surface-page)`. No CSS file, no raw colour, and no import other than the types from ./channels. Write the agent labels as text in the file. Do not import semantic.json.
   - `teamsChannel: LiveChannel`, with name "Microsoft Teams", skill "skills/teams-card.md", sizes ["Teams desktop", "Teams mobile"], Render TeamsCard and card teamsCard.
   Import the types with `import type { ExampleOrder, LiveChannel, LiveRenderProps } from './channels'`.

4. Last, in app/case/system/live/channels.ts, import teamsChannel from './TeamsCard' and set `export const liveChannels: LiveChannel[] = [teamsChannel];`. TeamsCard.tsx exists by now, so the running page never fails to resolve the import.

5. Check, and report each result:
   - Run `pnpm exec tsx app/case/system/live/write-cards.ts`. It writes the card's JSON and runs pnpm ds:check-card on it, against design-system/examples/order.example.json. All 3 rules must pass.
   - Run `pnpm exec tsc --noEmit -p .`. It must pass.
   - List each bullet of design-system/skills/rules.md as passed or failed for this card.

The card is the order's receipt. It must:
- Start with the sender line: the merchant's name, then "AI ordering agent".
- Put the point first, with the approver named by its role: "Order DP-20418 is placed. The workshop owner approved it." No amount in this line.
- Show the agent state as text, the label agent.acted has in semantic.json: "Agent acted".
- Show each line in its own container: quantity, part, brand, price, arrival, and its stamp, such as "ERP, 2 min ago". The price is the contract price per unit, as the order has it, written as "€148.60 each".
- Show the total in its own container, with "Contract prices." and the oldest stamp of its lines.
- Put every price or stock number in a container that also holds its stamp. ds:check-card checks each container.
- Show undo while it is open, with the time it closes: "Undo until 07:54".
- Have at most 3 actions: "Undo order" first, then "Talk to a sales rep".
- Never put an action next to a safety part. Route it to a sales rep instead.
- Never show a price that is not the contract price.
- Use roles, never names.
- Follow the copy rules: short sentences, numerals, no exclamation marks, no em dashes, no semicolons.

A person reviews it before it ships.