Agent skill

Frontend Slides

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

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

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/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
~919 tokens
SKILL.md length
298 words
Files
2
Skills in repo
78
Repo updated
First seen
Licence
MIT

At a glance

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

  • Works in 7 steps: 检测模式(Detect Mode) → 内容发现(Discover Content) → 风格发现(Discover Style) → …
  • Tasks that involve PowerPoint presentations
  • SKILL.md covers 激活时机(When to Activate), 硬性规定(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 转换为网页版,或为演讲/路演创建幻灯片时使用。帮助非设计师通过视觉探索而非抽象选择来发现他们的审美。

Its SKILL.md is about 920 tokens, which your agent loads only when the skill is triggered. The skill folder holds 1 other file (for example `STYLE_PRESETS.md`).

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

    No URLs in SKILL.md.

    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 919 tokens when it runs. Until then it costs about 35 tokens; SKILL.md has 298 words of instructions outside code blocks.

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

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). 298 words, ~919 tokens.

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

前端幻灯片(Frontend Slides)

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

受 zarazhangrui 作品中展示的视觉探索方法的启发(致谢:@zarazhangrui)。

激活时机(When to Activate)

  • 创建演讲幻灯片组(Talk deck)、路演幻灯片组(Pitch deck)、工作坊幻灯片组或内部演示文稿
  • 将 .ppt 或 .pptx 幻灯片转换为 HTML 演示文稿
  • 改进现有 HTML 演示文稿的布局、动态(Motion)或排版(Typography)
  • 与尚不清楚其设计偏好的用户一起探索演示风格

硬性规定(Non-Negotiables)

  1. 零依赖(Zero dependencies):默认生成一个包含内联 CSS 和 JS 的自包含 HTML 文件。
  2. 必须适配视口(Viewport fit):每张幻灯片必须适配在一个视口内,且无内部滚动。
  3. 展示而非叙述(Show, don't tell):使用视觉预览,而不是抽象的风格问卷。
  4. 独特的设计:避免通用的紫色渐变、白底 Inter 字体、看起来像模板的幻灯片组(Decks)。
  5. 生产质量:保持代码有注释、可访问、响应式且高性能。

在生成之前,请阅读 STYLE_PRESETS.md 以了解视口安全(Viewport-safe)的 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/ 文件夹。

必要结构:

  • 语义化的幻灯片部分(sections)
  • 来自 STYLE_PRESETS.md 的视口安全 CSS 基础
  • 用于主题值的 CSS 自定义属性
  • 用于键盘、滚轮和触摸导航的演示控制器类
  • 用于显示动画的 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)

除非用户明确要求更密集的幻灯片且仍保持可读性,否则使用以下最大限制:

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

反面模式(Anti-Patterns)

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

交付物检查清单(Deliverable Checklist)

  • 演示文稿可以在浏览器中通过本地文件运行
  • 每张幻灯片都能适配视口而无需滚动
  • 风格独特且具有设计意图
  • 动画有意义,而非嘈杂
  • 尊重减弱动态设置
  • 在交付时解释了文件路径和自定义点

© 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 1 other file in skills/frontend-slides of xu-xiang/everything-claude-code-zh.

  • SKILL.md
  • STYLE_PRESETS.md

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—~919Automated 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 25 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 转换为网页版,或为演讲/路演创建幻灯片时使用。帮助非设计师通过视觉探索而非抽象选择来发现他们的审美。. 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 (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 (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 contains no URLs. Any network use would come from the scripts or tools the agent runs. 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 919 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.