creating-slides

# Creating Slides Skill

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

## Core Capabilities

- **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

---

## Code Execution Method (Critical)

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": []
})
"""
)
```

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.

---

## Default Requirements

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

---

## Technical Specifications

### Size and Implementation

- **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

### CSS Frameworks and Resources

- **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)

### Technical Constraints

- **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

### Tailwind Mandatory Specification

- **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

### Font Size Specification (1920×1080 canvas requires large fonts)

- **Page main title**: 64-72px (text-6xl/7xl) - Prefer 64px and above
- **Section title/Card main title**: 40-52px (text-5xl) - Don't go below 40px
- **Subtitle/Card subtitle**: 30-36px (text-3xl/4xl) - Prefer 32px and above
- **Body text/List item**: 22-26px (text-2xl) - Minimum 22px, prefer 24px
- **Auxiliary label**: 20px (text-xl) - Only for tiny labels
- **Strictly prohibit 18px (text-lg) and below**, unless user explicitly requires
- **Principle**: Prefer large fonts with less content split into more pages, not small fonts cramming into one page

### Visual Hierarchy

Font size contrast (main title differs from body by 3-4 levels) + weight contrast (title font-bold/black) + color contrast (title text-gray-900, body text-gray-600/700) + spatial contrast (important elements mb-8/10/12) + decorative elements (number labels, color blocks, vertical bars)

---

## Design Principles

### Content Design Mindset

- **One key point per page**: Each slide conveys only one core message, maintain focused attention
- **Information hierarchy**: Establish clear information hierarchy through font size, color depth, spatial position, create depth through shadows and transforms
- **Visual expression**: Use FontAwesome or Emoji icons to enhance visual expression

### Image Requirements

- **Image ratio**: 70% of slides must contain high-quality images, e.g., 7 out of 10 slides must contain images
- When an image is the main visual anchor, make it part of the layout rather than a tiny corner illustration. It should usually occupy about one third to one half of the main content area.
- Slides without images still need a strong visual anchor, such as a chart, matrix, color block, large number, geometric decoration, card grid, or flow diagram. Avoid pages with only a title and sparse body text.
- **Search keywords**: Must contain at least one subject keyword, prohibited to use abstract, general, non-specif