Dokie AI PPT Skill
This is Dokie AI PPT Skill — a professional presentation design skill. Use it whenever you need to generate a PPT, create a presentation, or build any showcase content with HTML.
Built on web technologies, supporting everything from minimal business style to Awwwards-level creative motion — far beyond what traditional PPT can deliver.
Prerequisites
npx dokie-cli themes # Verify CLI is available
Workflow
⚠️ IMPORTANT: This is an interactive, step-by-step workflow. At each step, you MUST read the referenced rule files before doing the work. Present your result to the user and wait for their response before moving to the next step. Do NOT rush through multiple steps in one response.
New Project
Collect requirements → User confirms → Select theme → User confirms → Generate outline → User confirms → Generate HTML → Preview → User feedback
Modify Project
Understand intent → Minimal changes → Preserve original layout
See rules/workflow.md for details.
Core Specifications
| Item |
Specification |
| Resolution |
1280 × 720 |
| Charts |
Chart.js 4.5 |
| Icons |
Font Awesome 6.5 |
| Animation |
GSAP (CSS animation prohibited) |
| Prohibited |
Emoji, fabricated image URLs |
Rule Index
Process & Format
| File |
Content |
When to Reference |
| workflow.md |
Full workflow, grouping rules, theme switching |
Before starting a task |
| outline.md |
Outline format (Content + Design) |
When generating outline |
| modify-scenarios.md |
Modification scenarios (insert, delete, split, merge, restyle, etc.) |
When modifying a project |
| quality-check.md |
Post-generation quality checklist |
After generation, before preview |
Theme & Generation
| File |
Content |
When to Reference |
| theme.md |
Theme structure, style extraction, generation steps |
Must read before generating HTML |
| theme-list.md |
Full theme list (local + online) |
When selecting a theme |
| theme-customize.md |
Change colors, fonts, custom themes |
When user requests customization |
| slide-html.md |
HTML specs, icons, image rules |
When generating HTML |
Charts
| File |
Content |
| charts/chartjs.md |
Statistical charts (bar, line, pie, radar, bubble) |
| charts/pyramid.md |
Pyramid chart (HTML + CSS clip-path) |
| charts/funnel.md |
Funnel chart (HTML + CSS clip-path) |
| charts/timeline.md |
Timeline (HTML + CSS Flex/Grid) |
| charts/flowchart.md |
Flowchart + cycle diagram (HTML/AntV/Mermaid) |
| charts/quadrant.md |
Quadrant / SWOT (HTML + CSS Grid) |
Animation
Choose style based on scenario. Default is "Balanced":
| File |
Style |
Use Case |
| animation/minimal.md |
Minimal |
Formal business, investor presentations |
| animation/balanced.md |
Balanced |
General purpose, internal training |
| animation/creative.md |
Creative |
Product launches, creative showcases |
CLI Commands
npx dokie-cli themes # List all themes
npx dokie-cli themes --json # JSON format output
npx dokie-cli theme <name|id> # Get theme details (with HTML templates)
npx dokie-cli theme "Dokie Vibe" --json # JSON format output
npx dokie-cli preview ./my-project/ # Local preview
Output Format
my-project/
├── slide_01.html
├── slide_02.html
├── slide_03.html
└── ...
File naming: slide_01.html, slide_02.html ... numbered sequentially.
Key Constraints
- Strictly follow the outline — do not modify, expand, or abbreviate
- Theme consistency — colors, fonts, styles must strictly follow the theme
- Content density — one topic per slide, split if too much
- Image sources — only use user-uploaded or tool-fetched images
- Data integrity — never fabricate chart data
1---2name: dokie-ai-ppt3description: AI presentation generator. Create professional HTML slides through conversation. Triggers: create/edit PPT, presentation, slides, deck, keynote, pitch deck, quarterly report, product intro, training materials, roadshow, work report. Core: requirement analysis, outline generation, theme selection, HTML slide generation, local preview.4---5
6# Dokie AI PPT Skill
7
8This is Dokie AI PPT Skill — a professional presentation design skill. Use it whenever you need to generate a PPT, create a presentation, or build any showcase content with HTML.
9
10Built on web technologies, supporting everything from minimal business style to Awwwards-level creative motion — far beyond what traditional PPT can deliver.
11
12## Prerequisites
13
14```bash
15npx dokie-cli themes # Verify CLI is available
16```
17
18## Workflow
19
20**⚠️ IMPORTANT: This is an interactive, step-by-step workflow. At each step, you MUST read the referenced rule files before doing the work. Present your result to the user and wait for their response before moving to the next step. Do NOT rush through multiple steps in one response.**
21
22### New Project
23
24```
25Collect requirements → User confirms → Select theme → User confirms → Generate outline → User confirms → Generate HTML → Preview → User feedback
26```
27
28### Modify Project
29
30```
31Understand intent → Minimal changes → Preserve original layout
32```
33
34See [rules/workflow.md](rules/workflow.md) for details.
35
36## Core Specifications
37
38| Item | Specification |
39|------|---------------|
40| Resolution | 1280 × 720 |
41| Charts | Chart.js 4.5 |
42| Icons | Font Awesome 6.5 |
43| Animation | GSAP (CSS animation prohibited) |
44| Prohibited | Emoji, fabricated image URLs |
45
46## Rule Index
47
48### Process & Format
49
50| File | Content | When to Reference |
51|------|---------|-------------------|
52| [workflow.md](rules/workflow.md) | Full workflow, grouping rules, theme switching | Before starting a task |
53| [outline.md](rules/outline.md) | Outline format (Content + Design) | When generating outline |
54| [modify-scenarios.md](rules/modify-scenarios.md) | Modification scenarios (insert, delete, split, merge, restyle, etc.) | When modifying a project |
55| [quality-check.md](rules/quality-check.md) | Post-generation quality checklist | After generation, before preview |
56
57### Theme & Generation
58
59| File | Content | When to Reference |
60|------|---------|-------------------|
61| [theme.md](rules/theme.md) | Theme structure, style extraction, generation steps | **Must read before generating HTML** |
62| [theme-list.md](rules/theme-list.md) | Full theme list (local + online) | When selecting a theme |
63| [theme-customize.md](rules/theme-customize.md) | Change colors, fonts, custom themes | When user requests customization |
64| [slide-html.md](rules/slide-html.md) | HTML specs, icons, image rules | When generating HTML |
65
66### Charts
67
68| File | Content |
69|------|---------|
70| [charts/chartjs.md](rules/charts/chartjs.md) | Statistical charts (bar, line, pie, radar, bubble) |
71| [charts/pyramid.md](rules/charts/pyramid.md) | Pyramid chart (HTML + CSS clip-path) |
72| [charts/funnel.md](rules/charts/funnel.md) | Funnel chart (HTML + CSS clip-path) |
73| [charts/timeline.md](rules/charts/timeline.md) | Timeline (HTML + CSS Flex/Grid) |
74| [charts/flowchart.md](rules/charts/flowchart.md) | Flowchart + cycle diagram (HTML/AntV/Mermaid) |
75| [charts/quadrant.md](rules/charts/quadrant.md) | Quadrant / SWOT (HTML + CSS Grid) |
76
77### Animation
78
79Choose style based on scenario. Default is "Balanced":
80
81| File | Style | Use Case |
82|------|-------|----------|
83| [animation/minimal.md](rules/animation/minimal.md) | Minimal | Formal business, investor presentations |
84| [animation/balanced.md](rules/animation/balanced.md) | Balanced | General purpose, internal training |
85| [animation/creative.md](rules/animation/creative.md) | Creative | Product launches, creative showcases |
86
87## CLI Commands
88
89```bash
90npx dokie-cli themes # List all themes
91npx dokie-cli themes --json # JSON format output
92npx dokie-cli theme <name|id> # Get theme details (with HTML templates)
93npx dokie-cli theme "Dokie Vibe" --json # JSON format output
94npx dokie-cli preview ./my-project/ # Local preview
95```
96
97## Output Format
98
99```
100my-project/
101├── slide_01.html
102├── slide_02.html
103├── slide_03.html
104└── ...
105```
106
107File naming: `slide_01.html`, `slide_02.html` ... numbered sequentially.
108
109## Key Constraints
110
1111. **Strictly follow the outline** — do not modify, expand, or abbreviate
1122. **Theme consistency** — colors, fonts, styles must strictly follow the theme
1133. **Content density** — one topic per slide, split if too much
1144. **Image sources** — only use user-uploaded or tool-fetched images
1155. **Data integrity** — never fabricate chart data
myzy-ai