37 lines
3.4 KiB
Markdown
37 lines
3.4 KiB
Markdown
---
|
|
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. 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.
|