Agent skill

Frontend Slides

by affaan-m in affaan-m/ECC

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

MITAuto-check passedDocuments & Office

Install Frontend Slides

skills CLI
$ npx skills add affaan-m/ECC --skill frontend-slides -a claude-code

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

GitHub CLI
$ gh skill install affaan-m/ECC 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/affaan-m/ECC.git skills-src && mkdir -p .claude/skills && cp -r skills-src/docs/zh-CN/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
277k
Used in
3 other repos
Token cost
~787 tokens
SKILL.md length
275 words
Files
2
Skills in repo
683
Repo updated
First seen
Licence
MIT

At a glance

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

  • Works in 7 steps: 检测模式 → 发现内容 → 发现风格 → …
  • Tasks that involve PowerPoint presentations
  • SKILL.md covers 何时启用, 不可妥协的原则, 工作流程 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 affaan-m/ECC. 从零开始或通过转换PowerPoint文件创建令人惊艳、动画丰富的HTML演示文稿。当用户想要构建演示文稿、将PPT/PPTX转换为网页格式,或为演讲/推介创建幻灯片时使用。帮助非设计师通过视觉探索而非抽象选择发现他们的美学。

Its SKILL.md is about 790 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: The agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond. 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. 检测模式
  2. 发现内容
  3. 发现风格
  4. 构建演示文稿
  5. 强制执行视口适配
  6. 验证
  7. 交付

What it can do on your machine

Read from SKILL.md and the folder at commit 2d515e4. 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 787 tokens when it runs. Until then it costs about 32 tokens; SKILL.md has 275 words of instructions outside code blocks.

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

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 affaan-m/ECC at commit 2d515e4, republished under its MIT licence (© affaan-m). 275 words, ~787 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
从零开始或通过转换PowerPoint文件创建令人惊艳、动画丰富的HTML演示文稿。当用户想要构建演示文稿、将PPT/PPTX转换为网页格式,或为演讲/推介创建幻灯片时使用。帮助非设计师通过视觉探索而非抽象选择发现他们的美学。
origin
ECC

前端幻灯片

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

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

何时启用

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

不可妥协的原则

  1. 零依赖:默认使用一个包含内联 CSS 和 JS 的自包含 HTML 文件。
  2. 必须适配视口:每张幻灯片必须适配一个视口,内部不允许滚动。
  3. 展示,而非描述:使用视觉预览,而非抽象的风格问卷。
  4. 独特设计:避免通用的紫色渐变、白色背景加 Inter 字体、模板化的文稿外观。
  5. 生产质量:保持代码注释清晰、可访问、响应式且性能良好。

在生成之前,请阅读 STYLE_PRESETS.md 以了解视口安全的 CSS 基础、密度限制、预设目录和 CSS 陷阱。

工作流程

1. 检测模式

选择一条路径:

  • 新演示文稿:用户有主题、笔记或完整草稿
  • PPT 转换:用户有 .ppt 或 .pptx
  • 增强:用户已有 HTML 幻灯片并希望改进
2. 发现内容

只询问最低限度的必要信息:

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

如果用户有内容,请他们在进行样式设计前粘贴内容。

3. 发现风格

默认采用视觉探索方式。

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

否则:

  1. 询问文稿应营造何种感觉:印象深刻、充满活力、专注、激发灵感。
  2. 在 .ecc-design/slide-previews/ 中生成 3 个单幻灯片预览文件。
  3. 每个预览必须是自包含的,清晰地展示排版/色彩/动效,并且幻灯片内容大约保持在 100 行以内。
  4. 询问用户保留哪个预览或混合哪些元素。

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

4. 构建演示文稿

输出以下之一:

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

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

必需的结构:

  • 语义化的幻灯片部分
  • 来自 STYLE_PRESETS.md 的视口安全的 CSS 基础
  • 用于主题值的 CSS 自定义属性
  • 用于键盘、滚轮和触摸导航的演示文稿控制器类
  • 用于揭示动画的 Intersection Observer
  • 支持减少动效
5. 强制执行视口适配

将此视为硬性规定。

规则:

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

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

6. 验证

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

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

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

7. 交付

在交付时:

  • 除非用户希望保留,否则删除临时预览文件
  • 在有用时使用适合当前平台的开源工具打开文稿
  • 总结文件路径、使用的预设、幻灯片数量以及简单的主题自定义点

为当前操作系统使用正确的开源工具:

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

PPT / PPTX 转换

对于 PowerPoint 转换:

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

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

实现要求

HTML / CSS
  • 除非用户明确希望使用多文件项目,否则使用内联 CSS 和 JS。
  • 字体可以来自 Google Fonts 或 Fontshare。
  • 优先使用氛围背景、强烈的字体层次结构和清晰的视觉方向。
  • 使用抽象形状、渐变、网格、噪点和几何图形,而非插图。
JavaScript

包含:

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

内容密度限制

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

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

反模式

  • 没有视觉标识的通用初创公司渐变
  • 除非是特意采用编辑风格,否则避免系统字体文稿
  • 冗长的要点列表
  • 需要滚动的代码块
  • 在短屏幕上会损坏的固定高度内容框
  • 无效的否定 CSS 函数,如 -clamp(...)

相关 ECC 技能

  • frontend-patterns 用于围绕文稿的组件和交互模式
  • liquid-glass-design 当演示文稿有意借鉴苹果玻璃美学时
  • e2e-testing 如果您需要为最终文稿进行自动化浏览器验证

交付清单

  • 演示文稿可在浏览器中从本地文件运行
  • 每张幻灯片适配视口,无需滚动
  • 风格独特且有意图
  • 动画有意义,不喧闹
  • 尊重减少动效设置
  • 在交付时解释文件路径和自定义点

© affaan-m, 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 docs/zh-CN/skills/frontend-slides of affaan-m/ECC.

  • SKILL.md
  • STYLE_PRESETS.md

Open the folder on GitHubat commit 2d515e4

Used in 3 other repositories

We found 3 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 3 other GitHub owners. This page covers the copy in affaan-m/ECC, which our catalogue first saw on October 7, 2026.

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 skillaffaan-m/ECC277k3 repos~787Automated 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 affaan-m/ECC

All 682 skills in this repo
  • Skill Stocktake

    affaan-m/ECC

    Audits your installed Claude skills and commands for quality, with a quick mode for recently changed skills and a full mode that evaluates all of them through subagents.

    277k GitHub starsUsed in 5 repos~3.1k tokens
    Auto-check passed
  • Ingests, indexes, searches, edits and monitors video, audio and live streams through the VideoDB Python SDK, returning stream links, clips and timestamps.

    277k GitHub starsUsed in 3 repos~3.5k tokens
    Auto-check: notes
  • Docs Governance

    affaan-m/ECC

    Route broad documentation-governance requests to existing ECC skills and run an opt-in, read-only audit of mapped documentation roles, links, ADR indexes, and evidence references.

    277k GitHub stars~1.1k tokensUpdated today
    Auto-check passed
  • Rules Distillation

    affaan-m/ECC

    Scans installed skills for principles that recur across them and proposes rule-file changes: append, revise, add a section, create a file or leave as covered.

    277k GitHub starsUsed in 2 repos~2.3k tokens
    Auto-check passed
  • Builds DRAFT counterparty agreements from one markdown template and a small JSON spec per party, with clauses picked by the party's role.

    277k GitHub stars~2.9k tokensUpdated today
    Auto-check passed
  • Set an ECC-specific frontend design direction for production UI work.

    277k GitHub starsUsed in 1 repo~2.2k tokens
    Auto-check passed

Questions about Frontend Slides

What does Frontend Slides do?

从零开始或通过转换PowerPoint文件创建令人惊艳、动画丰富的HTML演示文稿。当用户想要构建演示文稿、将PPT/PPTX转换为网页格式,或为演讲/推介创建幻灯片时使用。帮助非设计师通过视觉探索而非抽象选择发现他们的美学。. Frontend Slides is an agent skill from affaan-m/ECC.

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 affaan-m/ECC --skill frontend-slides -a claude-code`. Or copy the skill folder (docs/zh-CN/skills/frontend-slides in affaan-m/ECC) 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 affaan-m/ECC --skill frontend-slides -a codex`. Or copy the skill folder (docs/zh-CN/skills/frontend-slides in affaan-m/ECC) 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 affaan-m/ECC --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 787 tokens (SKILL.md is roughly 3.1k 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?

affaan-m (a GitHub user) maintains it in affaan-m/ECC, which has 276,673 GitHub stars. The repository holds 683 skills in this directory. The repository was last updated on October 11, 2026.

Source: affaan-m/ECC on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.