mcpField
P
presentation-styling

presentation-styling

github.com/shanraisshan设计与 UI68.3k203 次安装今天更新
代码仓库

关于 presentation-styling

用于制作 presentation/index.html 幻灯片的样式技能，提供布局、内容区块、列表和标签的 CSS 类及 HTML 模式。适合维护该演示文稿的作者。

主要功能

  1. 01双栏与信息卡片布局
  2. 02提示、警告和代码区块
  3. 03列表与标签样式
  4. 04代码语法着色类
  5. 05幻灯片类型模式

适用场景

  1. 01排布双栏对比内容
  2. 02呈现代码示例和提示
  3. 03制作图标列表与标签
  4. 04编辑演示文稿幻灯片

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/shanraisshan/claude-code-best-practice --skill presentation-styling

安装后在 Claude Code 中输入/presentation-styling确认已加载。

详细介绍

演示文稿样式技能

presentation/index.html 中使用的 CSS 类和 HTML 模式。

CSS 组件类

布局
  • .two-col — 带有 24px 间距的双列网格布局
  • .info-grid — 用于信息卡片的双列网格
  • .col-card — 列内的卡片（添加 .good 使用绿色边框，添加 .bad 使用红色边框）
  • .info-card — 信息网格中的卡片
内容块
  • .trigger-box — 带深色左边框的灰色框（用于关键概念、先决条件）
  • .how-to-trigger — 带绿色边框的绿色框（用于“试试这个”操作）
  • .warning-box — 带警告边框的橙色框（用于重要警告）
  • .code-block — 使用等宽字体的深色代码显示块
列表
  • .use-cases — 图标和文本列表项的容器
  • .use-case-item — 带图标和文本的单个列表项
  • .feature-list — 简单的带边框列表
标签和徽章
  • .matcher-tag — 灰色行内胶囊标签
  • .weight-badge — 绿色胶囊徽章（由 JS 自动注入加权幻灯片）

代码块语法高亮

在 .code-block 中，使用以下 span 进行语法着色：

<div class="code-block">
<span class="comment"># This is a comment</span>
<span class="key">field_name</span>: <span class="string">value</span>
<span class="cmd">&gt;</span> command to run
</div>
  • .comment — 绿色（#6a9955），用于注释
  • .key — 蓝色（#9cdcfe），用于属性名称/键
  • .string — 橙色（#ce9178），用于字符串值
  • .cmd — 黄色（#dcdcaa），用于命令/提示词

幻灯片类型模式

双列内容幻灯片（好与坏）
<div class="slide" data-slide="N" data-weight="5">
    <h1>Title</h1>
    <div class="two-col">
        <div class="col-card bad">
            <h4>Before (Vibe Coding)</h4>
            
        </div>
        <div class="col-card good">
            <h4>After (Agentic)</h4>
            
        </div>
    </div>
</div>

不要在幻灯片 HTML 中硬编码 <span class="weight-badge">。演示文稿 JavaScript 会自动注入和移除权重徽章。

带代码示例的内容幻灯片
<div class="slide" data-slide="N">
    <h1>Title</h1>
    <div class="trigger-box">
        <h4>Key Concept</h4>
        <p>Description</p>
    </div>
    <div class="code-block"><span class="comment"># Example</span>
<span class="key">field</span>: <span class="string">value</span></div>
</div>
图标列表模式
<div class="use-cases">
    <div class="use-case-item">
        <span class="use-case-icon">EMOJI</span>
        <div class="use-case-text">
            <strong>Title</strong>
            <span>Description text</span>
        </div>
    </div>
</div>

旅程栏特定说明

  • .journey-bar — 进度条下方的固定栏
  • .journey-bar.hidden — 在标题幻灯片上隐藏
  • 旅程栏颜色通过 HSL 插值从红色（0%）过渡到绿色（100%）
  • 加权幻灯片的 h1 元素会由 JS 自动注入权重徽章

评论

支持 Markdown