Agent Skills › dtyq/magic › creating-slides

creating-slides

GitHub

提供HTML幻灯片创建、编辑与管理能力，支持项目结构构建、内容设计、配图搜索及数据分析。基于TailwindCSS等技术规范生成静态页面，需通过特定工具执行Python代码以完成操作。

backend/super-magic/agents/skills/creating-slides/SKILL.md dtyq/magic

Trigger Scenarios

用户需要创建PPT或演示文稿用户提及[@slide_project:...]触发技能加载用户请求编辑或管理幻灯片项目

Install

npx skills add dtyq/magic --skill creating-slides -g -y

More Options

Non-standard path

npx skills add https://github.com/dtyq/magic/tree/master/backend/super-magic/agents/skills/creating-slides -g -y

Use without installing

npx skills use dtyq/magic@creating-slides

指定 Agent (Claude Code)

npx skills add dtyq/magic --skill creating-slides -a claude-code -g -y

安装 repo 全部 skill

npx skills add dtyq/magic --all -g -y

预览 repo 内 skill

npx skills add dtyq/magic --list

SKILL.md

Frontmatter

{
    "name": "creating-slides",
    "description": "Slide\/PPT creation skill that provides complete slide creation, editing, and management capabilities. Use when users need to create slides, make presentations, edit slide content, or manage slide projects. CRITICAL - When user message contains [@slide_project:...] mention, you MUST load this skill first before any operations."
}

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:

# 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-specific keywords
- Search format: [Subject keyword] [Specific scene description]
- Extract at least 1-3 subject keywords related to slide content
- Keyword examples:
  - Correct: "IShowSpeed China tour Beijing Great Wall" Wrong: "Beijing Great Wall"
  - Correct: "Elon Musk portrait" Wrong: "Tech giant portrait"
  - Correct: "Zuckerberg astronomical talent poaching" (specific event) Wrong: "AI talent competition" (abstract, general, non-specific)
Prohibited to use placeholder images, must use high-quality images returned by image_search tool

Design Style

Default style: Minimalist business style

Primary colors: Black/white/gray (text-gray-*)
Accent colors: Orange/red/green/blue (max 1-2 per page)
Background: Mainly white/light gray, dark background for contrast
Prohibited: Excessive use of blue, purple, gradients

Style selection: Based on content theme and target audience, derive from minimalist business style, imitate popular PPT design styles including but not limited to:

Tech: Apple Keynote, Google Material Design, Microsoft Fluent Design
Business: McKinsey Consulting, Huawei Enterprise, Alibaba Enterprise
Consumer brands: Xiaomi, Netflix, Nike
Design-driven: Minimalism, Flat Design
Media publishing: TED Talks, National Geographic
Education academia: Stanford University, MIT

Layout Design Core Principles

Precise zoning planning: Precise zoning planning based on 1920×1080 canvas
Priority layout modes: Single column centered, left-right split, three-point grid, standard three-section, card-style, timeline (only horizontal timeline allowed), comparison split-screen and dashboard classic PPT layout modes
Especially recommend left-right split layout (like 60/40 or 50/50), fully utilize horizontal space, avoid vertical stacking causing height overflow
Zoning planning:
- Header area: Fixed height about 10% (like h-24)
- Middle content area: Occupies main space, can flexibly divide into 2×2, 3×3 grid, max 9-grid
- Footer area: Fixed height about 5% (below h-16), images not allowed
Horizontal division: Max 6 columns per row, avoid overly fragmented division causing content crowding
Vertical infinite extension prohibited: Maximize horizontal space use, e.g., horizontal timeline not vertical timeline

Use predefined grid (grid-cols-2/3, grid-rows-2) with gap-4/6/8 unified spacing, flexibly control element space occupation through col-span-2, row-span-2, avoid pixel values defining grid size, use fr units or percentages; Flex layout uses TailwindCSS proportional width classes (w-1/2, w-1/3, w-2/3) prohibited hardcoded pixels, leverage flex-1, justify-between, items-center to achieve responsive layout and balanced content distribution.

Height Control Technique (Critical)

[Hard Requirement] Page height must strictly not exceed 1080px, this is a non-negotiable specification!

If content is too much for a single page, must split into multiple pages, absolutely not allowed to let single page exceed 1080px height.

Reasonable slide height control is extremely important. A simple effective approach is using Grid horizontal card layout, maximize horizontal space use, control similar left-right content amounts, aligned arrangement, overall neat typography.

During conception, page preceding elements should choose height-sensitive elements (usually need sufficient space), subsequent elements/content use height-insensitive elements (usually can adapt to remaining space, like charts), so only need to consider preceding element heights, set subsequent element/content heights to fill remaining height.

While ensuring page is visually full, absolutely don't cram too much readable substantive content in one page.

Please think through above points step by step during design, ensure perfect page layout and height control. Unless user has conflicting requirements, must default to this approach for page layout and height control.

Image Usage Technique

Images are very dangerous, hard-to-control elements in slide creation. Need to plan space with similar aspect ratio to place images, carry images through container elements, let images fill container. Container width and height should use relative units (like percentages, fr units) or Grid layout's automatic allocation mechanism, not fixed, often miscalculated pixel values, otherwise images often overflow canvas causing layout chaos.

Content-related images may also be used as local section backgrounds to add depth. Put an independent overlay layer above the background image and keep text/cards in a separate foreground layer. Do not apply opacity to a container that also holds text.

<div
  class="relative"
  style="background-image:url('images/xxx.jpg');
     background-size:cover;background-position:center;"
>
  <div class="absolute inset-0" style="background:rgba(14,20,32,0.60);"></div>
  <div class="relative z-10"><!-- content --></div>
</div>

Use background images selectively. Avoid repeating the same full-image treatment on most consecutive slides; alternate with charts, cards, diagrams, or clean graphic pages.

Default Design Mindset

Slides overall have premium feel, use rich decorative elements, conform to industry mainstream aesthetic practices, but don't introduce too much complexity. Note slide height control and neat typography, don't cram too much content in one page, this is key.

ECharts Configuration Requirements

All ECharts charts must ensure echarts.init() only after HTML content and CSS styles are fully parsed (window.onload). Note: window.onload, not DOMContentLoaded.
When page contains ECharts charts, must listen to window.resize event. When resize triggers, call resize() method on all charts.
Chart containers should fully utilize available space, reserve margins to ensure complete text display.

Multi-axis alignment:

Ensure same-direction axes have consistent tick counts to avoid grid line misalignment.
Use min, max, interval parameters to achieve tick alignment.

Visual requirements:

Keep axes, grid lines, labels aligned.
Avoid text overlap and dense data display issues.
Harmonious and unified color scheme, reasonable layout not obscuring key data.

Data Analysis Processing

When scenarios involve data analysis, write Python scripts for analysis:

Python scripts are solely for data analysis processing, not data visualization. Use ECharts for visualization. Strictly prohibited to write chart rendering code in Python scripts.
For data files like Excel, CSV, use read_files to read first 10 lines to understand structure, then use Python scripts for data analysis.
For Excel files with multiple sheets or large size, always use Python scripts for analysis. First use script to view data structure and sheet structure, then perform analysis.
Python script processing results should be refined. Script's role is to calculate and distill core data, not return large amounts of process data, typically hundreds to thousands of characters, max 5000 characters.
Follow latest mainstream Python programming practices. Ensure code robustness, aim for one-time successful execution.

Slide HTML Template

Reference the following template to create slide pages. Each page is an independent HTML file, style should be consistent but can have appropriate variations, comments are for your understanding only, omit in actual development.

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8" />
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <title>Slide Title</title>
    <script src="https://cdn.tailwindcss.com/3.4.17"></script>
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap"
      rel="stylesheet"
    />
    <style>
      html,
      body {
        width: 1920px;
        height: 1080px; /* DO NOT set height or max-height, allow extreme cases to exceed */
        font-family:
          "Noto Sans SC",
          -apple-system,
          BlinkMacSystemFont,
          "Segoe UI",
          "PingFang SC",
          "Hiragino Sans GB",
          "Microsoft YaHei",
          sans-serif;
        /* more styles can be added here... */
      }

      .slide-container {
        width: 1920px;
        height: 1080px;
        /* padding: Adjust according to design needs */
        /* more styles can be added here... */
      }
    </style>
  </head>
  <body>
    <div class="slide-container">
      <!-- Page content goes here -->
    </div>
    <!--
    IMPORTANT: This script must be included in every generated slide page.
    Simply copy this line as-is - no need to read or understand the script content.
    It enables keyboard navigation and title synchronization with the parent page.
    -->
    <script src="slide-bridge.js"></script>
  </body>
</html>

Quick Start

Reminder: All code examples below must be executed via run_sdk_snippet(python_code="..."). Refer to the "Code Execution Method" section at the top of this document.

Create Slide Project

from sdk.tool import tool

# Create empty project (add pages later)
result = tool.call('create_slide_project', {
    "project_path": "ChatGPT-Evolution-Report",
    "slides_array": [],
    "slide_images_content": "",
    "todo_list": ""
})

# Create complete project (with images and outline)
result = tool.call('create_slide_project', {
    "project_path": "Product-Launch",
    "slides_array": ["cover.html", "product-intro.html", "key-features.html"],
    "slide_images_content": """# Slide Image Library

## Project Info
- Search topic: Product Launch
- Collected at: 2025-01-22 10:30:00
- Total images: 5

## Image Categories

### Cover / Hero

![product-hero.jpg](https://example.com/image1.jpg)
- Index: 1
- Size: 1920x1080px (16:9, horizontal)
- Visual Analysis: Modern tech product close-up, white background, professional lighting
- Use Case: Cover hero image
- Search Keywords: product hero image modern technology
""",
    "todo_list": """# Slide Production Plan

## Project Info
- Project name: Product Launch
- Theme: New product release and feature showcase
- Pages: 3
- Keywords: product, technology, innovation

## Content Outline
### Cover (cover.html)
Display product name and hero visual

### Product Introduction (product-intro.html)
Introduce product background and core value

### Key Features (key-features.html)
Showcase the three core product features
"""
})

Create Single Slide Page

from sdk.tool import tool

result = tool.call('create_slide', {
    "file_path": "ChatGPT-Evolution-Report/OpenAI-Milestones.html",
    "content": """<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <title>OpenAI Milestones</title>
    <script src="https://cdn.tailwindcss.com/3.4.17"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet"/>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet"/>
    <style>
        html, body {
            width: 1920px;
            height: 1080px;
            font-family: 'Noto Sans SC', sans-serif;
        }
        .slide-container {
            width: 1920px;
            height: 1080px;
        }
    </style>
</head>
<body>
    <div class="slide-container bg-gradient-to-br from-blue-50 to-white flex items-center justify-center">
        <div class="text-center">
            <h1 class="text-7xl font-bold text-gray-900 mb-8">OpenAI Milestones</h1>
            <p class="text-3xl text-gray-600">Key moments in AI development</p>
        </div>
    </div>
    <script src="slide-bridge.js"></script>
</body>
</html>""",
    "max_width": 1920,
    "max_height": 1080,
    "analysis_js": """
const issues = [];
const container = document.querySelector('.slide-container');
if (container) {
    const {x, y, width, height} = container.getBoundingClientRect();
    if (y + height > maxHeight) {
        issues.push(`Container bottom overflow: ${Math.round(y+height)} > ${maxHeight}`);
    }
}
return issues.length > 0 ? issues.join(', ') : 'Layout check passed';
""",
    "insert_after_slide": ""
})

# Second page
result = tool.call('create_slide', {
    "file_path": "ChatGPT-Evolution-Report/Development-Timeline.html",
    "content": """...""",
    "max_width": 1920,
    "max_height": 1080,
    "analysis_js": """...""",
    "insert_after_slide": "OpenAI-Milestones.html"
})

# Third page
result = tool.call('create_slide', {
    "file_path": "ChatGPT-Evolution-Report/Technical-Breakthroughs.html",
    "content": """...""",
    "max_width": 1920,
    "max_height": 1080,
    "analysis_js": """...""",
    "insert_after_slide": "Development-Timeline.html"
})

Search Image Materials

from sdk.tool import tool

result = tool.call('image_search', {
    "topic_id": "ChatGPT-Evolution-Report",
    "requirements_xml": """<requirements>
    <requirement>
        <name>Musk Portrait</name>
        <query>Elon Musk portrait professional</query>
        <visual_understanding_prompt>Verify this is a clear portrait of Elon Musk</visual_understanding_prompt>
        <requirement_explanation>Need a professional portrait photo of Musk for the person introduction page</requirement_explanation>
        <expected_aspect_ratio>3:4</expected_aspect_ratio>
        <count>3</count>
    </requirement>
    <requirement>
        <name>ChatGPT Interface</name>
        <query>ChatGPT interface screenshot 2025</query>
        <visual_understanding_prompt>Confirm this is a real ChatGPT interface screenshot</visual_understanding_prompt>
        <requirement_explanation>Need a real ChatGPT interface screenshot to showcase product features</requirement_explanation>
        <expected_aspect_ratio>16:9</expected_aspect_ratio>
        <count>5</count>
    </requirement>
    <requirement>
        <name>Tech Background</name>
        <query>AI technology abstract background</query>
        <visual_understanding_prompt>Assess whether this is suitable as a technology-themed background</visual_understanding_prompt>
        <requirement_explanation>Need an abstract tech-style background image for slide backgrounds</requirement_explanation>
        <expected_aspect_ratio>16:9</expected_aspect_ratio>
        <count>3</count>
    </requirement>
</requirements>"""
})

Web Content Retrieval

from sdk.tool import tool

# Search web pages
search_result = tool.call('web_search', {
    "topic_id": "ChatGPT-Research",
    "requirements_xml": """<requirements>
    <requirement>
        <name>ChatGPT History</name>
        <query>ChatGPT development history 2025</query>
        <limit>10</limit>
    </requirement>
    <requirement>
        <name>GPT-4 Breakthroughs</name>
        <query>OpenAI GPT-4 technical breakthroughs</query>
        <limit>10</limit>
        <time_period>month</time_period>
    </requirement>
    <requirement>
        <name>Commercialization</name>
        <query>ChatGPT commercialization progress</query>
        <limit>10</limit>
    </requirement>
</requirements>"""
})

# Read high-value webpages (refer to separate documentation for this tool)
# read_result = tool.call('read_webpages_as_markdown', {...})

Core Tools and Parameters

create_slide_project - Create Slide Project

Parameter	Required	Type	Description
`project_path`	Yes	string	Project relative path (folder name), e.g., `"ChatGPT-Development-Report"`
`slide_count`	No	number	Slide page count, default 0 (empty project or determined by slides_array)
`slides_array`	Yes	array	List of slide filenames, can be empty array `[]`
`slide_images_content`	No	string	Image material library content (Markdown format), empty means not creating file
`todo_list`	No	string	Task planning content (Markdown format), empty means not creating file

Tool Functions:

Create project folder structure
Auto-generate index.html (presentation controller)
Auto-generate magic.project.js (project config)
Auto-generate slide-bridge.js (inter-page communication script)
Create images/ folder
If slide_images_content is provided, automatically download images to images/ folder

create_slide - Create Slide Page

Parameter	Required	Type	Description
`file_path`	Yes	string	Slide file path (relative to working directory), e.g., `"project-name/page.html"`
`content`	Yes	string	Complete HTML content
`max_width`	Yes	number	Expected max width (usually 1920)
`max_height`	Yes	number	Expected max height (usually 1080)
`analysis_js`	Yes	string	Layout analysis JavaScript function body (without function declaration)
`insert_after_slide`	Yes	string	Insert position: `""` for first page, filename to insert after that file

Tool Functions:

Write HTML file
Load via browser and execute analysis_js for quality check
Detect layout issues, height overflow, image stretch, small fonts
Auto-update slides array based on insert_after_slide

analysis_js Instructions:

Function body content (without function() declaration)
Can access maxWidth, maxHeight
Use return for result
Focus on detecting element overflow

insert_after_slide Instructions:

"" for first page, filename to insert after
Auto-updates slides array

image_search - Batch Search Images

Parameter	Required	Type	Description
`topic_id`	Yes	string	Search topic identifier for deduplication
`requirements_xml`	Yes	string	XML format search requirements configuration

requirements_xml Format: Each <requirement> contains:

name - Requirement name (required)
query - Search keywords (required)
visual_understanding_prompt - Visual analysis prompt (required)
requirement_explanation - Requirement explanation (required)
expected_aspect_ratio - Expected aspect ratio, e.g., 16:9, 9:16, 1:1 (required)
count - Image count (optional, default 20, max 50)

Key Principles:

Each requirement must provide clear search keywords
Keywords must include subject words, prohibit pure generic terms
Choose language based on search intent (Chinese/English/mixed)
Visual analysis cannot assess clarity, only content

web_search - Web Search

Parameter	Required	Type	Description
`topic_id`	Yes	string	Search topic identifier for deduplication
`requirements_xml`	Yes	string	XML format search requirements configuration

requirements_xml Format: Each <requirement> contains:

name - Requirement name (required)
query - Search keywords (required)
limit - Result count (optional, default 10, max 20)
offset - Pagination offset (optional, default 0)
language - Search language (optional, default zh-CN)
region - Search region (optional, default CN)
time_period - Time range (optional): day/week/month/year

Project Architecture

Slide projects use separated architecture design:

Project Name/
├── index.html          # Presentation controller - handles page navigation, keyboard control, scaling adaptation
├── magic.project.js    # Project config - stores slides array and other config info
├── slide-bridge.js     # Inter-slide communication script
├── images/             # Image resource folder
├── Slide Page 1.html   # Specific slide page
├── Slide Page 2.html   # Specific slide page
└── ...

Architecture Working Principles:

index.html is the core controller of presentation system, containing:
- Navigation logic: handles keyboard events, page switching
- Display engine: iframe loading, 16:9 scaling adaptation
- create_slide_project tool auto-generates index.html and magic.project.js files, no need to read these files
magic.project.js stores project config, including slides array defining slide page path list
slide-bridge.js is inter-slide communication script, auto-generated by create_slide_project tool, no need to read
Each HTML file in project root is a completely independent slide page:
- Self-contained design: independent styles, content, scripts
- Standard size: based on 1920×1080 design
Each slide project must be a complete self-contained project, therefore:
- Slide pages prohibited from referencing images or resources outside project folder. All images must be stored in images folder, otherwise cannot render correctly
- User-uploaded images need to be copied to images folder via shell_exec(command="cp src_path dst_path") command to be correctly referenced

Tool Usage Principles

Tool Restrictions for Slide Creation

Primary Tools (use when creating slides):

web_search - Internet content retrieval
read_webpages_as_markdown - Read high-value webpage content
create_slide_project - Create slide project
create_slide - Create individual slide page
image_search - Batch search image materials

Prohibited Tools (don't use when creating slides):

File writing tools - No quality checks
File editing tools - Only when user explicitly requests partial edits
shell_exec with mkdir - create_slide_project auto-creates

Exceptions:

Non-slide tasks (e.g., "write Python script"), can use other file tools
User explicitly requests partial edits, can use file editing tools

Tool Selection Principles

Creating Pages: Always use create_slide

create_slide = file writing + quality check + auto-registration
Don't use file writing tools (no quality checks)

Editing Pages:

Small-scale (≤100 chars): Use file editing tools
Large-scale (>100 chars): Use create_slide to recreate

Project Initialization: Use create_slide_project

Don't manually mkdir directories
Don't manually create magic.project.js and slide-bridge.js
create_slide_project completes all initialization in one go

Magic Project Mechanism

Core Concept: Folder containing magic.project.js = Frontend recognizes as Magic Project

magic.project.js Operation Constraints:

Format is JSONP (not JSON), generated by dedicated tools (e.g., setup_audio_project)
Never create this file directly
Allowed to edit and modify parameters inside (e.g., metadata.speakers)

Frontend Rendering Differentiation:

Regular folder: Shows folder icon, click to expand file list
Magic Project: Shows project icon, click to open dedicated panel (loads index.html visualization interface)

User Operations:

Click project icon: Open project panel (not entering folder, not opening index.html file)
Click arrow next to project name: Expand to see internal raw files (like expanding regular folder)

Project Types: type options include audio, slide, etc. Entire folder called "super deliverable".

Tool Parameter Format Specifications

create_slide_project Parameter Formats

slide_images_content Format Requirements

The slide_images_content parameter should contain complete slide-images.md file content, formatted as follows:

# Slide Image Material Library

## Project Information

- Search Topic: ChatGPT Evolution and Technological Breakthroughs
- Collection Time: 2025-01-22 10:30:00
- Total Images: 15

## Image Categories

### Cover/Hero Images

![{filename.png}]({image URL})

- Index: 1
- Size: {width}x{height}px ({ratio}, {horizontal/vertical/square})
- Visual Analysis: {AI analysis result, excluding size info, describe in detail with minimum words, at least 50 characters}
- Use Case: {recommended usage scenario}
- Search Keywords: {keywords used}

![{filename.png}]({image URL})

- Index: 2
- Size: {width}x{height}px ({ratio}, {horizontal/vertical/square})
- Visual Analysis: {AI analysis result, excluding size info, describe in detail with minimum words, at least 50 characters}
- Use Case: {recommended usage scenario}
- Search Keywords: {keywords used}

### Background Images

![{filename.png}]({image URL})

- Index: 3
  [Each image follows same format, use standard Markdown image syntax with sequential numbering...]

### Product/Content Display Images

![{filename.jpg}]({image URL})

- Index: N
  [Continue with same format, ensure index increments sequentially...]

### Icon/Decorative Images

![{filename.jpg}]({image URL})

- Index: N+1
  [Continue with same format, ensure index increments sequentially...]

Important Notes:

Use standard Markdown image format: ![filename](url)
filename serves as image alt text and also as filename when downloading
filename must include file extension, e.g., .jpg, .png, .webp, etc.
filename should prioritize user's preferred language, be concise and clear, e.g., "trump-assassination-attempt.jpg", "chatgpt-viral-phenomenon.png", "tesla-q4-earnings.jpg"

todo_list Format Requirements

The todo_list parameter should contain complete slide-todo.md file content for recording slide content planning and task breakdown.

Recommended format:

# Slide Production Task Planning

## Project Information

- Project Name: ChatGPT Development Report
- Theme: ChatGPT Evolution and Impact Analysis
- Pages: 10
- Key Keywords: ChatGPT, OpenAI, GPT-4, Artificial Intelligence

## Content Outline

### Cover (OpenAI Milestones.html)

Introduce OpenAI's important development nodes and breakthrough achievements

### Table of Contents (AI Revolution Timeline.html)

Display key time points and milestone events in artificial intelligence development

### GPT Series Evolution (GPT-4 Technological Breakthrough.html)

Detail GPT-4's technical innovations and performance improvements compared to previous generations

### Commercialization Process (ChatGPT Business Miracle.html)

Analyze how ChatGPT reached billion-level user scale in short time
...

magic.project.js Format Description (slide type)

magic.project.js is a JSONP format project configuration file that defines slide project structure and page list.

File Structure:

window.magicProjectConfig = {
  version: "1.0.0",
  type: "slide",
  name: "Project Name",
  slides: ["cover.html", "contents.html", "content-page.html"],
};
window.magicProjectConfigure(window.magicProjectConfig);

Field Descriptions:

version: Configuration file version number, fixed as "1.0.0"
type: Project type, fixed as "slide" (slide type)
name: Project name, usually folder name
slides: Slide page path array, relative to project root, defines page order

slides Array Characteristics:

Array elements are strings, each string is a relative path to an HTML file
Array order is the slide playback order
Can be empty array [] (empty project), add page paths later via edit_file
Frontend loads and navigates slide pages based on this array

Modification Examples: Use edit_file tool to modify slides array content:

Add page: Append new file path to end of array
Remove page: Remove specified path from array
Adjust order: Rearrange array element order

Note: Ensure valid JSONP syntax after modification (valid JavaScript code)

image_search Keyword Strategy

Basic Principles

When using image_search tool, query keywords must be diversified, try 2-3 different keyword combinations for each requirement.

Keyword Language Selection Principles

Judge language based on search intent and information source, try multilingual combinations:

Search foreign websites/international reports → Use English or original language
Search local websites → Use local language
Uncertain about source → Mix multiple languages for comprehensive results
Same topic can use different languages to get different perspectives

Search Strategy Framework

Core word: Most direct topic word
Qualifier: Core word + attribute/function/scenario
Combination: Multiple related elements combined
Variant: Synonym/abbreviation/colloquialism/multilingual variant

Search Examples

Search iPhone official images:

"iPhone", "iPhone 17 Pro Max", "iPhone official"

Search Chinese netizens' comments about Musk (screenshots):

"Musk Weibo", "Musk comments Chinese", "Musk social media China"

Search international news images about Musk:

"Elon Musk", "Musk Tesla", "Musk 2025"

Search WeChat function interface:

"WeChat app", "WeChat interface", "WeChat Pay"

Search international reports about WeChat:

"WeChat", "WeChat China", "WeChat report"

Search Tesla Shanghai factory (mixed):

"Tesla Shanghai", "Tesla Shanghai Gigafactory", "Tesla China factory"

Wrong Examples (Avoid)

Use "collaboration software" → Too generic, should use "Figma", "Figma collaboration" etc.
Use "database tool" → No subject, should use "Notion database", "Airtable" etc.
Prohibit generic searches: No using only generic industry terms (software/platform/tool), pure function terms (payment/chat), pure adjectives (modern/advanced)

Keyword Diversification Principles

From core to specific: Subject name → Subject+attribute → Subject+scenario+time
Try different expressions: Choose language based on source/abbreviation/full name/multilingual variants
Combine different elements: Subject/action/time/location
At least 2-3 different angles per requirement

Create Specific Slide Workflow

If user requests creating specific slides or requests imitating/referencing to generate slides, reference partial workflow of complete creation workflow to flexibly complete user's creation needs.

Best Practices

1. Use create_slide_project to Create Project

When user has no image requirements: slide_images_content can be empty
When user already provided images: No need to use image_search tool to search images, instead use visual_understanding tool to analyze image info, write image info into slide_images_content per format requirements
When user already provided outline or specific text: No need to use web_search tool to search webpages, directly extract todo_list content

2. Directly Use create_slide to Create Slides

Create slides based on user-provided information
Insist on using create_slide tool, use analysis_js to analyze layout
Don't use file writing tools

3. Special Handling for Imitate/Reference Scenarios

Remember to copy original images: Copy original images to new project's images folder, ensure complete slide project architecture
Use shell_exec(command="cp src_path dst_path") command to copy images

Complete Creation Workflow

If user has no special requirements, follow this workflow step by step to complete slide creation task:

1. Internet Search

Understand task description and user needs
Round 1 search (required): Generate 3 keyword sets for web_search tool, search relevant pages
Round 2 search (optional): If search results differ from expectations (common in current events scenarios), generate 3+ keyword sets again, conduct second round search with web_search
Select high-value pages, eliminate duplicates and irrelevant pages. If user doesn't specify count, default to 5 high-value pages, use read_webpages_as_markdown to get high-value page content

2. Image Search and Content Planning

Batch image search: Use image_search tool to batch search image materials, default minimum batch search 5+ requirements at once, all different, covering large, medium, small, horizontal, vertical various sizes or different scenarios for later use, set topic_id to project name (ensure deduplication)
One-time batch search: Speculate various types of image needs potentially needed later, initiate batch search in one go, common examples: search background large images, character portraits, product close-ups, icons in different sizes and scenarios
Avoid duplicates: Don't repeatedly use visual analysis on similar content images, ensure similar content images only used once
Content planning: Based on user needs and reference materials, analyze and plan slide content:
- Analyze user specific needs and background
- Extract core content points from reference files
- Determine slide page count (determine appropriate page count based on content)
- Identify target audience and usage scenarios
- Choose appropriate design style: Select most suitable style direction from design style list based on content theme
Prepare content: Prepare complete slide_images_content and todo_list content
User requirements priority: If user has explicit other image requirements, prioritize user requirements

3. Project Initialization

Call create_slide_project, it will help you complete the following in one go:

Create project folder and skeleton structure
Auto-generate slide-images.md and slide-todo.md files
Auto-download image materials to images folder
Create all necessary project files and structure

4. Slide Content Development

Page-by-page creation workflow:

for each slide:

Step 1: Image selection and usage
- Container analysis: First analyze width-height ratio and size design of image container in current page layout
- Select high-definition, professional, highly relevant to content theme and matching aspect ratio images
- Only allow using local images, prohibit using external images, avoid hotlink protection, image loading failures, etc.
Step 2: Page creation
- Before creation, think about height control, follow design principles and constraints
- Identify the main visual anchor before writing HTML
- If text is sparse, enlarge the conclusion and add cards, a chart, a large number, a background block, or a meaningful image area
- If using a background image, keep text readable with an overlay and avoid repeating the same treatment on consecutive slides
- Prefer horizontal split, grid, dashboard, matrix, timeline, or card layouts over small centered text blocks
- Determine insert position: first page insert_after_slide="", subsequent use previous filename
- Use create_slide, leverage analysis_js to analyze layout
- Serious issues: fix at most once, if unresolved continue next page
- Unless partial edits, always use create_slide, don't use other file tools
- User requests partial edits: can use file editing tools
- Ensure reasonable layout, complete content, good visuals

5. Project Delivery

Provide project summary
Explain file structure and functional features

Edit Slide Workflow

If user requests editing slides, reference the following workflow:

0. Locate target file (when user specifies by page number/index)

Read slides array from magic.project.js in project
Determine target file path by index (0-based)
Example: User says "modify page 10", read slides[9] to get file path

1. Workflow reference

Reference partial workflow of complete creation workflow to flexibly complete user's editing needs

2. Edit method selection

Less than 100 characters: use file editing tools
Otherwise: use create_slide to recreate

3. Tool usage principles

Avoid file writing tools
create_slide includes file writing and quality checks
Complete in one go, avoid multiple calls

Move or Rename Slide Workflow

If user requests modifying slide file names or paths, reference the following workflow:

Use list_dir tool to get complete project folder hierarchy, determine reasonable adjustment plan
View magic.project.js file in slide project, understand slides array content
Use shell_exec(command="mv old_path new_path") command to move or rename files, use edit_file to update slides array in magic.project.js

Flexible Project Management

Empty project creation: create_slide_project supports creating empty projects (slides_array=[]), can add slides page by page
Dynamic adjustment: slides array in magic.project.js can be modified anytime via edit_file to change page list and order
Use cases: Build page by page from scratch, migrate from existing PPT, dynamically adjust pages
File naming: Prohibited from adding sequence numbers to filenames (e.g. 01_xxx.html), order is managed by slides array and unrelated to filenames

PPTX File Processing Rules

Cannot directly process pptx files, but can use Python scripts to export each page of pptx as an image, then use visual understanding tools to analyze image information
Cannot read and extract materials from pptx
Cannot directly modify pptx, when user gives a pptx for optimization, need to inform them and ask if they accept creating a new online slide
HTML slides can be exported as PDF or pptx in the user interface, exported files cannot be re-edited
When user requests exceed capabilities, need to inform them in plain language

User Terminology

Users have terminology to describe actions for specified pages:

Refactor: Think and review content in design principles, redesign and recombine page with completely different layout design
Fix: Think and review height control techniques, image usage techniques, etc., and fix issues in page

Example: Refactor[@file_path:filename]

If user doesn't specify page, ask for clarification, proceed after user confirmation.

Version History

f9973c5 Current 2026-08-20 03:37
无版本变更
41d7ef4 2026-07-25 09:28

Metadata

Files: 0
Version: f9973c5
Hash: 7375b267
Indexed: 2026-07-25 09:28

creating-slides

creating-slides

Trigger Scenarios

Install

SKILL.md

Creating Slides Skill

Core Capabilities

Code Execution Method (Critical)

Default Requirements

Technical Specifications

Size and Implementation

CSS Frameworks and Resources

Technical Constraints

Tailwind Mandatory Specification

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

Visual Hierarchy

Design Principles

Content Design Mindset

Image Requirements

Design Style

Layout Design Core Principles

Height Control Technique (Critical)

Image Usage Technique

Default Design Mindset

ECharts Configuration Requirements

Data Analysis Processing

Slide HTML Template

Quick Start

Create Slide Project

Create Single Slide Page

Search Image Materials

Web Content Retrieval

Core Tools and Parameters

create_slide_project - Create Slide Project

create_slide - Create Slide Page

image_search - Batch Search Images

web_search - Web Search

Project Architecture

Tool Usage Principles

Tool Restrictions for Slide Creation

Tool Selection Principles

Magic Project Mechanism

Tool Parameter Format Specifications

create_slide_project Parameter Formats

slide_images_content Format Requirements

todo_list Format Requirements

magic.project.js Format Description (slide type)

image_search Keyword Strategy

Basic Principles

Keyword Language Selection Principles

Search Strategy Framework

Search Examples

Wrong Examples (Avoid)

Keyword Diversification Principles

Create Specific Slide Workflow

Best Practices

1. Use create_slide_project to Create Project

2. Directly Use create_slide to Create Slides

3. Special Handling for Imitate/Reference Scenarios

Complete Creation Workflow

1. Internet Search

2. Image Search and Content Planning

3. Project Initialization

4. Slide Content Development

5. Project Delivery

Edit Slide Workflow

Move or Rename Slide Workflow

Flexible Project Management

PPTX File Processing Rules

User Terminology

Version History

Same Skill Collection

Metadata

文库