ProxyWarden/.codex/skills/design-proxywarden-ui/SKILL.md

---

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 for composition, typography, color, and surfaces.
3. Read motion-and-interaction.md for state and interaction animation.
4. Before editing a disclosure or motion-heavy control, write a compact storyboard for collapsed, opening, open, and closing: fixed elements, origin, direction, duration, easing, focus, and reduced-motion behavior.
5. Reuse src/ui/*, existing state, CSS tokens, and typed Tauri boundaries. Prefer CSS and narrow markup changes over dependencies or new abstractions.
6. Keep geometry stable across loading, success, error, copy, refresh, and route changes.
7. Add prefers-reduced-motion behavior with every new animation.
8. After a second user correction to the same interaction, stop stacking overrides. Re-read its markup and styles, restate the latest behavior, remove superseded assumptions, and rebuild the motion model cleanly.
9. Run npm test, npm run build, and an interaction smoke for visible motion or hit-target changes. Check desktop and narrow layouts; build and lint never substitute for visual verification.

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 interactive triggers at one screen position throughout disclosure motion. Use layout for resting placement, never a transform that hover or active feedback can overwrite.
• Make transient prompts independent overlays; they must not add shell height or move the main workspace.
• 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.
• Do not call a motion task complete without checking open, close, repeated toggle, hover during transition, keyboard focus, and reduced motion. If the state cannot be reproduced, report the missing visual evidence explicitly.