Agent skill

Frontend Slides

by xu-xiang in xu-xiang/everything-claude-code-zh

从零开始创建令人惊叹、动画丰富的 HTML 演示文稿,或通过转换 PowerPoint 文件生成。适用于用户想要构建演示文稿、将 PPT/PPTX 转换为 Web 页面、或为演讲/路演创建幻灯片的场景。帮助非设计师用户通过视觉探索而非抽象选择来发现他们的审美偏好。

MITAuto-check passedDocuments & Office

Install Frontend Slides

skills CLI
$ npx skills add xu-xiang/everything-claude-code-zh --skill frontend-slides -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install xu-xiang/everything-claude-code-zh frontend-slides --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/xu-xiang/everything-claude-code-zh.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/frontend-slides .claude/skills/frontend-slides && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
frontend-slides
GitHub stars
2k
Token cost
~913 tokens
SKILL.md length
299 words
Files
3
Skills in repo
78
Repo updated
First seen
Licence
MIT

At a glance

从零开始创建令人惊叹、动画丰富的 HTML 演示文稿,或通过转换 PowerPoint 文件生成。适用于用户想要构建演示文稿、将 PPT/PPTX 转换为 Web 页面、或为演讲/路演创建幻灯片的场景。帮助非设计师用户通过视觉探索而非抽象选择来发现他们的审美偏好。

  • Works in 7 steps: 检测模式(Detect Mode) → 内容探索(Discover Content) → 风格探索(Discover Style) → …
  • Tasks that involve PowerPoint presentations
  • SKILL.md covers 何时激活, 核心约束(Non-Negotiables), 工作流(Workflow) and PPT / PPTX 转换, plus 5 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Frontend Slides is an agent skill from xu-xiang/everything-claude-code-zh. 从零开始创建令人惊叹、动画丰富的 HTML 演示文稿,或通过转换 PowerPoint 文件生成。适用于用户想要构建演示文稿、将 PPT/PPTX 转换为 Web 页面、或为演讲/路演创建幻灯片的场景。帮助非设计师用户通过视觉探索而非抽象选择来发现他们的审美偏好。

Its SKILL.md is about 910 tokens, which your agent loads only when the skill is triggered. The skill folder holds 3 other files (for example `STYLE_PRESETS.md` and `agents/openai.yaml`).

It sits in Documents & Office, covering PowerPoint presentations and Slides and decks. It works with Microsoft PowerPoint. The repository describes itself as: everything-claude-code 中文翻译项目:完整的 Claude Code 配置集合(agents, skills, hooks, commands, rules, MCPs)。源自 Anthropic 黑客松获胜者的实战配置,助力中文工程师高效理解与使用 Claude Code。 The licence is MIT.

When your agent uses it

  • Tasks that involve PowerPoint presentations
  • Tasks that involve Slides and decks

Example prompts

  • “/frontend-slides”

Requirements

  • Python 3

Workflow steps

7 steps, taken from the step headings in SKILL.md.

  1. 检测模式(Detect Mode)
  2. 内容探索(Discover Content)
  3. 风格探索(Discover Style)
  4. 构建演示文稿(Build the Presentation)
  5. 强制视口适配(Enforce Viewport Fit)
  6. 验证(Validate)
  7. 交付(Deliver)

What it can do on your machine

Read from SKILL.md and the folder at commit dfbf946. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • github.com

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Frontend Slides loads about 913 tokens when it runs. Until then it costs about 37 tokens; SKILL.md has 299 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~37
When it runs · the whole SKILL.md, loaded when a task matches
~913

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from xu-xiang/everything-claude-code-zh at commit dfbf946, republished under its MIT licence (© xu-xiang). 299 words, ~913 tokens.

Download SKILL.mdSave it as .claude/skills/frontend-slides/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.
name
frontend-slides
description
从零开始创建令人惊叹、动画丰富的 HTML 演示文稿,或通过转换 PowerPoint 文件生成。适用于用户想要构建演示文稿、将 PPT/PPTX 转换为 Web 页面、或为演讲/路演创建幻灯片的场景。帮助非设计师用户通过视觉探索而非抽象选择来发现他们的审美偏好。
origin
ECC

前端幻灯片(Frontend Slides)

创建零依赖(Zero-dependency)、动画丰富的 HTML 演示文稿,完全在浏览器中运行。

灵感来源于 zarazhangrui 作品中所展示的视觉探索方法。

何时激活

  • 创建演讲文稿(Talk Deck)、路演文稿(Pitch Deck)、研讨会文稿或内部演示文稿
  • 将 .ppt 或 .pptx 幻灯片转换为 HTML 演示文稿
  • 改进现有 HTML 演示文稿的布局、动效或排版
  • 与尚不清楚设计偏好的用户一起探索演示风格

核心约束(Non-Negotiables)

  1. 零依赖(Zero dependencies):默认生成单个自包含的 HTML 文件,内联 CSS 和 JS。
  2. 必须适配视口(Viewport fit is mandatory):每张幻灯片必须完全填满一个视口,不得有内部滚动。
  3. 视觉先行(Show, don't tell):使用视觉预览而不是抽象的风格问卷。
  4. 独特的设计:避免使用通用的紫色渐变、白色背景上的 Inter 字体等模板化的设计。
  5. 生产级质量:保持代码注释清晰、具备无障碍性(Accessible)、响应式且性能良好。

在生成之前,请阅读 STYLE_PRESETS.md 以了解视口安全 CSS 基础、内容密度限制、预设目录和 CSS 注意事项。

工作流(Workflow)

1. 检测模式(Detect Mode)

选择一条路径:

  • 新演示文稿:用户有主题、笔记或完整草案
  • PPT 转换:用户持有 .ppt 或 .pptx 文件
  • 增强:用户已有 HTML 幻灯片并希望进行改进
2. 内容探索(Discover Content)

仅询问最基本的需求:

  • 目的:路演、教学、会议演讲、内部更新
  • 长度:短(5-10 页)、中(10-20 页)、长(20 页以上)
  • 内容状态:已完成的文案、粗略笔记、仅有主题

如果用户已有内容,请要求他们在进行风格设计前粘贴内容。

3. 风格探索(Discover Style)

默认为视觉探索。

如果用户已经知道所需的预设,跳过预览并直接使用。

否则:

  1. 询问文稿应营造什么感觉:震撼、活力、专注、启发。
  2. 在 .ecc-design/slide-previews/ 中生成 3 个单页预览文件。
  3. 每个预览必须是自包含的,清晰展示排版/颜色/动效,且幻灯片内容保持在 100 行左右。
  4. 询问用户保留哪个预览,或者混合哪些元素。

在将情绪映射到风格时,请参考 STYLE_PRESETS.md 中的预设指南。

4. 构建演示文稿(Build the Presentation)

输出以下之一:

  • presentation.html
  • [presentation-name].html

仅当文稿包含提取的或用户提供的图像时,才使用 assets/ 文件夹。

要求结构:

  • 语义化的幻灯片部分(slide sections)
  • 来自 STYLE_PRESETS.md 的视口安全 CSS 基础
  • 用于主题值的 CSS 自定义属性(Variables)
  • 用于键盘、滚轮和触摸导航的演示控制器类
  • 用于显示动画的相交观察器(Intersection Observer)
  • 减弱动态效果(Reduced-motion)支持
5. 强制视口适配(Enforce Viewport Fit)

将其视为硬性关卡。

规则:

  • 每个 .slide 必须使用 height: 100vh; height: 100dvh; overflow: hidden;
  • 所有字体和间距必须使用 clamp() 进行缩放
  • 当内容放不下时,拆分为多张幻灯片
  • 绝不通过将文本缩小到不可读的大小来解决溢出问题
  • 绝不允许在幻灯片内部出现滚动条

使用 STYLE_PRESETS.md 中的密度限制和强制性 CSS 块。

6. 验证(Validate)

在以下尺寸下检查完成的文稿:

  • 1920x1080
  • 1280x720
  • 768x1024
  • 375x667
  • 667x375

如果浏览器自动化工具可用,使用它来验证没有幻灯片溢出,并且键盘导航正常工作。

7. 交付(Deliver)

在移交时:

  • 删除临时预览文件,除非用户想要保留它们
  • 在有用时,使用平台适用的命令打开文稿
  • 总结文件路径、使用的预设、幻灯片数量以及简单的方案自定义点

为当前操作系统使用正确的打开命令:

  • macOS: open file.html
  • Linux: xdg-open file.html
  • Windows: start "" file.html

PPT / PPTX 转换

对于 PowerPoint 转换:

  1. 优先使用带有 python-pptx 的 python3 来提取文本、图像和备注。
  2. 如果 python-pptx 不可用,询问是否安装它,或者回退到手动/基于导出的工作流。
  3. 保留幻灯片顺序、演讲者备注和提取的资产。
  4. 提取后,运行与新演示文稿相同的风格选择工作流。

保持转换跨平台。当 Python 可以胜任时,不要依赖仅限 macOS 的工具。

实现要求(Implementation Requirements)

HTML / CSS
  • 除非用户明确要求多文件项目,否则使用内联 CSS 和 JS。
  • 字体可能来自 Google Fonts 或 Fontshare。
  • 偏好大气背景、强大的排版层次结构和清晰的视觉方向。
  • 使用抽象形状、渐变、网格、噪声和几何图形,而不是插图。
JavaScript

包括:

  • 键盘导航
  • 触摸 / 滑动导航
  • 鼠标滚轮导航
  • 进度指示器或幻灯片索引
  • 进入时显示(reveal-on-enter)的动画触发器
无障碍性(Accessibility)
  • 使用语义化结构 (main, section, nav)
  • 保持对比度可读
  • 支持纯键盘导航
  • 尊重 prefers-reduced-motion

内容密度限制(Content Density Limits)

除非用户明确要求更密集的幻灯片且可读性仍然保持,否则请遵循以下最大值:

幻灯片类型限制
标题1 个标题 + 1 个副标题 + 可选的标语
内容1 个标题 + 4-6 个项目符号或 2 个短段落
功能网格最多 6 个卡片
代码最多 8-10 行
引用1 个引用 + 署名
图像1 张受视口约束的图像

反模式(Anti-Patterns)

  • 没有视觉标识的通用初创公司渐变
  • 使用系统字体的文稿,除非是有意的编辑风格
  • 长篇的项目符号墙
  • 需要滚动的代码块
  • 在短屏幕上崩溃的固定高度内容框
  • 无效的负值 CSS 函数,如 -clamp(...)
  • frontend-patterns:用于文稿周围的组件和交互模式
  • liquid-glass-design:当演示文稿有意借用 Apple 玻璃美学时使用
  • e2e-testing:如果你需要为最终文稿进行自动化浏览器验证

交付清单(Deliverable Checklist)

  • 演示文稿可以从本地文件在浏览器中运行
  • 每张幻灯片都适配视口且无需滚动
  • 风格独特且有针对性
  • 动画有意义而非杂乱
  • 尊重减弱动态效果(Reduced motion)
  • 在移交时说明文件路径和自定义点

© xu-xiang, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 2 other files in .agents/skills/frontend-slides of xu-xiang/everything-claude-code-zh.

  • SKILL.md
  • STYLE_PRESETS.md
  • agents/openai.yaml

Open the folder on GitHubat commit dfbf946

Compare with similar skills

Frontend Slides next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Frontend Slides compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Frontend Slides this skillxu-xiang/everything-claude-code-zh2k—~913Automated safety check: PassMIT
Image To Editable Pptningzimu/image-to-editable-ppt-skill2.9k—~4.3kAutomated safety check: PassMIT
Slidesfcakyon/claude-codex-settings1.2k1 repos~1.1kAutomated safety check: PassMIT
Ppt Image FirstNyxTides/ppt-image-first1.2k—~1.6kAutomated safety check: PassApache-2.0
Gpt Image2 PptJuneYaooo/gpt-image2-ppt-skills1.3k—~8.9kAutomated safety check: NotesApache-2.0
Paper Deckzsyggg/paper-craft-skills1.3k—~1.4kAutomated safety check: PassNone

Similar skills

  • Image To Editable Ppt

    ningzimu/image-to-editable-ppt-skill

    Rebuild slide images, scanned or image-based PPT/PPTX files, and PDF decks into object-level editable PowerPoint (.pptx), preserving speaker notes when supplied.

    2.9k GitHub stars~4.3k tokensUpdated 24 days ago
    Documents & OfficeAuto-check passed
  • Slides

    fcakyon/claude-codex-settings

    Create and edit presentation slide decks (.pptx) with PptxGenJS, bundled layout helpers, and render/validation utilities.

    1.2k GitHub starsUsed in 1 repo~1.1k tokens
    Documents & OfficeAuto-check passed
  • Ppt Image First

    NyxTides/ppt-image-first

    Build presentation plans for PPT / slides / decks through a conversation-first workflow, then propose multiple visual directions with preview images before writing deck specs.

    1.2k GitHub stars~1.6k tokensUpdated 5 mo ago
    Documents & OfficeAuto-check passed
  • Gpt Image2 Ppt

    JuneYaooo/gpt-image2-ppt-skills

    Generate visually striking PPT slides via OpenAI's gpt-image-2 -- use any style in styles/<collection/STYLEID.md or mimic a user-supplied .pptx template; outputs high-res slide PNGs and a 16:9 .pptx.

    1.3k GitHub stars~8.9k tokensUpdated 1 mo ago
    Documents & OfficeAuto-check: notes
  • Paper Deck

    zsyggg/paper-craft-skills

    将论文、技术文章或知识内容制作成高真实感的 AIGC 幻灯片。先做叙事结构和逐页视觉导演,再调用生图模型生成每一页 16:9 slide image,最后合成为 PPTX/PDF。适合论文汇报、组会、公开课、技术分享、商业化研究展示;当用户提到“论文PPT”“AI生成PPT”“不像AI的PPT”“高质感幻灯片”“逐页生图PPT”时使用。

    1.3k GitHub stars~1.4k tokensUpdated 4 mo ago
    Documents & OfficeAuto-check passed
  • HTML Slide To PPTX

    mucsbr/ppt-agent-workflow-san

    Convert structured single-slide or small deck HTML files into editable PPTX slides with native text boxes, shapes, chips, arrows, and panels.

    645 GitHub stars~1.1k tokensUpdated 1 mo ago
    Documents & OfficeAuto-check passed

More from xu-xiang/everything-claude-code-zh

All 78 skills in this repo
  • Configure Ecc

    xu-xiang/everything-claude-code-zh

    Everything Claude Code 的交互式安装程序 — 引导用户选择并安装技能和规则到用户级或项目级目录,验证路径,并可选择优化已安装文件。

    2k GitHub starsUsed in 1 repo~2.1k tokens
    Auto-check passed
  • Continuous Learning V2

    xu-xiang/everything-claude-code-zh

    基于本能(Instinct)的学习系统,通过钩子(hooks)观察会话,创建带有置信度评分的原子本能,并将其演化为技能(Skills)、命令(Commands)或智能体(Agents)。v2.1 版本增加了项目作用域(project-scoped)的本能,以防止跨项目污染。

    2k GitHub stars~2.1k tokensUpdated 7 mo ago
    Auto-check passed
  • API Design

    xu-xiang/everything-claude-code-zh

    生产级 API 的 REST API 设计模式,包括资源命名、状态码、分页、过滤、错误响应、版本控制和速率限制. An agent skill from xu-xiang/everything-claude-code-zh.

    2k GitHub stars~2.7k tokensUpdated 7 mo ago
    Auto-check passed
  • Backend Patterns

    xu-xiang/everything-claude-code-zh

    后端架构模式、API 设计、数据库优化以及适用于 Node.js、Express 和 Next.js API 路由的服务端最佳实践。

    2k GitHub stars~3.2k tokensUpdated 7 mo ago
    Auto-check passed
  • Backend Patterns

    xu-xiang/everything-claude-code-zh

    后端架构模式、API 设计、数据库优化以及 Node.js、Express 和 Next.js API 路由的服务端最佳实践。

    2k GitHub stars~3.1k tokensUpdated 7 mo ago
    Auto-check passed
  • Backend Patterns

    xu-xiang/everything-claude-code-zh

    后端架构模式、API 设计、数据库优化以及针对 Node.js、Express 和 Next.js API 路由的服务端最佳实践。

    2k GitHub stars~3.2k tokensUpdated 7 mo ago
    Auto-check passed

Questions about Frontend Slides

What does Frontend Slides do?

从零开始创建令人惊叹、动画丰富的 HTML 演示文稿,或通过转换 PowerPoint 文件生成。适用于用户想要构建演示文稿、将 PPT/PPTX 转换为 Web 页面、或为演讲/路演创建幻灯片的场景。帮助非设计师用户通过视觉探索而非抽象选择来发现他们的审美偏好。. Frontend Slides is an agent skill from xu-xiang/everything-claude-code-zh.

When should I use Frontend Slides?

Frontend Slides fits situations like: tasks that involve PowerPoint presentations; tasks that involve Slides and decks.

How do I install Frontend Slides in Claude Code?

Run `npx skills add xu-xiang/everything-claude-code-zh --skill frontend-slides -a claude-code`. Or copy the skill folder (.agents/skills/frontend-slides in xu-xiang/everything-claude-code-zh) into .claude/skills/frontend-slides in your project. Claude Code loads it when a task matches its description.

How do I install Frontend Slides in Codex?

Run `npx skills add xu-xiang/everything-claude-code-zh --skill frontend-slides -a codex`. Or copy the skill folder (.agents/skills/frontend-slides in xu-xiang/everything-claude-code-zh) into .agents/skills/frontend-slides in your project. Codex loads it when a task matches its description.

Can I use Frontend Slides in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add xu-xiang/everything-claude-code-zh --skill frontend-slides -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/frontend-slides, .gemini/skills/frontend-slides, .github/skills/frontend-slides and .opencode/skills/frontend-slides in your project.

What does Frontend Slides need to run?

SKILL.md names no scripts, command-line tools or credentials: Frontend Slides is instructions for the agent only. Our summary lists: Python 3.

Does Frontend Slides access the network?

SKILL.md names 1 domain. As links in the text: github.com. This is read from the text; nothing was executed.

Is Frontend Slides safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Frontend Slides use?

Frontend Slides is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Frontend Slides use?

About 913 tokens (SKILL.md is roughly 3.7k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Frontend Slides?

Skills that share tags, products or a category with Frontend Slides: Image To Editable Ppt (ningzimu/image-to-editable-ppt-skill, 2.9k stars), Slides (fcakyon/claude-codex-settings, 1.2k stars), Ppt Image First (NyxTides/ppt-image-first, 1.2k stars) and Gpt Image2 Ppt (JuneYaooo/gpt-image2-ppt-skills, 1.3k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Frontend Slides?

xu-xiang (a GitHub user) maintains it in xu-xiang/everything-claude-code-zh, which has 1,978 GitHub stars. The repository holds 78 skills in this directory. The repository was last updated on March 5, 2026.

Source: xu-xiang/everything-claude-code-zh on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.