skills.rest
caovinhphuc
caovinhphucCOMMUNITY
Explore all skills by this author →
GitHub

presentation-styling

Define CSS classes and HTML patterns for styling presentation slides.

1|1|Updated Aug 8, 2025
Search Tags:#design#html#frontend#css#styling#presentation
One-click install
npx skills add https://github.com/caovinhphuc/mia-warehouse-management --skill presentation-styling-caovinhphuc
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: presentation-styling
Source: https://github.com/caovinhphuc/mia-warehouse-management/tree/main/.claude/skills/presentation/presentation-styling
Command: npx skills add https://github.com/caovinhphuc/mia-warehouse-management --skill presentation-styling-caovinhphuc

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a standardized way to style presentation slides, ensuring visual consistency and clear communication of content through predefined CSS classes and HTML patterns.

Core Features & Use Cases

  • CSS Class Definitions: Offers a catalog of CSS classes for layout, content blocks, lists, and tags.
  • Code Highlighting: Defines spans for syntax highlighting within code blocks.
  • Slide Structure Patterns: Illustrates common slide layouts like two-column comparisons and code examples.
  • Use Case: Quickly apply consistent styling to a presentation by referencing these classes, ensuring elements like warnings, code snippets, and comparison sections are visually distinct and easy to understand.

Quick Start

Apply the .two-col class to create a two-column layout for your slide content.

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 using CSS classes?▼

Style presentation slides by applying predefined CSS classes like `.two-col` for layouts and `.warning-box` for content blocks. This ensures visual consistency and clear communication across slide decks without writing custom styles from scratch.

What are common HTML patterns for structuring presentation slides?▼

Common HTML patterns include two-column comparison layouts and code example blocks. These structured slide designs use predefined class names to make elements visually distinct and easy to understand.

Can I add syntax highlighting to code blocks in my presentation?▼

Yes, you can define spans for syntax highlighting within code blocks. The Skill provides specific CSS class definitions to highlight code snippets directly in your presentation slides.

How do I create a two-column layout for a slide comparison?▼

Create a two-column layout by applying the `.two-col` CSS class to your slide content. This standardizes the visual structure for side-by-side comparisons and ensures layout consistency.

What is the best way to maintain visual consistency across presentation slides?▼

The best way to maintain visual consistency is to reference a standardized catalog of CSS classes for layout, lists, and content blocks. This ensures elements like warnings and code snippets remain visually distinct across all slides.

Related Skills

Explore More Design & Creative Skills→
shanraisshanshanraisshan
64.2k

presentation-styling

Provide CSS classes and HTML patterns for styling presentation slides.

Community
Basic
felix-howardfelix-howard

ck:preview

Generate visualizations and manage files with voice-activated simplicity.

Community
Intermediate
TheBushidoCollectiveTheBushidoCollective
187

tailwind-utility-classes

Compose Tailwind CSS utility classes for responsive component styling.

Official
Intermediate
shekerkammashekerkamma

presentation-styling

Apply standardized CSS classes and HTML patterns to web-based presentation slides.

Community
Basic