skills.rest
MatthieudeLaMettrie
MatthieudeLaMettrieCOMMUNITY
Explore all skills by this author →
GitHub

presentation-styling

Document CSS classes and HTML patterns for presentation slide styling.

Updated Aug 23, 2026
Search Tags:#design#html#css#styling#presentation#syntax highlighting
One-click install
npx skills add https://github.com/MatthieudeLaMettrie/claude-code-best-practice --skill presentation-styling-matthieudelamettrie
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: presentation-styling
Source: https://github.com/MatthieudeLaMettrie/claude-code-best-practice/tree/main/.claude/skills/presentation/presentation-styling
Command: npx skills add https://github.com/MatthieudeLaMettrie/claude-code-best-practice --skill presentation-styling-matthieudelamettrie

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a clear reference for CSS classes and HTML patterns used in presentation slides, ensuring consistent and professional visual styling.

Core Features & Use Cases

  • CSS Class Definitions: Details on layout, content blocks, lists, and tags.
  • Syntax Highlighting: Specific spans for coloring code examples within slides.
  • Slide Structure Patterns: Examples for common slide layouts like two-column comparisons and code examples.
  • Use Case: When creating a new slide, you can quickly look up the correct class (e.g., .two-col, .code-block) to apply the desired styling and ensure it matches the rest of the presentation.

Quick Start

Use the presentation-styling skill to find the CSS class for 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 consistent visual design?▼

Presentation slides use specific CSS classes like `.two-col` for two-column layouts and `.trigger-box` for content blocks to ensure consistent visual design. You apply these predefined classes to your HTML elements.

What CSS classes are available for two-column layouts in presentation slides?▼

The `.two-col` CSS class provides two-column layout patterns for presentation slides. It is detailed alongside other component patterns to support consistent structural and visual styling.

How do I add syntax highlighting to code examples in presentation slides?▼

Add syntax highlighting to code examples by using specific HTML spans designed for coloring code within slides. These spans are provided to ensure code blocks match the presentation's visual design.

Can I use this presentation styling skill without any external dependencies?▼

Yes, you can use this presentation styling skill without external dependencies. It operates independently to provide CSS class definitions and HTML patterns for your slide development.

What is the best way to maintain consistent HTML patterns across presentation slides?▼

The best way to maintain consistent HTML patterns is to reference predefined component classes like `.code-block` and `.trigger-box`. This skill provides a clear reference to apply the correct styling quickly.

Related Skills

Explore More Design & Creative Skills→
edisonabeledisonabel

ckm:slides

Generate strategic HTML presentations with Chart.js, design tokens, and responsive layouts.

Community
Intermediate
AICode-NexusAICode-Nexus
2

baoyu-markdown-to-html

Convert Markdown files to styled HTML with inline CSS and themes.

Official
Intermediate
yoanbernabeuyoanbernabeu
34

slidev-transitions

Configure global and per-slide transitions in Slidev using frontmatter and CSS.

Community
Basic
caovinhphuccaovinhphuc
1

presentation-styling

Define CSS classes and HTML patterns for styling presentation slides.

Community
Basic