skills.rest
shanraisshan
shanraisshanCOMMUNITY
Explore all skills by this author →
Website𝕏@shanraisshanGitHub

presentation-styling

Provide CSS classes and HTML patterns for styling presentation slides.

64.2k|6.4k|Updated Oct 31, 2025
Search Tags:#design#html#css#styling#presentation#syntax highlighting
One-click install
npx skills add https://github.com/shanraisshan/claude-code-best-practice --skill presentation-styling
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: presentation-styling
Source: https://github.com/shanraisshan/claude-code-best-practice/tree/main/.claude/skills/presentation/presentation-styling
Command: npx skills add https://github.com/shanraisshan/claude-code-best-practice --skill presentation-styling

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides pre-defined CSS classes and HTML patterns to ensure consistent and visually appealing styling across presentations, making them easier to create and maintain.

Core Features & Use Cases

  • Reusable CSS Classes: Offers a library of classes for layout, content blocks, lists, and tags.
  • Syntax Highlighting: Defines spans for coloring code blocks, improving readability.
  • Slide Structure Patterns: Provides examples for common slide layouts like two-column comparisons and code examples.
  • Use Case: Quickly apply a professional, consistent look to your presentation slides by leveraging these established styling components.

Quick Start

Apply the .two-col class to a div to create a two-column layout.

Frequently Asked Questions about presentation-styling

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I style presentation slides with CSS for a web-based framework?▼

Style presentation slides by applying pre-defined CSS classes and HTML patterns to structure layouts, content blocks, and syntax highlighting for consistent visual design across web-based slides.

What is the best way to create a two-column layout for a presentation slide?▼

Create a two-column presentation layout by applying the reusable `.two-col` CSS class to a div, providing a structured HTML pattern for side-by-side content comparisons on slides.

How do I add syntax highlighting to code blocks in a presentation?▼

Add syntax highlighting to code blocks by using defined CSS spans that color the code, improving readability and visual structure for technical presentations.

Can I use these CSS classes for styling common slide structures like lists and tags?▼

Yes, you can use a library of reusable CSS classes to style common slide structures including content blocks, lists, and tags for a consistent professional look.

Does this presentation styling approach work without external dependencies?▼

Yes, this approach relies solely on defined HTML patterns and CSS classes for slide styling, operating independently without requiring any external dependencies or component libraries.

Related Skills

Explore More Design & Creative Skills→
caovinhphuccaovinhphuc
1

presentation-styling

Define CSS classes and HTML patterns for styling presentation slides.

Community
Basic
xpert-aixpert-ai
8

report-to-google-slides

Convert HTML analytics reports into editable Google Slides decks.

Official
Advanced
legoutlegout
3

html-slides

Generate interactive reveal.js HTML presentations with animations and code highlighting.

Community
Intermediate
mattwoodcomattwoodco
3

slides

Convert markdown content into Apple-themed slides using the Marp framework.

Community
Intermediate