One fill, three corners, five arrangements. The smallest component with the largest gap between what a file can draw and what the thing actually does.
One component, five variants
Skeleton - Variant: Default · Card · Text · Form · Table - 206 × 40, 334 × 398, 222 × 40, 222 × 60 and 153 × 112
Using the Skeleton
Why are the variants arrangements rather than states?
Because the source's Skeleton is a single div you size yourself - one fill, one radius, no props. There is nothing to vary. So the file records the only thing worth recording: which shapes go together for which kind of content. The five match the five the docs demonstrate, and nothing stops you drawing a sixth.
What is with the three different radii?
The corner is what tells you which shape is coming. Bars are radius.md, which is the component's own default; the avatar is radius.full because it is standing in for a round picture; the card block is radius.xl because that is the corner a Card has. Get the radius wrong and the skeleton promises the wrong thing.
Why does the last line have to be short?
Because a column of equal-length bars reads as a table, not as prose. The ragged right edge is most of what says this is a paragraph. The Text variant is 222 then 167, which is roughly three quarters - enough to read as a line ending, not so short it looks like a heading.
What is missing from the file?
The animation, and it is the whole point. The source carries animate-pulse: opacity easing between 1 and 0.5 over two seconds. Penpot cannot hold that, so the variants sit still - and a still skeleton reads as a broken page rather than a loading one. This page puts the two side by side so the difference is obvious.
How do I know the measurements are right?
Load the panel on this page and watch whether anything moves. A skeleton drawn at the real line heights swaps into the real content without shifting a pixel. The rule that gets it right: match the line box, not the glyphs - a 14px line in a 20px box wants a 16 bar with 8 under it, which is what every variant here does.
Is there a usage frame?
No, and deliberately. The variants are the usage - each one is already an arrangement rather than a part - so a frame showing them assembled would be showing the same five things twice. The worked examples on this page are the equivalent, and they add the two things a frame could not: the pulse, and the swap into real content.
Does it need an RTL version?
No. The docs demonstrate RTL for this component, and it comes out of dir on the container: the avatar moves to the other side of the lines and the short last line ends on the other edge. Both are flex order and alignment, so there is nothing to mirror in the file - the same argument as the Sidebar.