菜单
关于演示文稿中 CSS 类、组件模式和语法高亮的知识
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | presentation-styling |
| description | 关于演示文稿中 CSS 类、组件模式和语法高亮的知识 |
presentation/index.html 中使用的 CSS 类和 HTML 模式。
.two-col — 2 列网格布局，间距 24px.info-grid — 信息卡片的 2 列网格.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"># 这是一条注释</span>
<span class="key">field_name</span>: <span class="string">value</span>
<span class="cmd">></span> 要运行的命令
</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>
<!-- bad example -->
</div>
<div class="col-card good">
<h4>After (Agentic)</h4>
<!-- good example -->
</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>标题</strong>
<span>描述文本</span>
</div>
</div>
</div>
.journey-bar — 进度条下方的固定条.journey-bar.hidden — 在标题幻灯片上隐藏h1 元素中创建一个 SVG 时间卡片，显示迪拜的当前时间。将 SVG 写入 agent-teams/output/dubai-time.svg 并更新 agent-teams/output/output.md。
AI 代理的浏览器自动化 CLI 工具。当用户需要与网站交互时使用，包括导航页面、填写表单、点击按钮、截取屏幕截图、提取数据、测试 Web 应用或自动化任何浏览器任务。触发条件包括"打开网站"、"填写表单"、"点击按钮"、"截取屏幕截图"、"从页面抓取数据"、"测试此 Web 应用"、"登录网站"、"自动化浏览器操作"或任何需要编程式 Web 交互的任务。
关于演示文稿幻灯片格式、权重系统、导航和章节结构的知识
显示巴基斯坦标准时间（PKT，UTC+5）的当前时间。当用户询问当前时间、巴基斯坦时间或 PKT 时使用。
从 Open-Meteo API 获取迪拜当前天气温度数据的指令
创建一个 SVG 天气卡片，显示迪拜的当前温度。将 SVG 写入 orchestration-workflow/weather.svg 并更新 orchestration-workflow/output.md。