The skeleton prop

Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.

Build the "The skeleton prop" pattern (@codeatlasdev/ui demo #241, feedback/skeleton) in my app.

Call get_demo({ ids: ["#241"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Loading states where real components keep their exact size and show a placeholder until data arrives.

Keep these library parts, with the props and tokens the demo uses:
- Avatar, Button, Card, Flex, KpiCard, Stack, TextField from "@codeatlasdev/ui"

Behaviour to keep:
- `let loading = $state(true)` passed as `skeleton={loading}` to four components
- `<Avatar alt="Ana Lima" size="xl" skeleton={loading} />` and `<KpiCard title="Revenue" value="R$ 12.400" trend={3.2} skeleton={loading} />`
- `<TextField label="Email" description="We never share it" skeleton={loading} />`
- `<Card title="Overview" skeleton={loading}>` with one paragraph of content
- Toggle `<Button variant="outlined" size="sm"` runs `onclick={() => (loading = !loading)}`

Reduced motion: the demo handles it; keep that branch.
Keyboard: operable; keep the focus order and key handling.

Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours.

Library parts

• Avatar @codeatlasdev/ui
• Button @codeatlasdev/ui
• Card @codeatlasdev/ui
• Flex @codeatlasdev/ui
• KpiCard @codeatlasdev/ui
• Stack @codeatlasdev/ui
• TextField @codeatlasdev/ui

How it is built

• `let loading = $state(true)` passed as `skeleton={loading}` to four components
• `<Avatar alt="Ana Lima" size="xl" skeleton={loading} />` and `<KpiCard title="Revenue" value="R$ 12.400" trend={3.2} skeleton={loading} />`
• `<TextField label="Email" description="We never share it" skeleton={loading} />`
• `<Card title="Overview" skeleton={loading}>` with one paragraph of content
• Toggle `<Button variant="outlined" size="sm"` runs `onclick={() => (loading = !loading)}`

Related

• #097 Card layout component/feedback
• #098 Image placeholder component/feedback
• #099 Text lines component/feedback
• #255 Fast and slow loads component/navigation
• #085 Form component/feedback
• #087 Split component/feedback