converge-design

name	converge-design
description	Use this skill to design and prototype interfaces for Converge — the framework for long-running AI agents that adapt until outcomes converge. Optimised for playbook surfaces (task tree, run journal, human-review flow) but works for any Converge-flavored artifact. Contains the canonical brand contract (tokens, voice, banned words), the editorial typography rules, and a working React UI kit for the playbook + review workspace.
user-invocable	true

Converge — Design Skill

Read README.md first — it is the system reference. Then open colors_and_type.css for the tokens, reference/converge-brand.json for the voice contract, and ui_kits/playbook/ for a working three-pane workspace recreation.

Working artifacts

• Static HTML / SVG / illustration → reference the tokens with <link rel="stylesheet" href="path/to/colors_and_type.css">. Compose with the .cv-* semantic classes (.cv-h2, .cv-body, .cv-eyebrow, .cv-pill, .cv-status, .cv-card, .cv-link-arrow). Stay inside the brand contract — terracotta only for italic-emphasis, link hover, and .cv-highlight; status palette only on glyph-as-type captions.
• React prototype → copy from ui_kits/playbook/ and adapt. primitives.jsx is the atoms layer. Keep style objects scoped to each file (the kit uses inline styles for collision safety).
• Production code → mirror reference/converge-tokens.css into the project. The upstream landing page uses Tailwind v4 with @theme tokens — see reference/converge-tokens.css for the @theme block.

Brand contract — non-negotiable

• Tagline: "Define done. Converge gets there."
• Mental model: diverge → converge.
• Voice tones: direct · technical · honest about trade-offs.
• Banned words: revolutionary · next-generation · AI-native · game-changing. Treat as compile errors. Synonyms (paradigm shift, cutting-edge, industry-leading) are also banned.
• Preferred words: concrete · shipped · measurable · verifiable.
• Italic emphasis is the brand motif — wrap the one noun the sentence is about in <em> and let it render Crimson Pro Italic 500 terracotta.

Scope rules — non-negotiable

• --cv-status-* → data-viz only. Glyph-as-type captions and status spans. Never on body text, links, CTAs, or headings.
• --cv-diagram-* + indigo + violet + cyan + rose → inside .cv-diagram SVG subtree only. Never on app chrome.
• --cv-accent-warm (terracotta) → italic-emphasis spans + link :hover + .cv-highlight only. Never a CTA fill. Never a heading color. Never a border on something that isn't a marker.
• Everything else (bg, text, border) → use anywhere.

When invoked with no guidance

Ask what the user wants to design. Likely candidates:

• A new screen inside the playbook workspace (the run journal full view, the playbook catalog, the new-playbook composer)
• A status / progress mock for a particular playbook run
• A README diagram for a new RFC
• A marketing tile for a new example playbook
• A doc page in the Converge docs (/docs/getting-started/...)

Once the surface is clear, ask:

• Static HTML or interactive React?
• Light cream chrome only, or include a dark code/journal panel?
• One direction, or 2–3 variations to compare?

Then build. Always copy the relevant atoms out of ui_kits/playbook/primitives.jsx instead of re-inventing them, and always pull tokens from colors_and_type.css instead of hardcoding hex values.

Banned-word lint

Before shipping any copy, search the output for the banned words above. If you find one, rewrite the sentence using the preferred words and one of the brand-voice patterns:

• "Long-running AI agents that adapt until outcomes converge."
• "Each task declares its outputs and the shell checks that prove them."
• "A playbook can burn tens of millions of tokens; the price gap matters."
• "That's the loop that adapts when reality breaks the plan."

If unsure whether a word is banned, ask the user — better one round of clarification than shipping copy that violates the contract.