Guide · Agent skill

How to use the Presentation Styling Reference agent skill

Updated 2026-10-29 · written with AI from the project's own documentation and checked against our catalogue data

The presentation-styling skill is a reference sheet for an AI agent working on one slide deck: the presentation/index.html file in the shanraisshan/claude-code-best-practice repository. After you install it, the agent knows the names of that deck's CSS layout classes, content boxes, badges and code-highlighting colours, so new or edited slides look like the rest of the deck. This guide explains what the skill does, how to install it, how to ask for it and where it does not apply.

Presentation Styling Referenceshanraisshan/claude-code-best-practice · MIT Download the skill

Quick start

1Download the ZIP. Get the skill ZIP from our page and unzip it. You should see a folder containing SKILL.md.
2Choose where to install it. Use ~/.claude/skills/ for all your projects, or .claude/skills/ inside one project. In the Claude apps, upload it under Settings, then Capabilities, then Skills.
3Open the presentation project. Work in the claude-code-best-practice repository so the agent has presentation/index.html in view.
4Ask for a styled change. Describe the slide and the outcome you want, for example a new slide matching the existing two-column layout.
5Check the result in a browser. Open the deck and confirm the new slide uses the expected boxes, badges and code colours before you commit.

What does the presentation-styling skill make the agent do?

An agent skill is a folder with a SKILL.md file that gives an AI agent extra written knowledge it can draw on for a task. This skill covers CSS classes and HTML patterns used in presentation/index.html. It lists the layout classes (such as .two-col and .info-grid), content blocks (.trigger-box, .how-to-trigger, .warning-box, .code-block), lists, tags and badges, and the colours used for syntax highlighting inside code blocks.

The skill contains only written guidance and example HTML. It does not run anything, so its effect is limited to what the agent writes into the slide file.

Install the skill from the ZIP download

Download the ZIP of the skill from our page and unzip it. To make it available to Claude Code for all of your projects, place the unzipped folder in ~/.claude/skills/. To make it available only inside one project, place it in that project's .claude/skills/ folder.

If you use the Claude apps instead, upload the skill under Settings, then Capabilities, then Skills.

Personal install: ~/.claude/skills/
Project install: .claude/skills/ inside the project
Claude apps: Settings → Capabilities → Skills

How do you trigger the skill with natural requests?

The skill's description is 'Knowledge about CSS classes, component patterns, and syntax highlighting in the presentation'. Ask for work that touches those topics, and name the deck so the agent knows which file you mean. The skill is most useful when you want a new slide to match existing styles.

The source does not list specific trigger phrases, so describe the task in plain language rather than expecting a fixed keyword.

Add a slide to presentation/index.html that compares a bad and a good example using the existing two-column style.
Make this code sample in the presentation use the same highlighting colours as the other code blocks.
Which box class should I use for a warning in the presentation?
Update the info cards on the tools slide so they match the others.

Examples of slide patterns the skill documents

The skill includes a two-column Good vs Bad slide, built from a .two-col grid with a .col-card.bad card and a .col-card.good card. It also shows a content slide with a .trigger-box and a .code-block, and an icon list built from .use-cases and .use-case-item.

Weight badges are handled by the presentation JavaScript. The skill tells the agent not to hardcode a weight-badge span in slide HTML, because the script injects and removes these badges automatically.

<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>
        </div>
        <div class="col-card good">
            <h4>After (Agentic)</h4>
        </div>
    </div>
</div>

How are code blocks coloured in the deck?

Inside a .code-block, the skill tells the agent to wrap parts of the text in spans. .comment is green (#6a9955), .key is blue (#9cdcfe), .string is orange (#ce9178) and .cmd is yellow (#dcdcaa). Use these spans to keep new code samples consistent with existing ones.

.comment: green (#6a9955)
.key: blue (#9cdcfe)
.string: orange (#ce9178)
.cmd: yellow (#dcdcaa)

<div class="code-block"><span class="comment"># Example</span>
<span class="key">field</span>: <span class="string">value</span></div>

What the skill needs, and safety notes

The skill lists no requirements. It does not run scripts and does not use the network. Its only file is SKILL.md, so installing it adds reference text and nothing executable.

Because it describes classes that exist only in one file, check the agent's edits in your browser before committing them.

Requires: nothing listed
Runs scripts: no
Uses network: no
Files: SKILL.md

Tips for getting good results

Point the agent at presentation/index.html by name and say which slide number or title you are changing. The skill includes a data-slide attribute in its examples, so mention the slide number if you have it.

Ask the agent to reuse a pattern from the skill rather than inventing new CSS. If a class you need is not in the reference, the agent may not know it, so check the existing HTML first.

Name the file and the slide you want changed.
Ask for an existing pattern, such as the two-column good/bad layout.
Review the rendered slide, since the skill cannot test how it looks.

What people use it for

Adding a Good vs Bad comparison slide that matches the existing two-column style.
Writing a new code sample with the deck's comment, key, string and command colours.
Adding a warning or prerequisite box that uses the correct existing class.
Editing an info-card grid so new cards line up with the others.

Frequently asked questions

How do I install the presentation-styling skill?

Download the ZIP from our page and unzip it. Put the folder in ~/.claude/skills/ for all projects, or in a project's .claude/skills/ folder for one project. In the Claude apps, upload it under Settings, then Capabilities, then Skills.

What does the presentation-styling skill need to run?

The source lists no requirements. The skill does not run scripts and does not use the network, and it contains only SKILL.md.

Is the presentation-styling skill free to use?

The skill is published under the MIT licence, as stated on its page. Check the repository's licence file for the full terms.

Can I use this skill to make slides in PowerPoint or Google Slides?

No. The skill only documents CSS classes in the presentation/index.html file of one repository, so it has no effect on PowerPoint or Google Slides.

Will this skill work for a presentation I build from scratch?

Not usefully. The classes only exist in the claude-code-best-practice project's index.html, so a different deck would not have them.

Why doesn't the agent use the skill when I ask for slide changes?

The source does not describe specific trigger phrases. Name the deck file and describe the styling task in plain terms, and check that the skill is installed in the location you chose.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Use this skill if you contribute to the claude-code-best-practice presentation and want the agent to match the existing slide styles, or if you want an example of a skill that documents a project's CSS conventions. Pick something else for general web design, for building a presentation from scratch, or for producing slides in PowerPoint or Google Slides.

Download the skill