Apply @techsio/ui-kit Skeleton components to preserve layout during content loading.
npx skills add https://github.com/TechsioCZ/new-engine --skill skeleton-usage
Please help me install this Agent Skill. Skill: skeleton-usage Source: https://github.com/TechsioCZ/new-engine/tree/main/libs/ui/skills/skeleton-usage Command: npx skills add https://github.com/TechsioCZ/new-engine --skill skeleton-usage
This Skill helps UI preserve layout by displaying skeleton placeholders during data loading, preventing layout shifts and improving perceived performance.
Wrap your content in Skeleton and render a Skeleton.Text as a placeholder while data loads.
High-intent search queries and answers about installing and using this skill.
Skeleton loading placeholders preserve layout stability by mirroring final content dimensions during data fetches. They reserve exact space for text lines, avatars, and media in React components, ensuring the layout remains stable and preventing visual jumps.
The best way to show loading states for profile cards and dashboards is using skeleton placeholders. By wrapping content in Skeleton components, you display structured loading states for text lines and media areas, which are revealed seamlessly upon fetch completion.
Implement skeleton loading placeholders by wrapping your content in the @techsio/ui-kit Skeleton component. Use Skeleton.Text, Skeleton.Circle, and Skeleton.Rectangle to represent loading areas, configuring the isLoaded, variant, and speed props in your TSX files.
Yes, the @techsio/ui-kit skeleton component supports circular avatars and text lines. It provides specific Skeleton.Circle and Skeleton.Text variants designed to accurately represent and reserve space for avatars and text while data fetches complete.
Yes, you can customize the animation speed of skeleton placeholders in your frontend design system. The @techsio/ui-kit Skeleton component accepts a speed prop, allowing you to control the animation timing alongside the variant and isLoaded props.
You should avoid skeleton loading placeholders when content loads instantly or when the final layout structure is completely unknown. Skeletons require anticipating the final content dimensions to prevent layout shifts, making them ineffective for highly dynamic or unpredictable content structures.
somachakStandardize design tokens and component styling patterns for Tailwind-based React projects.
jiaiyanDisplay skeleton placeholders during asynchronous content loading in Vue components.
e-xodeStandardize Vue SSR UI with Vuetify 4 components for feedback and loading patterns.
Kevin-Liu-01Provide BrailleSpinner loading indicators and skeleton placeholders for UI loading states.
