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

Ready to run

npx skills add https://github.com/Kevin-Liu-01/Agent-Machines --skill loading-screens

💬 Prompt for ChatGPT / Claude Chat▼

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.