name: design-proxywarden-ui description: Design, implement, review, or refine ProxyWarden UI using the shared calm monospace VPN-client language: centered state control, green-tinted neutrals, route-aware accents, stable geometry, and smooth state-driven motion. Use for React components, CSS, service controls, routing views, tooltips, status transitions, and responsive polish in this repository.

Design ProxyWarden UI

Keep ProxyWarden a compact Windows utility while matching the visual language of the sibling VPN client.

Read AGENTS.md, .agent/skills/react-typescript-ui/SKILL.md, and the complete component and CSS being changed.
Read visual-language.md for composition, typography, color, and surfaces.
Read motion-and-interaction.md for state and interaction animation.
Reuse src/ui/*, existing state, CSS tokens, and typed Tauri boundaries. Prefer CSS and narrow markup changes over dependencies or new abstractions.
Keep geometry stable across loading, success, error, copy, refresh, and route changes.
Add prefers-reduced-motion behavior with every new animation.
Run npm test, npm run build, and a visual desktop/narrow smoke when the environment allows it.

Preserve explicit install, start, stop, uninstall, and apply actions. Styling must not blur operational meaning.
Keep the summary read-only except for its existing service power action; do not add configuration mutations there.
Render the primary power action as a generous invisible hit target around the icon, not a large filled accent circle.
Use the blue-green accent for ready/active routing and orange only for direct/local-route distinction. Keep warnings and errors semantic.
Prefer open composition, quiet surface shifts, and localized light over dashboard cards, thick borders, and decorative chrome.
Animate opacity, blur, glow, color, filter, and transform; never animate layout properties or use transition: all.
Keep labels, paths, status copy, spinners, and feedback in reserved geometry so neighboring content does not move.
Keep tooltips independent from transformed, rotating, glowing, or filtered controls.
Keep secrets and credential-bearing URLs redacted in every visual state.
Keep narrow layouts single-column and keyboard focus visible.