Launch checklist
The agent checks a design before it ships, and fixes what fails.
A launch checklist runs the pre-flight checks before something ships. Each check is a row with a
glyph — a waiting ring, a spinner while it runs, a pass or a fail — plus a label and a quiet
note. A progress bar across the top carries one segment per check, tinted as each result lands.
A failed check shows a Fix button; the status line defaults to a count, "Checking" while one
runs, then what is left to fix or "All clear, ready to ship".
Usage
<!-- include core.css + launch-checklist.css -->
<div class="dm-lcx dm-panel">
<div class="dm-lcx-h">
<div><b>Ready to ship pricing?</b><span class="dm-muted dm-lcx-st">6 checks</span></div>
<button class="dm-pill dm-primary dm-sm dm-lcx-run"><!-- play -->Run checks</button>
</div>
<div class="dm-lcx-bar"></div>
<div class="dm-lcx-list">
<div class="dm-lcx-r dm-ok">
<span class="dm-g"><!-- ok --></span>
<span class="dm-t">Contrast meets AA<span class="dm-d">All 14 text pairs pass</span></span>
</div>
</div>
</div>Properties
| Name | Type | Description |
|---|---|---|
title | string | The line above the checks, like "Ready to ship pricing?". |
checks | LaunchCheck[] | The checks, one row and one progress segment each. |
status | string | The line under the title. Defaults to a count, "Checking" while one runs, then what is left to fix. |
action | { label; icon?; accent?; disabled? } | The button beside the title, like Run checks, Run again or Ship it. accent tints the ship step. |
bare | boolean | Sits flat in a thread (the default). Set false to give it a card of its own. |
check.label | string | What is checked, like "Contrast meets AA". |
check.state | wait | run | ok | bad | Not run yet, checking or fixing, passed, or failed. |
check.note | string | The quiet line under the label, or what is wrong. |
check.onFix | () => void | React/Vanilla: shows a Fix button on a failed check. Angular uses canFix + (fix); Flutter uses canFix + onFix. |
Theming
Works in light and dark (data-theme="dark") and in the Soft style (data-style="soft"). The
progress segments and glyphs take their colour from the theme tokens — --dm-ok for a pass,
--dm-bad for a fail, the accent mark while running — so results read the same on either
background; in Soft the rows and buttons are rounder. The glyph crossfades in as each state lands,
and the bar transition is skipped under prefers-reduced-motion.