菜单
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.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/Takazudo/zudo-css-wisdom --skill l-demo-component命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
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.
Bump package version, generate changelog docs, commit, tag, and create GitHub release. Use when: (1) User says 'version bump', 'bump version', 'release', or 'zudo-doc-version-bump', (2) User wants to create a new release of this project.
正在显示 SKILL.md
基于 SOC 职业分类
| 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.