AI Skill MartBrowse skillsPromptsProgramsLearnWhat is a Skill?
 
← Back to list

Presentation Styling

A reference of CSS component classes and HTML slide patterns for a single-file HTML presentation deck.

Design & UIIntermediate★ 68,873⑂ 6,858AI score 6/10Last updated: Nov 9, 2026

What it does

  • Catalogs the CSS component classes used in presentation/index.html: layout grids, content boxes, lists, and tag/badge pills.
  • Documents syntax-highlighting spans inside .code-block (.comment, .key, .string, .cmd) with their exact colors.
  • Supplies copy-paste HTML templates for common slide types: two-column good/bad comparison, code-example slide, and icon list.
  • States key rules such as never hardcoding weight-badge because the deck's JavaScript injects it automatically.

Who it's for

  • Maintainers adding or editing slides in this repo's HTML presentation (with progress and journey bars).
  • Anyone who wants Claude Code to emit slide markup with consistent class naming.
  • Developers building a similar single-file HTML deck who want proven patterns to borrow.

Examples

  1. "Add a Before/After comparison slide" → produces .two-col with .col-card bad and .col-card good.
  2. "Make a slide showing a config example" → uses .trigger-box for the concept plus a colored .code-block.
  3. "Insert a list of use cases with icons" → emits the .use-cases / .use-case-item structure.

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/shanraisshan/claude-code-best-practice/HEAD/.claude/skills/presentation/presentation-styling/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on AI Skill Mart.
Copy the .claude/skills/presentation/presentation-styling folder from the GitHub repo shanraisshan/claude-code-best-practice into my ~/.claude/skills/presentation-styling/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/shanraisshan/claude-code-best-practice.git && mkdir -p ~/.claude/skills/presentation-styling && cp -r claude-code-best-practice/.claude/skills/presentation/presentation-styling/* ~/.claude/skills/presentation-styling/

⚠ This is a third-party skill. Check the source repository before installing.

  1. Open a terminal.
  2. Clone the repository: git clone https://github.com/shanraisshan/claude-code-best-practice.git
  3. Create the skill folder: mkdir -p ~/.claude/skills/presentation-styling
  4. Copy the skill files: cp -r claude-code-best-practice/.claude/skills/presentation/presentation-styling/* ~/.claude/skills/presentation-styling/
  5. Restart Claude Code and run /skills to confirm it is listed.
  6. Work inside the repo (or keep its presentation/index.html open) and ask things like "add a new slide about X".
View source on GitHub ↗License: MIT