メニュー
Guidance for using CssPreview component in zcss documentation articles. Use when: (1) Writing or editing CssPreview demos in MDX articles, (2) Deciding whether to use defaultOpen={true} or false, (3) User asks about demo component usage patterns.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
Project-specific CSS and component rules for zudo-doc. Must be consulted before writing or editing CSS, Tailwind classes, color tokens, or component markup in this project. Covers: component-first strategy, design token system, three-tier color architecture, and palette index convention. Triggered by 'design system', 'zudo-doc-design-system', 'zudo-doc-css-wisdom' (old name).
Translate zudo-doc documentation between English and Japanese with project-specific conventions.
Writing and formatting rules for MDX articles in zcss. Use when: (1) Writing or editing MDX docs in src/content/docs/, (2) Creating new articles, (3) User says 'writing rules' or 'article format'. Auto-load when working on MDX content.
Run before-push quality checks for the zudo-css project. Use when: (1) User says 'b4push', 'before push', or 'run checks', (2) Before pushing to remote, (3) After completing implementation work.
Create or convert CSS best-practices articles into "deep articles" with sub-pages in the zcss Astro site. Use when: (1) An article topic has enough depth to warrant "see more" reference sub-pages, (2) Converting a flat .mdx article into a category with index + child pages, (3) Adding deep reference content to an existing article, (4) User says 'deep article', 'add sub-pages', 'expand article', or 'add reference pages'.
Translate English docs to Japanese for the Astro i18n locale. Use when: (1) User wants to translate en docs to ja, (2) User says 'translate', 'ja version', 'Japanese translation', (3) User wants to check for missing ja docs.
| name | l-demo-component |
| description | Guidance for using CssPreview component in zcss documentation articles. Use when: (1) Writing or editing CssPreview demos in MDX articles, (2) Deciding whether to use defaultOpen={true} or false, (3) User asks about demo component usage patterns. |
| user-invocable | true |
| argument-hint | [question about demo component usage] |
For CssPreview basics (props, rendering behavior, CSS conventions), see doc/CLAUDE.md.
This skill covers decision patterns for effective demo usage.
Controls whether the code panel is expanded on first render.
| Situation | defaultOpen | Rationale |
|---|---|---|
| Explaining a concept — demo illustrates it | false (default) | Reader focuses on visual result first |
| Showing code for confirmation | true | Reader needs code + result side by side |
| Listing variety of visual patterns | false (default) | Visual comparison is primary goal |
height to avoid layout shift — estimate from content, typically 200-400pxdisplay: flex; gap: 32pxCssPreview iframe widths: Mobile=320px, Tablet=768px, Full=~900-1100px.
If production code uses breakpoints like 1024px or 1280px, remap to smaller values (e.g., 500px, 700px) so the demo visually demonstrates the responsive behavior within the iframe.
Prefer more demos over more prose. Each distinct CSS behavior should have its own CssPreview. A good article has 3-6 demos with brief explanatory text between them.