presentation-styling

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

Updated May 22, 2026
One-click install
npx skills add https://github.com/shekerkamma/peopletech-marketplace --skill presentation-styling-shekerkamma
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: presentation-styling
Source: https://github.com/shekerkamma/peopletech-marketplace/tree/main/plugins/presentation-suite/skills/presentation/presentation-styling
Command: npx skills add https://github.com/shekerkamma/peopletech-marketplace --skill presentation-styling-shekerkamma

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill eliminates the need to write custom CSS and HTML patterns from scratch when building web-based presentation slides, ensuring consistent visual design across all slides without repetitive manual work.

Core Features & Use Cases

  • Pre-built CSS Component Classes: Includes layout classes (two-col, info-grid), content block classes (trigger-box, code-block, warning-box), list classes, and tag/badge classes for common slide elements.
  • Syntax Highlighting Patterns: Pre-defined span classes for coloring comments, keys, strings, and commands inside code blocks.
  • Slide Type Templates: Ready-to-use HTML patterns for common slide layouts like good vs bad comparison slides, code example slides, and icon list slides.
  • Use Case: When building a product update presentation, use the two-col layout to compare old and new features, apply the code-block styling to highlight implementation snippets, and use the weight badge auto-injection to mark high-priority slides without manual HTML edits.

Quick Start

Use the presentation-styling skill to apply consistent CSS classes and pre-built slide patterns when creating your next presentation deck.

Frequently Asked Questions about presentation-styling

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

FAQPage Schema
How do I style web-based presentation slides without writing custom CSS?

You can style web-based presentation slides using pre-built CSS component classes and HTML patterns to eliminate inconsistent styling and redundant custom CSS work. These standardized classes cover common layout, content block, and list elements for product, engineering, and marketing slides.

What is the best way to add syntax highlighting to code example slides?

The best way to add syntax highlighting to code example slides is using pre-defined span classes for coloring comments, keys, strings, and commands inside code blocks. This ensures consistent visual design for code snippets without manual HTML manipulation.

Can I use pre-built HTML patterns for comparison slides and icon lists?

Yes, you can use ready-made HTML patterns for common presentation layouts like good vs bad comparison slides, code example slides, and icon list slides. These templates provide standardized CSS classes for two-column layouts and info-grids.

How do I create weighted presentation slides with priority badges?

You can create weighted presentation slides using automated weight badge injection. This feature marks high-priority slides automatically without requiring manual HTML edits or custom CSS styling.

Does this CSS styling approach work for product update presentations?

Yes, this CSS styling approach works for product update presentations by providing layout classes to compare old and new features, code-block styling for implementation snippets, and trigger-box or warning-box classes for highlighting product changes.