← ClaudeAtlas

codemux-chat-uilisted

Use when building, modifying, or reviewing the agent-chat pane, chat-home empty state, composer, approval affordances, streaming indicators, or any other UI surface that renders a conversation with a CLI coding agent. Extends `codemux-ui` (which owns tokens, compound picker, hover-reveal, overlay manager, terminal/browser pane chrome) with chat-specific density, typography, and color rules.
Zeus-Deus/codemux · ★ 7 · Web & Frontend · score 59
Install: claude install-skill Zeus-Deus/codemux
# Codemux Chat UI Standards Project-specific delta for the chat pane. Read `codemux-ui` for shell-wide rules (tokens, compound picker, hover-reveal, overlay manager). This skill is contrarian on purpose — it inverts industry-standard chat-app conventions. --- ## Philosophy The chat pane is a **calm, text-forward transcript**. Reads like a conversation log, not a chat app. Four commitments: - **Prose leads.** Assistant text is the dominant visual element. - **One continuous column.** No alternating sides, no avatars, no timestamps. Top-to-bottom as one voice with occasional user interjections. - **Structure inside the flow, not beside it.** Tool calls are dim one-line markers in the transcript stream; output sits in minimal blocks immediately below. No sidebar, no floating panels. - **No accent color inside the conversation.** Accents belong in the app shell — not where a person is reading. --- ## Three-Tier Density Model Every visual element belongs to exactly one tier. The tier determines typography, color, padding, breathing room. ### Tier 1 — Prose Body of assistant and user text. Most generous tier. Comfortable line-height, reading-column width capped (column stays centered even when the pane is wide), ample vertical space between messages. Full-strength foreground color. No decorative chrome on assistant messages — plain paragraphs. ### Tier 2 — Status lines One-line tool markers inside the transcript flow (e.g. "Read `src/lib.rs`", "Edit `main.ts`", "Ran bash"