pick-ui-surfaces

Define visual identity and structure for persistent product UI surfaces.

Updated Apr 28, 2026
One-click install
npx skills add https://github.com/dformoso/positronic --skill pick-ui-surfaces
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: pick-ui-surfaces
Source: https://github.com/dformoso/positronic/tree/main/skills/defining/pick-ui-surfaces
Command: npx skills add https://github.com/dformoso/positronic --skill pick-ui-surfaces

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

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.

Frequently Asked Questions about pick-ui-surfaces

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I define visual identity and UI structure for a product with persistent surfaces?

To define visual identity and UI structure for persistent product surfaces, establish your brand feel, accent colors, neutrals, spacing, and fonts, then map out the persistent navigation chrome like top nav or sidebars.

What is the best way to structure user onboarding and account lifecycle in UI design?

The best way to structure user onboarding and account lifecycle in UI design is to explicitly define the first-run experience alongside sign-up, sign-in, recovery, MFA, and account deletion processes.

How should I handle error states and system messages in a persistent UI?

You should handle error states and system messages in a persistent UI by deciding exactly how to display error notifications and system state changes to keep the user experience consistent.

Where do I place integrations and settings in my product's navigation shell?

You place integrations and settings in your product's navigation shell by determining when and where to surface integrations based on product needs and grouping settings like security, billing, and privacy.

How do I ensure compliance touchpoints like GDPR and Privacy Policy are included in UI design?

To ensure compliance touchpoints like GDPR and Privacy Policy are included in UI design, explicitly outline where these legal requirements intersect with the user interface and account lifecycle.