| name | ui-design-principles |
| description | Use this skill when designing, implementing, or reviewing user-facing UI/UX for the password generator. Covers app-first layout, utility-focused visual tone, generator hierarchy, responsive behavior, accessible controls, focus states, copy, empty/error/copy feedback, color contrast, password readability, and avoiding marketing-page patterns. |
UI Design Principles
Apply this skill for design decisions on any user-facing surface. For React and Tailwind mechanics, consult React Component Guidelines.
Product Posture
See product-posture.md for the app-first hierarchy and the rule that the first screen must help users generate a password immediately.
Guidelines:
- SHOULD read the linked reference when changing page hierarchy, first-viewport composition, explanatory copy, or navigation.
Password Readability
See password-readability.md for how generated passwords, entropy, and character-pool details should be displayed.
Guidelines:
- SHOULD read the linked reference when changing generated output, password typography, copy action placement, entropy, or pool summaries.
Responsive and Accessible Controls
See responsive-and-accessible-controls.md for responsive layout, focus, touch target, non-color state, and semantic-control expectations.
Guidelines:
- SHOULD read the linked reference when changing controls, layout breakpoints, focus states, disabled/error states, or mobile behavior.
Visual Tone and Feedback
See visual-tone-and-feedback.md for palette, density, animation, empty/error/copy states, and copy tone.
Guidelines:
- SHOULD read the linked reference when changing visual style, colors, motion, empty states, error messages, or copy feedback.
