codemux-uilisted

Use when building, modifying, or improving any user-visible part of Codemux — React components, Tailwind, shadcn, theming, pane layouts, sidebar, notifications, OpenFlow UI. Also use when the task involves visual design decisions, component patterns, or color/theme work. For new ADE feature ideation see `codemux-features`; for chat-pane specifics see `codemux-chat-ui`.
Zeus-Deus/codemux · ★ 7 · Web & Frontend · score 59

Install: claude install-skill Zeus-Deus/codemux

# Codemux UI Standards Project-specific delta on top of generic frontend best practices. For chat-pane specifics, see `codemux-chat-ui`. For project context, read `WORKFLOW.md` and `docs/INDEX.md` first. Apply to new code and incremental improvements. Don't mass-refactor existing components to match. --- ## Theming The frontend uses shadcn with preset `b3kIbNYVW` (zinc base, oklch, 0.45rem radius). Colors are CSS variables in `src/globals.css` under `:root` (light) and `.dark`. The app defaults to dark mode via `class="dark"` on `<html>`. ### Core tokens - `--background`, `--foreground`, `--card`, `--muted`, `--muted-foreground`, `--accent`, `--primary`, `--destructive`, `--border` — standard shadcn - `--success` (green), `--danger` (red), `--warning` (amber) — Codemux custom, used via `text-success`, `bg-danger`, etc. ### Terminal colors Read dynamically from shadcn CSS variables via `buildThemeFromCSS()` in `TerminalPane.tsx`. ANSI palette is static. A MutationObserver on `<html>` re-applies the theme when the preset changes. ### Where accent (`primary`) belongs **Use for:** focused pane border, active workspace left bar, active workspace row bg, status badges, interactive hover states, notification badges, focused input borders. **Never for:** sidebar background, pane header background, large surfaces, body text, resting-state borders. ### Golden rule All colors come from shadcn CSS variables. No hardcoded hex/rgba in components. Exceptions: `src/tauri/types.ts`