loading-state-patterns
Patterns for skeleton loaders, shimmer effects, and loading states that match design system aesthetics. Covers skeleton components, shimmer animations, and progressive loading. Use when building polished loading experiences. Triggers on skeleton, loading state, shimmer, placeholder, loading animation.
Why use this skill?
Enhance your app's UX with professional skeleton loaders and shimmer effects. Learn to build intentional loading states that match your design system aesthetics.
Install via CLI (Recommended)
clawhub install openclaw/skills/skills/wpank/loading-state-patternsWhat This Skill Does
The loading-state-patterns skill provides a robust library of React-based skeleton loaders and shimmer effects designed to improve the perceived performance of web applications. By utilizing this skill, developers can generate UI components that occupy space while content is being fetched or processed, preventing layout shifts and creating a polished, professional aesthetic. It includes base components, complex layouts like cards and tables, and instructions for integrating these into custom design systems with CSS animations.
Installation
To integrate this skill into your project, use the following command in your terminal:
clawhub install openclaw/skills/skills/wpank/loading-state-patterns
Use Cases
- Skeleton Loaders: Replace generic spinners with placeholders that mirror the final UI structure.
- Streaming Content: Implement shimmer effects on text or image areas that populate asynchronously.
- Data-Heavy Dashboards: Generate row-by-row loading states for tables to manage user expectations during data fetching.
- Design Consistency: Maintain high-quality visual standards by using pre-configured, theme-aware animation patterns.
Example Prompts
- "OpenClaw, generate a card skeleton component for my product grid that matches the styles in the loading-state-patterns library."
- "I need a table row skeleton generator that accepts a variable number of columns and uses a shimmer effect for the background."
- "Can you help me create a custom pulse-glow loading effect for a cyberpunk-themed dashboard using the pattern templates?"
Tips & Limitations
- Accessibility: Always ensure skeleton components are wrapped in appropriate ARIA labels (e.g., aria-busy="true") to inform screen readers that content is loading.
- Performance: While CSS animations are efficient, avoid excessive use of complex box-shadow or gradient animations on lower-end devices to prevent battery drain or frame drops.
- Flexibility: The provided components use Tailwind CSS classes; if your project does not use Tailwind, you will need to map these to your specific CSS-in-JS or global stylesheet implementations.
- Intent: Skeletons are best used for moderate wait times. For extremely quick interactions, consider optimistic UI updates instead of loading states.
Metadata
Not sure this is the right skill?
Describe what you want to build — we'll match you to the best skill from 16,000+ options.
Find the right skillPaste this into your clawhub.json to enable this plugin.
{
"plugins": {
"official-wpank-loading-state-patterns": {
"enabled": true,
"auto_update": true
}
}
}Tags(AI)
Related Skills
mermaid-diagrams
Create software diagrams using Mermaid syntax. Use when users need to create, visualize, or document software through diagrams including class diagrams, sequence diagrams, flowcharts, ERDs, C4 architecture diagrams, state diagrams, git graphs, and other diagram types. Triggers include requests to diagram, visualize, model, map out, or show the flow of a system.
api-design-principles
Skill by wpank
auto-context
Automatically read relevant context before major actions. Loads TODO.md, roadmap.md, handoffs, task plans, and other project context files so the AI operates with full situational awareness. Use when starting a task, implementing a feature, refactoring, debugging, planning, or resuming a session.
clear-writing
Write clear, concise prose for humans — documentation, READMEs, API docs, commit messages, error messages, UI text, reports, and explanations. Combines Strunk's rules for clearer prose with technical documentation patterns, structure templates, and review checklists.
track-performance
Track the performance of Uniswap LP positions over time — check which positions need attention, are out of range, or have uncollected fees. Use when the user asks how their positions are doing.