What problem does it solve?
This Skill assists in defining the visual identity and structure for products with persistent UI, ensuring a consistent user experience and aligning with the product's requirements.
Core Features & Use Cases
- Visual Identity: Determine the visual look for the product, including brand, feel, signature, accent, neutrals, spacing, and fonts.
- Navigation & Shell: Decide on the persistent chrome structure like top nav, sidebar, bottom tabs, command palette, etc.
- Account & Access Lifecycle: Define the user sign-up, sign-in, recovery, MFA, and account deletion processes.
- Onboarding & First Run: Establish what the user sees during the initial interaction with the product.
- Settings & Preferences: Set up user preferences, security, billing, privacy, and accessibility options.
- Integration Placement: Determine where and when to surface integrations based on the product's needs.
- Error & System States: Decide how to display error and system state messages to users.
- Help, Support, Status: Outline how users can access help and support resources.
- Compliance Touchpoints: Ensure compliance with regulations such as TOS, Privacy Policy, and GDPR.
Quick Start
To initiate the UI design process, run the pick-ui-surfaces skill in your project directory.