← ClaudeAtlas

preview-uilisted

Build and visually verify the Claude Code Tray window by launching it and capturing a screenshot. Use whenever a change touches MainWindow, any of its pages (SettingsPage / StatisticsPage / ContextPage) or any windowed UI, before claiming the layout works.
alegauss/claude-tray · ★ 4 · Web & Frontend · score 75
Install: claude install-skill alegauss/claude-tray
# Preview UI (Claude Code Tray) The cardinal rule of UI work in this repo: **never claim a window looks right without looking at it.** WinForms/WPF layout is easy to get wrong on paper; this skill closes the loop by rendering the real window and capturing a PNG you can read back. ## When to use - After editing `MainWindow.xaml`, `SettingsPage.xaml` or any page's `.xaml.cs`. - After any change that affects a windowed surface (new settings page, new dialog). - Before telling the user a UI change is done. ## How it works The app exposes a deterministic preview entry point so the window can be shown **without** clicking through the tray menu: ``` ClaudeTray.exe --main [dest] # the whole window as the tray opens it (nav strip + destination: # Statistics | Context | Settings) — use this for the shell itself ClaudeTray.exe --settings # just the Settings page, without the shell's nav strip ``` `scripts\Capture-Window.ps1` launches that, waits for the first paint, makes itself per-monitor-DPI-aware (critical on 150–200% displays or the capture is offset/scaled), copies the window's rectangle to a PNG, and kills the process. It is a **screen copy**, so it verifies what it captured before writing anything (T199) — it had returned another instance's window and reported success. The success line names the window title and pid: **read it**, and if it names a window you did not ask for, the PNG is not evidence. A failure means nothing was writte