Agent skill

Presentation Styling

by clxzl in clxzl/claude-code-best-practice-cn

“关于演示文稿中 CSS 类、组件模式和语法高亮的知识”

— description from SKILL.md by clxzl

MITAuto-check passed

Install Presentation Styling

skills CLI

$ npx skills add clxzl/claude-code-best-practice-cn --skill presentation-styling -a claude-code

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

GitHub CLI

$ gh skill install clxzl/claude-code-best-practice-cn presentation-styling --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/clxzl/claude-code-best-practice-cn.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/presentation/presentation-styling .claude/skills/presentation-styling && 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/

Paste into Claude Code

Install the "presentation-styling" agent skill from https://github.com/clxzl/claude-code-best-practice-cn/tree/main/.claude/skills/presentation/presentation-styling into .claude/skills/presentation-styling/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "presentation-styling", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/clxzl/claude-code-best-practice-cn/tree/main/.claude/skills/presentation/presentation-styling

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add clxzl/claude-code-best-practice-cn --skill presentation-styling -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install clxzl/claude-code-best-practice-cn presentation-styling --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/clxzl/claude-code-best-practice-cn.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.claude/skills/presentation/presentation-styling .agents/skills/presentation-styling && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "presentation-styling" agent skill from https://github.com/clxzl/claude-code-best-practice-cn/tree/main/.claude/skills/presentation/presentation-styling into .agents/skills/presentation-styling/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "presentation-styling", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add clxzl/claude-code-best-practice-cn --skill presentation-styling -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install clxzl/claude-code-best-practice-cn presentation-styling --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/clxzl/claude-code-best-practice-cn.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.claude/skills/presentation/presentation-styling .cursor/skills/presentation-styling && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "presentation-styling" agent skill from https://github.com/clxzl/claude-code-best-practice-cn/tree/main/.claude/skills/presentation/presentation-styling into .cursor/skills/presentation-styling/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "presentation-styling", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/clxzl/claude-code-best-practice-cn.git --path .claude/skills/presentation/presentation-styling

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add clxzl/claude-code-best-practice-cn --skill presentation-styling -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install clxzl/claude-code-best-practice-cn presentation-styling --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/clxzl/claude-code-best-practice-cn.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.claude/skills/presentation/presentation-styling .gemini/skills/presentation-styling && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "presentation-styling" agent skill from https://github.com/clxzl/claude-code-best-practice-cn/tree/main/.claude/skills/presentation/presentation-styling into .gemini/skills/presentation-styling/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "presentation-styling", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install clxzl/claude-code-best-practice-cn presentation-styling

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add clxzl/claude-code-best-practice-cn --skill presentation-styling -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/clxzl/claude-code-best-practice-cn.git skills-src && mkdir -p .github/skills && cp -r skills-src/.claude/skills/presentation/presentation-styling .github/skills/presentation-styling && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "presentation-styling" agent skill from https://github.com/clxzl/claude-code-best-practice-cn/tree/main/.claude/skills/presentation/presentation-styling into .github/skills/presentation-styling/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "presentation-styling", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add clxzl/claude-code-best-practice-cn --skill presentation-styling -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install clxzl/claude-code-best-practice-cn presentation-styling --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/clxzl/claude-code-best-practice-cn.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.claude/skills/presentation/presentation-styling .opencode/skills/presentation-styling && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "presentation-styling" agent skill from https://github.com/clxzl/claude-code-best-practice-cn/tree/main/.claude/skills/presentation/presentation-styling into .opencode/skills/presentation-styling/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "presentation-styling", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: presentation-styling
GitHub stars: 132
Token cost: ~563 tokens
SKILL.md length: 98 words
Files: 1
Skills in repo: 8
Repo updated: May 11, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

SKILL.md covers CSS 组件类, 代码块语法高亮, 幻灯片类型模式 and 旅程进度条特定
Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

About this skill

Presentation Styling is a skill in clxzl/claude-code-best-practice-cn (132 stars). Its SKILL.md is about 563 tokens. Licence: MIT.

What it can do on your machine

Read from SKILL.md and the folder at commit d084a34. 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 (its code samples are html).
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

Presentation Styling loads about 563 tokens when it runs. Until then it costs about 12 tokens; SKILL.md has 98 words of instructions outside code blocks.

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

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 clxzl/claude-code-best-practice-cn at commit d084a34, republished under its MIT licence (© clxzl). 98 words, ~563 tokens.

Download SKILL.mdSave it as .claude/skills/presentation-styling/SKILL.md (or your agent's skills folder).

name: presentation-styling
description: 关于演示文稿中 CSS 类、组件模式和语法高亮的知识

演示文稿样式 Skill

presentation/index.html 中使用的 CSS 类和 HTML 模式。

CSS 组件类

布局

.two-col — 2 列网格布局，间距 24px
.info-grid — 信息卡片的 2 列网格
.col-card — 列中的卡片（添加 .good 为绿色边框，.bad 为红色边框）
.info-card — 信息网格中的卡片

内容块

.trigger-box — 灰色盒子带深色左边框（用于关键概念、前置条件）
.how-to-trigger — 绿色盒子带绿色边框（用于"尝试此操作"动作）
.warning-box — 橙色盒子带警告边框（用于重要警告）
.code-block — 深色代码显示块，使用等宽字体

列表

.use-cases — 图标+文本列表项的容器
.use-case-item — 带图标和文本的单个项目
.feature-list — 简单的带边框列表

标签和徽章

.matcher-tag — 灰色内联药丸标签
.weight-badge — 绿色药丸徽章（由 JS 为带权重的幻灯片自动注入）

代码块语法高亮

在 .code-block 内，使用以下 span 进行语法着色：

html

<div class="code-block">
<span class="comment"># 这是一条注释</span>
<span class="key">field_name</span>: <span class="string">value</span>
<span class="cmd">&gt;</span> 要运行的命令
</div>

.comment — 绿色 (#6a9955) 用于注释
.key — 蓝色 (#9cdcfe) 用于属性名/键名
.string — 橙色 (#ce9178) 用于字符串值
.cmd — 黄色 (#dcdcaa) 用于命令/提示符

幻灯片类型模式

带双栏的内容幻灯片（好与坏对比）

html

<div class="slide" data-slide="N" data-weight="5">
    <h1>Title</h1>
    <div class="two-col">
        <div class="col-card bad">
            <h4>Before (Vibe Coding)</h4>
            <!-- bad example -->
        </div>
        <div class="col-card good">
            <h4>After (Agentic)</h4>
            <!-- good example -->
        </div>
    </div>
</div>

不要在幻灯片 HTML 中硬编码 <span class="weight-badge">。演示文稿 JavaScript 会自动注入和移除权重徽章。

带代码示例的内容幻灯片

html

<div class="slide" data-slide="N">
    <h1>Title</h1>
    <div class="trigger-box">
        <h4>Key Concept</h4>
        <p>Description</p>
    </div>
    <div class="code-block"><span class="comment"># Example</span>
<span class="key">field</span>: <span class="string">value</span></div>
</div>

图标列表模式

html

<div class="use-cases">
    <div class="use-case-item">
        <span class="use-case-icon">EMOJI</span>
        <div class="use-case-text">
            <strong>标题</strong>
            <span>描述文本</span>
        </div>
    </div>
</div>

旅程进度条特定

.journey-bar — 进度条下方的固定条
.journey-bar.hidden — 在标题幻灯片上隐藏
旅程进度条颜色通过 HSL 插值从红色 (0%) 过渡到绿色 (100%)
权重徽章由 JS 自动注入到带权重幻灯片的 h1 元素中

Files

Just SKILL.md in .claude/skills/presentation/presentation-styling of clxzl/claude-code-best-practice-cn.

Open the folder on GitHubat commit d084a34

Compare with similar skills

Presentation Styling 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.

Presentation Styling compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Presentation Styling this skillclxzl/claude-code-best-practice-cn	132	—	~563	Automated safety check: Pass	MIT	5 mo ago
Presentation Styling Referenceshanraisshan/claude-code-best-practice	67k	—	~780	Automated safety check: Pass	MIT	today
CSS Minificationthedaviddias/Front-End-Checklist	74k	—	~415	Automated safety check: Pass	MIT	3 days ago
CSS Orderthedaviddias/Front-End-Checklist	74k	—	~404	Automated safety check: Pass	MIT	3 days ago
Styles Lintthedaviddias/Front-End-Checklist	74k	—	~416	Automated safety check: Pass	MIT	3 days ago
Unused CSSthedaviddias/Front-End-Checklist	74k	—	~415	Automated safety check: Pass	MIT	3 days ago

Similar skills

Presentation Styling Reference
shanraisshan/claude-code-best-practice
Reference for the CSS classes, HTML slide patterns and code-block highlighting spans used in a project's presentation/index.html slide deck.
67k GitHub stars~780 tokensUpdated today
Documents & OfficeAuto-check passed
CSS Minification
thedaviddias/Front-End-Checklist
A skill your agent uses when reviewing stylesheets, component styles, and responsive behavior related to Minify all CSS files.
74k GitHub stars~415 tokensUpdated 3 days ago
Frontend & DesignAuto-check passed
CSS Order
thedaviddias/Front-End-Checklist
A skill your agent uses when reviewing stylesheets, component styles, and responsive behavior related to Order CSS files correctly.
74k GitHub stars~404 tokensUpdated 3 days ago
Frontend & DesignAuto-check passed
Styles Lint
thedaviddias/Front-End-Checklist
A skill your agent uses when reviewing stylesheets, component styles, and responsive behavior related to Lint CSS and SCSS files.
74k GitHub stars~416 tokensUpdated 3 days ago
Frontend & DesignAuto-check passed
Unused CSS
thedaviddias/Front-End-Checklist
A skill your agent uses when reviewing stylesheets, component styles, and responsive behavior related to Remove unused CSS rules.
74k GitHub stars~415 tokensUpdated 3 days ago
Frontend & DesignAuto-check passed
CSS Critical
thedaviddias/Front-End-Checklist
A skill your agent uses when reviewing stylesheets, component styles, and responsive behavior related to Inline critical CSS for faster rendering.
74k GitHub stars~441 tokensUpdated 3 days ago
Frontend & DesignAuto-check passed

Questions about Presentation Styling

How do I install Presentation Styling in Claude Code?

Run `npx skills add clxzl/claude-code-best-practice-cn --skill presentation-styling -a claude-code`. Or copy the skill folder (.claude/skills/presentation/presentation-styling in clxzl/claude-code-best-practice-cn) into .claude/skills/presentation-styling in your project. Claude Code loads it when a task matches its description.

How do I install Presentation Styling in Codex?

Run `npx skills add clxzl/claude-code-best-practice-cn --skill presentation-styling -a codex`. Or copy the skill folder (.claude/skills/presentation/presentation-styling in clxzl/claude-code-best-practice-cn) into .agents/skills/presentation-styling in your project. Codex loads it when a task matches its description.

Can I use Presentation Styling 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 clxzl/claude-code-best-practice-cn --skill presentation-styling -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/presentation-styling, .gemini/skills/presentation-styling, .github/skills/presentation-styling and .opencode/skills/presentation-styling in your project.

What does Presentation Styling need to run?

SKILL.md names no scripts, command-line tools or credentials: Presentation Styling is instructions for the agent only.

Does Presentation Styling 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 Presentation Styling 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 Presentation Styling use?

Presentation Styling 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 Presentation Styling use?

About 563 tokens (SKILL.md is roughly 2.3k 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 Presentation Styling?

Skills that share tags, products or a category with Presentation Styling: Presentation Styling Reference (shanraisshan/claude-code-best-practice, 67k stars), CSS Minification (thedaviddias/Front-End-Checklist, 74k stars), CSS Order (thedaviddias/Front-End-Checklist, 74k stars) and Styles Lint (thedaviddias/Front-End-Checklist, 74k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Presentation Styling?

clxzl (a GitHub user) maintains it in clxzl/claude-code-best-practice-cn, which has 132 GitHub stars. The repository holds 8 skills in this directory. The repository was last updated on May 11, 2026.

Source: clxzl/claude-code-best-practice-cn on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Presentation Styling

Facts

At a glance

About this skill

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

演示文稿样式 Skill

CSS 组件类

布局

内容块

列表

标签和徽章

代码块语法高亮

幻灯片类型模式

带双栏的内容幻灯片（好与坏对比）

带代码示例的内容幻灯片

图标列表模式

旅程进度条特定

Files

Compare with similar skills

Similar skills

More from clxzl/claude-code-best-practice-cn

Questions about Presentation Styling