creating-slides
This skill provides complete HTML slide creation and management capabilities, enabling users to create presentation projects, design slide pages, research content, search images, analyze data with Python, and edit or reorganize existing slide projects. Use it when users need to build presentations, modify slide content, manage presentation files, or when working with saved slide projects referenced with the [@slide_project:...] syntax.
git clone --depth 1 https://github.com/dtyq/magic /tmp/creating-slides && cp -r /tmp/creating-slides/backend/super-magic/agents/skills/creating-slides ~/.claude/skills/creating-slidesSKILL.md
# 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-specifCore canvas design skill covering project management, multimedia principles, AI image generation, web image search, and design marker processing. Load for any canvas design task. CRITICAL - When user message contains [@design_canvas_project:...] or [@design_marker:...] mentions, or when the user wants to generate video/animation/clip on a canvas project, you MUST load this skill first before any operations.
Summarize and compress the current conversation history into a structured context snapshot, then call compact_chat_history to save it. Read this skill only when the user explicitly asks to compact/summarize — system-triggered compaction injects the instructions directly without requiring a skill read.
|
|
Data analysis dashboard (instrument panel) development skill. Use when users need to develop data dashboards, create/edit Dashboard projects, build large-screen data boards, or perform dashboard data cleaning. Includes dashboard project creation, card plan, data cleaning (data_cleaning.py), card management tools (create_dashboard_cards, update_dashboard_cards, delete_dashboard_cards, query_dashboard_cards), map download tool (download_dashboard_maps), dashboard development, and validation.
Use when the user wants to interact with DingTalk in any way — including but not limited to: reading, querying, searching, sending, replying to, forwarding, or recalling DingTalk chat messages and chat history; managing group chats and conversations; sending DING alerts; querying contacts, org structure, AI search, or coworkers; reading, searching, creating, or editing DingTalk docs, drive files, sheets, AI tables, wiki, mail, calendar events, meeting rooms, AI meeting minutes, attendance, OA approvals, todos, reports/logs, live sessions, AI apps, permissions, or open-platform docs.
Use when the user provides API keys, tokens, or other configuration values that should persist across sessions, or when the user asks to query, list, or delete saved environment variables. Manages personal env by default and workspace env only when explicitly requested.