---
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.

## Workflow

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

## Non-negotiable decisions

- 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.