shanraisshan/claude-code-best-practice0°

presentation-styling

仓库创建 2025年10月31日最近提交 3 小时前SkillHot 收录 20 天前

▸ 精选理由

便于生成或修改内容时保持与现有样式一致。

这个 Skill 做什么

列出 presentation/index.html 中使用的 CSS 类与组件样式规范。

列出 presentation/index.html 里用到的 CSS 类和组件模式，说明各类的布局和样式用法（比如 .two-col、.info-grid、.col-card 及 .good/.bad 修饰）。在你要改样式、复用组件或保持页面一致性时很有用。优点是把散落的样式规则整理成可复用的组件清单，方便前端维护。

▸ 展开 SKILL.md 英文原文

Knowledge about CSS classes, component patterns, and syntax highlighting in the presentation

Skill 开发管理样式CSS演示主题通用

6.4w

Stars

6.3k

Forks

仓库内 Skill

+1.4k

7 日增星

安装 / 使用

给你的 Agent 一句话（通用）

帮我安装这个 skill：https://raw.githubusercontent.com/shanraisshan/claude-code-best-practice/main/.claude/skills/presentation/presentation-styling/SKILL.md

或 curl 直取 SKILL.md

curl -fsSL "https://raw.githubusercontent.com/shanraisshan/claude-code-best-practice/main/.claude/skills/presentation/presentation-styling/SKILL.md"

SKILL.MD 节选查看完整文件 ↗

# Presentation Styling Skill

CSS classes and HTML patterns used in `presentation/index.html`.

## CSS Component Classes

### Layout

- `.two-col` — 2-column grid layout with 24px gap
- `.info-grid` — 2-column grid for info cards
- `.col-card` — Card inside a column (add `.good` for green border, `.bad` for red border)
- `.info-card` — Card in an info grid

### Content Blocks

- `.trigger-box` — Gray box with dark left border (for key concepts, prerequisites)
- `.how-to-trigger` — Green box with green border (for "Try This" actions)
- `.warning-box` — Orange box with warning border (for important warnings)
- `.code-block` — Dark code display block with monospace font

### Lists

- `.use-case

via SKILL·HOT · 数据来自 GitHub 公开信息 · 原文版权归作者所有