document the conversation-panel card model in the ui-design skill (T-305)

Capture the three card categories (dialog / simple / collapsible), the
ClideCollapserCard rules, and the shared card-spacing constants so future
conversation-panel work follows the settled model. Closes T-305.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

.claude/skills/ui-design/SKILL.md

@@ -39,6 +39,36 @@ These apply across every reference and every surface:
 - Typography: `clideFontMono` for code/paths/IDs, `clideFontCaption` for
   status/section headers, body inherits from `DefaultTextStyle`.
 
+## Conversation-panel cards (T-305)
+
+The Claude conversation stream has **three** card categories. They are NOT one
+shared wrapper widget — each is its own widget; they only share the spacing
+constants in `lib/widgets/src/clide_card_metrics.dart` (`kClideCardGap`,
+`kClideCardRadius`, `kClideCardHeaderPadH/V`, `kClideCardCounterSlotWidth`) so
+the stream reads as one rhythm. Change spacing there, not per-card.
+
+1. **Dialog cards** — `ConversationCard` with a speaker **side stripe** (you /
+   claude / agent). Prose/attribution; not collapsible.
+2. **Simple cards** — a single item shown fully open, never collapses (e.g. the
+   image card). Standalone display; no chevron, no status chrome.
+3. **Collapsibles** — `ClideCollapserCard` (`lib/widgets/`). Every tool use is
+   one, over a list of `1..N` inner item cards (a single tool = a 1-item list;
+   there is no separate single-card path). Rules:
+   - Whole card toggles; chevron hard against the **left** edge, the status tick
+     (spinner/check/cross) hard against the **right** edge, the count in a
+     fixed-width slot just inboard of it.
+   - `color` drives the border + chevron/label tint (per-instance fidelity).
+   - Collapsed ticker echoes the run's **last content line** as the title +
+     count + aggregate status (computed by the caller, bubbled up from items).
+   - Inner item cards are content + their **own** per-item status; they pass
+     `margin: EdgeInsets.zero`-ish (a bottom margin matching the canvas) so the
+     collapser pads the inner canvas **evenly on all sides** — never let an
+     inner card jam under the header or against a frame edge.
+
+Do NOT pull a dialog card's stripe or a simple card's config into the collapser,
+and do NOT nest collapsers — inside a run, tools render as the bare inner content
+card (`_ConversationTurn(collapseTools: false)`).
+
 ## Anti-patterns (cross-cutting)
 
 - Borrowing another surface's token (`sidebarBackground` for hat bar) — give