Auto-generate skeleton loaders from any layout
Views
1.3K
Copies
466
Likes
106
Comments
0
Copy rate
34.9%
Prompt
Write a TypeScript utility that generates a skeleton loader component for any given layout. The user provides a layout descriptor (or a live DOM node) and the tool produces a matching React skeleton component.
Target: [framework] with [styling_solution]. Skeletons should:
- Match parent layout dimensions exactly
- Use shimmer animation via CSS (not JS)
- Support shape primitives: rect, circle, text lines, image, avatar
- Accept density options (compact, normal, comfortable)
- Be accessible: aria-busy, aria-live="polite", hide from screen readers where appropriate
- Work with CSS variables for theme switching
Include a generator function that takes a schema and outputs JSX, plus the base primitives.Customise this prompt
Fill in 2 variables to personalise this prompt
Preview
Write a TypeScript utility that generates a skeleton loader component for any given layout. The user provides a layout descriptor (or a live DOM node) and the tool produces a matching React skeleton component.
Target: [framework] with [styling_solution]. Skeletons should:
- Match parent layout dimensions exactly
- Use shimmer animation via CSS (not JS)
- Support shape primitives: rect, circle, text lines, image, avatar
- Accept density options (compact, normal, comfortable)
- Be accessible: aria-busy, aria-live="polite", hide from screen readers where appropriate
- Work with CSS variables for theme switching
Include a generator function that takes a schema and outputs JSX, plus the base primitives.
Example output