skills.rest
Kevin-Liu-01
Kevin-Liu-01COMMUNITY
Explore all skills by this author →
Website𝕏@kevskgsGitHub

loading-screens

Provide BrailleSpinner loading indicators and skeleton placeholders for UI loading states.

16|3|Updated May 5, 2026
Search Tags:#ui#component#web#loading#skeleton#spinner#braille
One-click install
npx skills add https://github.com/Kevin-Liu-01/Agent-Machines --skill loading-screens
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: loading-screens
Source: https://github.com/Kevin-Liu-01/Agent-Machines/tree/main/knowledge/skills/loading-screens
Command: npx skills add https://github.com/Kevin-Liu-01/Agent-Machines --skill loading-screens

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Braille Unicode spinners prevent blank screens and skeletons preserve layout, enabling smooth loading experiences.

Core Features & Use Cases

  • Reusable BrailleSpinner component for various UI states (page, button, inline).
  • Sizing, color, and accessibility considerations for consistent UX.
  • Anti-pattern guidance and a structured approach to loading states across apps.

Quick Start

Integrate the BrailleSpinner in your loading states to replace empty screens and pair with skeletons for layout preservation.

Frequently Asked Questions about loading-screens

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

FAQPage Schema
How do I prevent blank screens during web page data fetches?▼

Prevent blank screens during web page data fetches by applying BrailleSpinner loading indicators and skeleton placeholders to preserve layout and convey progress.

What is a Braille spinner and how does it work for UI loading states?▼

A Braille spinner uses Braille Unicode characters to display animated loading indicators, replacing empty screens with accessible progress feedback across page, button, and inline UI states.

How do I add skeleton placeholders to preserve layout during page loading?▼

Add skeleton placeholders alongside the BrailleSpinner component to structure loading states, preventing layout shift and ensuring smooth transitions while fetching web data.

Can I customize spinner sizing and color options for my web component API?▼

Customize spinner sizing and color options through the reusable component API, ensuring consistent UX and accessibility across various UI patterns and button loading states.

What are common anti-patterns when implementing loading indicators?▼

Common loading indicator anti-patterns include failing to preserve layout or neglecting accessibility, which are addressed through structured implementation patterns and clear guidance.

When should I use inline loading spinners versus page-level skeleton placeholders?▼

Use inline loading spinners for localized button states and page-level skeleton placeholders for broader data fetches to maintain layout structure and convey progress accurately.

Related Skills

Explore More Design & Creative Skills→
tmarsbrtmarsbr

react-ui-patterns

Standardize loading, error, and data-fetching patterns in React UI components.

Community
Advanced
KyaniteLabsKyaniteLabs
3

empty-states

Standardize loading, empty, and error states for frontend data regions.

Official
Advanced
grvpanchalgrvpanchal

ui-skeleton

Generate CardSkeleton and ListSkeleton components with shimmer animation for data loading.

Community
Intermediate
jiaiyanjiaiyan
8

n-skeleton

Generate animated skeleton placeholders for Naive UI loading states in Vue 3.

Community
Intermediate