Skip to content
Get packs

Presentation Styling Reference

Gives the agent the CSS classes and HTML patterns for building slides in one specific presentation.

Source Download skill
Repository
shanraisshan/claude-code-best-practice
Stars
68,452
Licence
MIT
Files
1 file

What it does

This skill is a reference sheet for an AI agent working on one particular slide deck, the presentation/index.html file in the claude-code-best-practice repository. Once installed, the agent knows the names of the project's CSS layout classes, content boxes, badges, and code-highlighting colours, so it can add or edit slides that look consistent with the rest of the deck. It contains only written guidance and example HTML; it does not run anything.

Great for

  • Contributors editing the claude-code-best-practice presentation who want the agent to match existing slide styles
  • Developers who want an example of how a skill can document a project's CSS conventions

Skip it if

  • General web design or building a presentation from scratch, since the classes only exist in this one project's index.html
  • Anyone expecting it to produce slides with a standard tool such as PowerPoint or Google Slides, because it has no effect outside this HTML file

Try asking

  • “Add a new slide with a good-versus-bad two-column comparison using the project's card classes”
  • “Add a code block to this slide that highlights keys, strings and comments in the house colours”
  • “Add a warning box and a 'Try This' action box to the setup slide”
Step-by-step guide: how to use Presentation Styling ReferenceInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 1 original files, the MIT licence and an attribution note.

    presentation-styling.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip presentation-styling.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip presentation-styling.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Use it only inside a checkout of the repository where presentation/index.html exists, otherwise the class names have no meaning.
  • Ask the agent to check the existing slides for similar patterns before adding new ones, since the skill only lists the classes and not every slide's content.
  • Review the generated HTML in a browser, because the skill does not test that slides render correctly.

What's inside

  • SKILL.md

Redistributed unmodified from shanraisshan/claude-code-best-practice under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.