everything-claude-code-zh is a Chinese translation of a collection of configurations for Claude Code and other AI coding agents. It provides agents, skills, hooks, commands, rules, and MCP configurations intended to support development workflows such as memory persistence, security scanning, evaluation, and research-first work. The catalogue includes commands, skills, agents, instructions, and a plugin from this configuration set.
Borrowing it
Nothing to install: this file belongs to xu-xiang/everything-claude-code-zh. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.
curl -O https://raw.githubusercontent.com/xu-xiang/everything-claude-code-zh/main/.agents/skills/frontend-slides/SKILL.mdgit clone --depth 1 https://github.com/xu-xiang/everything-claude-code-zhWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/xu-xiang/everything-claude-code-zh/frontend-slides)<a href="https://agentmods.dev/skills/xu-xiang/everything-claude-code-zh/frontend-slides"><img src="https://agentmods.dev/badge/skills/xu-xiang/everything-claude-code-zh/frontend-slides/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/xu-xiang/everything-claude-code-zh/frontend-slides"><img src="https://agentmods.dev/badge/skills/xu-xiang/everything-claude-code-zh/frontend-slides.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00091 | $0.02048 |
| Opus 5 | $0.00046 | $0.01024 |
| Sonnet 5 | $0.00018 | $0.00410 |
| Haiku 4.5 | $0.00009 | $0.00205 |
Grade A, and why
frontend-slides scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 9d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 185 lines — stays where its author put it; the contents beside it link to each section on GitHub.
前端幻灯片（Frontend Slides）
创建零依赖（Zero-dependency）、动画丰富的 HTML 演示文稿，完全在浏览器中运行。
灵感来源于 zarazhangrui 作品中所展示的视觉探索方法。
何时激活
- 创建演讲文稿（Talk Deck）、路演文稿（Pitch Deck）、研讨会文稿或内部演示文稿
- 将
.ppt或.pptx幻灯片转换为 HTML 演示文稿 - 改进现有 HTML 演示文稿的布局、动效或排版
- 与尚不清楚设计偏好的用户一起探索演示风格
核心约束（Non-Negotiables）
- 零依赖（Zero dependencies）：默认生成单个自包含的 HTML 文件，内联 CSS 和 JS。
- 必须适配视口（Viewport fit is mandatory）：每张幻灯片必须完全填满一个视口，不得有内部滚动。
- 视觉先行（Show, don't tell）：使用视觉预览而不是抽象的风格问卷。
- 独特的设计：避免使用通用的紫色渐变、白色背景上的 Inter 字体等模板化的设计。
- 生产级质量：保持代码注释清晰、具备无障碍性（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）
默认为视觉探索。
如果用户已经知道所需的预设，跳过预览并直接使用。
否则：
- 询问文稿应营造什么感觉：震撼、活力、专注、启发。
- 在
.ecc-design/slide-previews/中生成 3 个单页预览文件。 - 每个预览必须是自包含的，清晰展示排版/颜色/动效，且幻灯片内容保持在 100 行左右。
- 询问用户保留哪个预览，或者混合哪些元素。
在将情绪映射到风格时，请参考 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）
在移交时：
- 删除临时预览文件，除非用户想要保留它们
- 在有用时，使用平台适用的命令打开文稿
- 总结文件路径、使用的预设、幻灯片数量以及简单的方案自定义点
What ships with it
2 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 9d ago First seen · 185 lines · 91 tokens per session scan A 139dbb51538c
frontend-slides is a skill published in the GitHub repository xu-xiang/everything-claude-code-zh (1,935 stars, last pushed 6mo ago), licensed MIT. It adds 91 tokens to every session and 2,048 once invoked, about $0.0005 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
p5js
Use when users request: p5.js sketches, creative coding, generative art, interactive visualizations, canvas animations, browser-based visual art, data viz, shader effects, or any p5.js project.
ui-animation
Builds, reviews, and measures UI motion, including springs, gestures, scroll effects, and curve fitting from recordings. Use when asked to "add animation", "match this easing", "reverse engineer this motion", or find animation opportunities. For action semantics use product-design; for visual layout use ui-design.
ui-design
Designs and builds React/Next/Tailwind UI and audits visual and interaction defects. Use when asked to "build a landing page", "extract our design system", "add dark mode", "make this responsive", "remove UI slop", or "audit this component". For product decisions use product-design; for browser measurements use…
scaffold-nextjs
Scaffolds a Next.js turborepo with Blode UI, icons, Ultracite, workspace hooks, and GitHub/Vercel setup. Use when asked to "create a Next.js project", "bootstrap a turborepo", or "start a new web app". For a page in an existing app use ui-design; for a CLI use scaffold-cli.
presentation-creator
Builds decks with a story spine, house visual system, setting-specific density, and speaker notes. Use when asked to "create a presentation", "write a pitch deck", or "turn this doc into slides". Defaults to Marp; use an available presentation tool for editable PowerPoint. For product UI use ui-design.
typography-audit
Audits font loading, type scales, measure, spacing, OpenType, and rendered punctuation with 78 scoped rules. Use when asked to "audit typography", "fix the fonts", or "review my type system". For a new visual direction use ui-design Direction; for general UI defects use ui-design Audit.