Skeleton
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.
Every rectangle on the page is base.accent and nothing else - no border, no shadow, no second tone. What varies is the corner: radius.md on the bars, radius.full on the avatar, radius.xl on the card block. The corner is what tells you which shape is coming.
The source's Skeleton is one div you size yourself; there is nothing to vary. So the file varies the only thing worth recording - which shapes go together for which kind of content. Five is not a limit, it is the five the docs demonstrate.
A skeleton is a promise about layout. If the bars are 16 tall and 24 apart, the text that replaces them had better be too, or the page jumps when it loads. That is the whole reason to draw them at real measurements rather than sketching grey boxes.
A still skeleton reads as a broken page
The source carries animate-pulse: opacity easing from 1 to 0.5 and back over two seconds. Turn it off in the frame above and the same shapes stop meaning loading and start meaning empty. It is the only part of this component that does not exist in Penpot, and the most important one.
The test is whether anything moves
Load the panel and watch the outline. A skeleton drawn at the real measurements swaps into the real thing without shifting a pixel; one sketched by eye pushes the page around the moment the data lands, which is worse than showing nothing at all.
Two rules fall out of that. Match the line height, not the text: a 14px line in a 20px box wants a 16 bar with 8 under it, which is what the file draws. And make the last line short - a paragraph of equal-length bars reads as a table, and the ragged edge is most of what says this is prose.
The ragged edge changes sides
The docs demonstrate this one, and it is the only thing about a skeleton that direction touches. The avatar moves to the other side of the lines, and the short last line has to end where the text would - on the left in an RTL column, not the right.
Nothing in the file needs a mirrored copy for this. The avatar row is a flex row and the bars are flex children aligned to the start, so setting dir on the container moves everything at once - the same argument as the Sidebar, and the reason neither page has RTL variants.
One component, five variants
Read straight out of the Penpot file. The axes below are the property names you will see in the variant dropdown.
Using the Skeleton
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.
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.
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.
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.
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.
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.
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.