调整skills的位置

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

@@ -0,0 +1,23 @@
+## 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
+
+---