← ClaudeAtlas

terminal-software-designlisted

Build or review UI for a terminal, IDE, trading/data dashboard, admin/ops tool, or any dense data-driven desktop/web app — as opposed to a marketing site or landing page. Trigger for "review my sidebar", "why does this look unfinished", "dashboard feels too sparse/too dense", "Electron window has a weird line at the edge", "make this table easier to scan", "这个侧边栏要怎么改", "为什么这个终端界面看起来不对", or when reviewing a finished screen/component in one of these product categories before shipping it. Portable: every reference file here is self-contained prose with no script dependency — it works pasted as instructions into any assistant, not only inside this harness. Do NOT trigger to invent a generic app aesthetic from a blank slate (use `ui-ux-pro-max`), to match one specific reference product's own conventions like TradingView/X/Trading212 (use `trading-ui-patterns`), or to freeze the user's own palette/spacing into reusable tokens (use `ui-design-system`) — this skill is the density/composition/native-chrome discipline
artherahq/skills · ★ 2 · Web & Frontend · score 68
Install: claude install-skill artherahq/skills
# Terminal & Software UI Design Software that is **operated**, not read, follows a different discipline than marketing/landing-page design, where whitespace and a single hero read as quality. In a tool people use for hours a day, whitespace that pushes real content off-screen reads as *unfinished*, not elegant. A naive review pass tends to catch the obvious stuff (contrast, spacing) and miss the failure modes specific to this category: a sidebar that fills 100% of a narrowed window while the actual content disappears, a popover that blends into its own background, a native Electron window bleeding the wrong theme color at its edges before the page even paints. ## Workflow 1. **Read `references/density_and_semantics.md` first** — the core inversion (density is correct here, not a compromise), semantic-vs-brand color, tabular numeric data, and keyboard-first interaction. This is the base judgment everything else builds on. 2. **Read `references/component_patterns.md`** for the specific failure modes in sidebars, popovers/menus, segmented toggles, and sibling surfaces (two panels that are supposed to read as the same UI layer but use different tokens). 3. **Building or reviewing an Electron app?** Read `references/electron_chrome_pitfalls.md` — native window background bleeding at theme boundaries, traffic-light centering, why the in-app theme toggle doesn't automatically reach native chrome. These bugs don't show up in web-only design guides. 4.