skills.rest
phazurlabs
phazurlabsCOMMUNITY
Explore all skills by this author →
GitHub

Performance, States & Patterns

Design loading, empty, error, offline, onboarding, and notification states for web and mobile interfaces.

35|13|Updated Feb 14, 2026
Search Tags:#onboarding#accessibility#notifications#loading states#empty states#skeleton screens#perceived performance
One-click install
npx skills add https://github.com/phazurlabs/ux-ui-mastery --skill performance-states-patterns
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Performance, States & Patterns
Source: https://github.com/phazurlabs/ux-ui-mastery/tree/main/skills/performance-states-patterns
Command: npx skills add https://github.com/phazurlabs/ux-ui-mastery --skill performance-states-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you design and implement the moments that make or break user trust: loading, empty, error, offline, notification, and onboarding states.

Core Features & Use Cases

  • Perceived Performance Patterns: Use skeleton screens, optimistic UI, progress indicators, prefetching, and offline-first behavior to make interfaces feel faster and more resilient.
  • State Coverage: Cover first-use empty states, no-results states, error recovery, permission prompts, and partial-loading flows so users always know what is happening.
  • Notification & Onboarding Systems: Build calm, accessible toasts, banners, push notifications, and first-run experiences that guide users without overwhelming them.
  • Use Case: Redesign a dashboard that feels slow and brittle by replacing blank loading screens with skeletons, adding retry handling, and creating clearer empty-state guidance.

Quick Start

Ask the skill to audit your interface states and produce accessible loading, empty, error, offline, onboarding, and notification patterns for your product.

Frequently Asked Questions about Performance, States & Patterns

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

FAQPage Schema
How do I design loading states and skeleton screens for web and mobile dashboards?▼

Design loading states by replacing blank screens with skeleton placeholders, progress indicators, and optimistic updates to improve perceived performance across web and mobile dashboards.

What is the best way to handle empty states and error recovery in a content feed?▼

Handle empty states and error recovery in a content feed by adding first-use guidance, no-results messaging, retry paths, and partial-loading flows so users always understand what is happening.

How do I build accessible notifications and onboarding flows without overwhelming users?▼

Build accessible notifications and onboarding flows using calm toasts, banners, push notifications, ARIA announcements, and channel-aware routing to guide users through first-run experiences without overwhelming them.

Does this approach support offline-first behavior and permission prompts for mobile forms?▼

Yes, this approach supports offline-first behavior and permission prompts for mobile forms by applying offline states, prefetching, and accessible state handling to maintain interface resilience during connectivity loss.

Why do my UI loading screens feel slow and brittle during partial-loading flows?▼

UI loading screens feel slow and brittle during partial-loading flows when missing skeleton screens, retry handling, and optimistic UI patterns fail to communicate perceived speed and system status to users.

Related Skills

Explore More Design & Creative Skills→
yogvidwankhedeyogvidwankhede
1

interface-states

Define design contracts for empty, loading, error, and offline interface states.

Community
Advanced
coastdigitalgroupcoastdigitalgroup
2

skeleton-screen-implementation

Design accessible skeleton screens with semantic HTML, shimmer CSS, and ARIA attributes.

Official
Advanced
Luqman-Ud-DinLuqman-Ud-Din

qa-detect-ux-toast-notification

Detect toast, snackbar, and notification UI defects in transient status messages.

Community
Intermediate
vignesh2027vignesh2027
6

ui-ux-designer

Audit interfaces against WCAG 2.1 AA and provide UX critique.

Community
Intermediate