creating-slides

<!--zh
# HTML幻灯片制作技能
-->

# Creating Slides Skill

<!--zh: 提供完整的HTML幻灯片制作能力，包括项目创建、内容设计、技术规范、工作流程和最佳实践。-->

Provides complete HTML slide creation capabilities, including project creation, content design, technical specifications, workflows, and best practices.

<!--zh
## 核心能力
-->

## Core Capabilities

<!--zh
- **项目创建** - 创建完整的幻灯片项目结构
- **页面制作** - 创建符合规范的幻灯片页面
- **内容检索** - 获取参考资料和数据
- **配图搜索** - 批量搜索高质量配图素材
- **数据分析** - 支持 Python 脚本进行数据分析处理
- **项目管理** - 支持幻灯片项目的编辑、重构、移动和重命名
-->

- **Project Creation** - Create complete slide project structure
- **Page Creation** - Create slide pages conforming to specifications
- **Content Research** - Obtain reference materials and data
- **Image Search** - Batch search high-quality image materials
- **Data Analysis** - Support Python scripts for data analysis and processing
- **Project Management** - Support editing, refactoring, moving, and renaming slide projects

---

<!--zh
## 代码执行方式（关键）
-->

## Code Execution Method (Critical)

<!--zh
本技能中所有 Python 代码示例，在 Agent 环境中**必须通过 `run_sdk_snippet` 工具执行**。

**正确示例**：
-->

All Python code examples in this skill **must be executed via the `run_sdk_snippet` tool** in Agent environment.

**Correct example**:

```python
# Correct! Must use run_sdk_snippet to execute
run_sdk_snippet(
    python_code="""
from sdk.tool import tool
result = tool.call('create_slide_project', {
    "project_path": "my-project",
    "slides_array": []
})
"""
)
```

<!--zh
本文档中所有 `from sdk.tool import tool` 开头的代码块，均遵循此规则，通过 `run_sdk_snippet` 的 `python_code` 参数传入执行。
-->

All code blocks in this document starting with `from sdk.tool import tool` follow this rule: pass them via the `python_code` parameter of `run_sdk_snippet` for execution.

---

<!--zh
## 默认要求
-->

## Default Requirements

<!--zh
当用户无明确要求时遵循以下默认要求：
- **页面数量**：根据内容确定合适的页数，每页≤100行代码
- **内容密度**：一页一重点，文字≤150字，图片≤1张
- **幻灯片思维**：1920×1080固定画布，横向布局优先，避免纵向溢出
- **商务简洁风格**，遵循字号规范，强制Tailwind优先
-->

When user has no explicit requirements, follow these defaults:

- **Page count**: Determine appropriate page count based on content, each page ≤100 lines of code
- **Content density**: One key point per page, text ≤150 words, images ≤1
- **Slide mindset**: 1920×1080 fixed canvas, prioritize horizontal layout, avoid vertical overflow
- **Business minimalist style**, follow font size specifications, Tailwind mandatory priority

---

<!--zh
## 技术规格
-->

## Technical Specifications

<!--zh
### 尺寸与实现
-->

### Size and Implementation

<!--zh
- **固定尺寸**：1920px×1080px，严禁超出，宽高需在html与body标签中明确设置
- **实现方式**：HTML + CSS + JavaScript
- **静态固定页面**：任何设备尺寸浏览都是相同效果，不做自适应，禁止响应式设计
- **网页底部必须加入** `<script src="slide-bridge.js"></script>` 脚本，用于页面间通信
-->

- **Fixed size**: 1920px×1080px, strictly no overflow, width and height must be explicitly set in html and body tags
- **Implementation**: HTML + CSS + JavaScript
- **Static fixed page**: Same effect on any device size, no adaptation, responsive design prohibited
- **Must include** `<script src="slide-bridge.js"></script>` at bottom of page for inter-page communication

<!--zh
### CSS框架与资源
-->

### CSS Frameworks and Resources

<!--zh
- **TailwindCSS**: https://cdn.tailwindcss.com/3.4.17 (必选，注意：此CDN采用JIT浏览器编译模式，返回JS代码，使用`<script>`标签)
- **FontAwesome**: https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css (必选)
- **Google Fonts**: https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap (必选)
- **ECharts**: https://cdnjs.cloudflare.com/ajax/libs/echarts/5.6.0/echarts.min.js (必要时使用)
-->

- **TailwindCSS**: https://cdn.tailwindcss.com/3.4.17 (required, note: this CDN uses JIT browser compilation mode, returns JS code, use `<script>` tag)
- **FontAwesome**: https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css (required)
- **Google Fonts**: https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap (required)
- **ECharts**: https://cdnjs.cloudflare.com/ajax/libs/echarts/5.6.0/echarts.min.js (use when necessary)

<!--zh
### 技术约束
-->

### Technical Constraints

<!--zh
- **文件生成**：只生成静态HTML文件
- **禁止响应式设计**：严禁使用媒体查询，页面不会随着屏幕尺寸变化而变化
- **禁止内容过载**：避免过长文本、过多列表项、过大图片；单页内容过多时必须拆分为多页
- **禁止动态效果**：页面切换由外层系统控制，单页面专注静态展示；禁用transition、keyframes、动态数据展示等动画；禁用音效，只保留静态视觉（CSS hover、阴影、渐变、边框等样式效果可正常使用）
- **不使用服务器端代码、本地文件资源、复杂交互功能**
- **若非用户要求，不使用未经验证的外链图片**
- **JavaScript代码内联在`<body>`底部，CSS内联在`<head>`中，SVG图形直接内联**
- **图表实现**：图表、仪表盘等任何Echarts支持的内容都必须使用Echarts实现，禁止自己写HTML、CSS、SVG代码
-->

- **File generation**: Only generate static HTML files
- **Responsive design prohibited**: Strictly no media queries, pages don't change with screen size
- **Content overload prohibited**: Avoid excessively long text, too many list items, oversized images; split into multiple pages when single page has too much content
- **Dynamic effects prohibited**: Page switching controlled by outer system, single pages focus on static display; disable transition, keyframes, dynamic data display animations; disable sound effects, only keep static visuals (CSS hover, shadows, gradients, borders and other style effects can be used normally)
- **Don't use server-side code, local file resources, complex interactive features**
- **Unless user requests, don't use unverified external images**
- **JavaScript code inline at `<body>` bottom, CSS inline in `<head>`, SVG graphics inline directly**
- **Chart implementation**: Charts, dashboards and any ECharts-supported content must use ECharts implementation, prohibited to write HTML, CSS, SVG code yourself

<!--zh
### Tailwind强制规范
-->

### Tailwind Mandatory Specification

<!--zh
- **最大化使用Tailwind类**：布局flex/grid、间距p-*/m-*、字号text-*、颜色text-*/bg-*、装饰rounded-*/shadow-*等
- **最小化自定义CSS**：仅限复杂渐变、伪元素等Tailwind无法实现的场景
-->

- **Maximize use of Tailwind classes**: Layout flex/grid, spacing p-_/m-_, font size text-_, colors text-_/bg-_, decoration rounded-_/shadow-\*, etc.
- **Minimize custom CSS**: Limited to complex gradients, pseudo-elements and other scenarios Tailwind cannot implement

<!--zh
###