skills.rest
pekral
pekralCOMMUNITY
Explore all skills by this author →
Website𝕏@kral_petr_88GitHub

frontend-slides

Generate self-contained HTML presentation decks with vanilla CSS and JavaScript.

Updated Jan 6, 2023
Search Tags:#html#accessibility#frontend#css#presentation#slides
One-click install
npx skills add https://github.com/pekral/phpstan-rules --skill frontend-slides-pekral
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-slides
Source: https://github.com/pekral/phpstan-rules/tree/main/.claude/skills/frontend-slides
Command: npx skills add https://github.com/pekral/phpstan-rules --skill frontend-slides-pekral

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill eliminates the need for heavy presentation software or complex build tools by providing a lightweight, single-file solution for creating professional slide decks that work in any browser.

Core Features & Use Cases

  • Zero-Dependency Architecture: Produces a single HTML file containing all necessary CSS and JavaScript, requiring no external assets or build steps.
  • Viewport-Optimized Layout: Uses CSS clamp functions to ensure content perfectly fits any screen size without scrolling.
  • Use Case: Ideal for developers or speakers who need to build a talk, workshop, or pitch deck that is portable, accessible, and easily exportable to PDF via the browser.

Quick Start

Use the frontend-slides skill to generate a new presentation deck with five slides based on the provided outline.

Frequently Asked Questions about frontend-slides

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

FAQPage Schema
How do I create an HTML presentation deck without external dependencies?▼

You create self-contained HTML slide decks using vanilla CSS and JavaScript, producing a single portable file with viewport-responsive layouts, keyboard navigation, and browser-native PDF export without external assets.

Can I export my HTML slides to PDF directly from the browser?▼

Yes, you can export HTML slides to PDF directly from the browser. The deck uses semantic HTML structure and media-query-based styling to ensure print-readiness, allowing native browser PDF export without additional tools.

What is the best way to make a portable slide deck for a developer workshop?▼

The best way to make a portable slide deck is generating a zero-dependency single HTML file. This approach uses CSS clamp functions for viewport-optimized layout, ensuring content fits any screen size without scrolling or requiring complex build tools.

Does a vanilla CSS and JavaScript slide deck support accessibility features?▼

Yes, a vanilla CSS and JavaScript slide deck supports accessibility features. It ensures accessibility through semantic HTML structure and media-query-based styling, making the presentation navigable and readable for assistive technologies.

How do I ensure my HTML presentation content fits different screen sizes without scrolling?▼

To ensure HTML presentation content fits different screen sizes without scrolling, use CSS clamp functions for viewport-optimized layouts. This technique scales content dynamically to perfectly fit any viewport without requiring manual adjustments.

Do I need a build tool or framework to generate a self-contained HTML slide deck?▼

No, you do not need a build tool or framework. The process produces a single HTML file containing all necessary vanilla CSS and JavaScript, eliminating the need for heavy presentation software, complex build steps, or external assets.

Related Skills

Explore More Design & Creative Skills→
wentoraiwentorai
850

kai-slide-creator

Generate self-contained HTML slide presentations from a topic or outline.

Community
Intermediate
AntonySilverhandAntonySilverhand

slide-export-tips

Export BPDU HTML slide decks to paginated PDF files.

Community
Basic
Luqman-Ud-DinLuqman-Ud-Din

qa-detect-breakpoint-edge

Detect responsive layout bugs at CSS breakpoint boundaries by comparing snapshots.

Community
Advanced
linhlvitlinhlvit

slide-deck-builder

Generate self-contained interactive HTML slide decks with a dark theme.

Community
Intermediate