training/skills/hallmark/references/macrostructures/21-component-playground.md

21 · Component Playground

Interactive code-and-preview blocks are the page's primary content. Each block previews a thing and shows how to copy-paste it.

• Heading: category labels (Buttons, Forms, Cards, Layouts).
• Body: alternating preview-and-code blocks, often with a tab to switch frameworks.
• Divider: category bands; horizontal rules between examples.
• Button: "Copy" button on every code block (silent success).
• Image: none — the previews ARE the imagery.
• Reveal: none.

Reach for it for design systems, component libraries, code-snippet sites, framework documentation.

Avoid for marketing pages. Playground is utility, not pitch.

Reference: shadcn/ui, Tailwind UI, Once UI, MUI demos, Framer Motion examples.

Sample opening lines (imitate the specificity — Component Playground openings are tangible: open on a real example, not a claim):

"Try it inline. Then take it home." — two short imperatives "Every example is editable. Every output is real." — pairs claim with proof "From npm install to your first chart in eight lines." — names the step count, makes a concrete promise

---