Standardize skeleton loading states with shimmer classes and ARIA attributes.
npx skills add https://github.com/gaia-react/gaia --skill skeleton-loaders
Please help me install this Agent Skill. Skill: skeleton-loaders Source: https://github.com/gaia-react/gaia/tree/main/.claude/skills/skeleton-loaders Command: npx skills add https://github.com/gaia-react/gaia --skill skeleton-loaders
This skill solves the issue of layout shift and poor user experience during data fetching by providing a standardized, performant way to implement skeleton loading states that match the dimensions of the final content.
Generate a skeleton loader component for the user profile section using the shimmer class and the 200ms delay pattern.
High-intent search queries and answers about installing and using this skill.
To prevent layout shift during asynchronous data fetching, implement skeleton loading states that match the exact dimensions of your final rendered content using shared component font classes and shimmer animations.
The best way to match real content dimensions is the transparent text technique, which uses actual HTML elements with shared shimmer classes to ensure the skeleton placeholder perfectly aligns with the final rendered content.
To stop skeleton loaders from flickering during fast network requests, apply a 200ms delay pattern that delays the skeleton appearance, preventing visual flashing when data loads quickly.
Handle screen reader accessibility for shimmer loading states by using proper ARIA attribute management, specifically applying aria-hidden to hide visual placeholders and role status to announce loading completion gracefully.
You do not need external dependencies to create shimmer animations, as the implementation leverages existing component font classes and timing-based rendering logic to generate pixel-perfect UI placeholders.
Use a skeleton loader instead of a standard spinner when fetching asynchronous data for content-heavy UI sections, as skeletons prevent layout shift and provide a better user experience by mirroring final content structure.
ak-eytherBuild Next.js 13+ App Router structures with server and client components.
grvpanchalGenerate CardSkeleton and ListSkeleton components with shimmer animation for data loading.
imkdwImplement accessible React components with ARIA, keyboard navigation, and WCAG compliance.
Kevin-Liu-01Provide BrailleSpinner loading indicators and skeleton placeholders for UI loading states.
