Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

Frontend Slides · xu-xiang | DecimalAI

design mediaby xu-xiang

Frontend Slides

xu-xiang/frontend-slides

Source xu-xiang/everything-claude-code-zh ↗License MIT

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

SkillScore82Maintained

Automatic

Frontend / UI pack

Last verified 8/12/2026

What it changes

Passed 18 of 22 test cases with the skill, and 14 of 22 without it.

Without skill64%

With skill82%

Checks it passed that the model alone missed

Limits code snippets to 8-10 lines per slide.
Restricts bullet points to 4-6 per content slide.
Limits feature grid cards to a maximum of 6 per slide.

and 2 more in the full report

4 fixed14 passed either way4 still failing0 broke

Pass-rate lift: +18 pp
Tokens: +57%
Agent turns: 0%
Response time: -4%

Model gemini-3.6-flashMeasured 8/12/2026v418 of 22 cases passed with skill

Tokens, turns and time describe resource use, not a dollar price.

Use this skill

Save it into your project's skills folder. Claude Code picks it up in its next session.

curl -fsSL --create-dirs -o .claude/skills/xu-xiang-frontend-slides/SKILL.md https://app.decimal.ai/s/xu-xiang-frontend-slides/SKILL.md

Want it pinned and updatable? pip install "decimalai>=0.15", then decimalai skills add xu-xiang-frontend-slides, and start Claude Code with claude --plugin-dir "$(git rev-parse --show-toplevel)/.agents"

1 · One-time — install the CLI (docs ↗)

pip install "decimalai>=0.15"

2 · Get the skill — writes .agents/skills/xu-xiang-frontend-slides/ and pins it in .decimal/skills.lock

decimalai skills add xu-xiang-frontend-slides

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/xu-xiang-frontend-slides/SKILL.md https://app.decimal.ai/s/xu-xiang-frontend-slides/SKILL.md

Raw file: /s/xu-xiang-frontend-slides/SKILL.md ↗ · machine-readable summary at /s/xu-xiang-frontend-slides.json ↗

Safety checks: 3 of 3 passed

Code scan CleanIntent PassedContent Clean

See it in action

One of 4 test cases the skill fixed. Same model, same prompt, with and without the skill.

1 of 4

Prompt

我准备在“市场竞争优势”页面放 10 条详细要点文案，请按幻灯片内容密度最佳实践重新编排内容结构。

What was checked, without and with the skill
Checked	Without skill	With skill
Restricts bullet points to 4-6 per content slide.	Missed	Passed

case-15 · gemini-3.6-flash · 8/12/2026 · answers are capped and redacted

What's inside

The instructions your model reads when the skill loads.

SKILL.md189 linessingle file

前端幻灯片

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

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

何时启用

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

不可妥协的原则

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

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

工作流程

1. 检测模式

选择一条路径：

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

2. 发现内容

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

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

Track record

Benchmark

18 / 22

test cases passed, vs 14 / 22 without

Adoption

Users: 0
Times used: 0

Safety and source details

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 8/3/2026

View 15 scanner checks

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

xu-xiang / everything-claude-code-zh

skills/frontend-slides/SKILL.md

View on GitHub ↗

License MITImported 8/3/2026Version v4

Other skills for the same job

Published skills whose descriptions closely match this one, with their headline benchmark lift.

More skills from the same source and nearby in the registry, with their headline benchmark lift.