skills.rest
thensls
thenslsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

frontend-slides

Convert PowerPoint files into single-file HTML presentations with viewport-safe animations.

6|Updated Mar 26, 2026
Search Tags:#branding#html#presentation#pptx#slides#responsive#viewport-fitting
One-click install
npx skills add https://github.com/thensls/nsls-builder-toolkit --skill frontend-slides-thensls
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-slides
Source: https://github.com/thensls/nsls-builder-toolkit/tree/main/skills/frontend-slides
Command: npx skills add https://github.com/thensls/nsls-builder-toolkit --skill frontend-slides-thensls

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill converts slide content and PowerPoint files into single-file, zero-dependency HTML presentations with animation and strict viewport-fitting rules, removing manual design, conversion, and layout troubleshooting.

Core Features & Use Cases

  • Zero-dependency output: Generates self-contained HTML files with inline CSS and JS ready to open in any browser.
  • PPTX extraction: Extracts text and images from PowerPoint files and maps them into HTML slides and an assets folder.
  • Branding & presets: Built-in NSLS and Society brand tokens plus a guided style-discovery flow that creates three preview slides for selection.
  • Viewport safety & responsive rules: Enforces 100vh/100dvh slide heights, overflow: hidden, clamp()-based typography, and height-based breakpoints to avoid any in-slide scrolling.
  • Interaction & accessibility: Keyboard/touch navigation, Intersection Observer for reveal animations, reduced-motion support, and clear code comments for maintainability. Use case example: Convert a 15-slide investor pitch into an NSLS-branded, accessible HTML presentation that fits desktop, tablet, and phone viewports.

Quick Start

Convert my PPTX into an NSLS-branded, viewport-safe HTML presentation with animated reveals.

Frequently Asked Questions about frontend-slides

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

FAQPage Schema
How do I convert a PowerPoint presentation to HTML without scrolling issues?▼

To convert PowerPoint to HTML without scrolling issues, this Skill extracts text and images from your PPTX file and maps them into single-file HTML slides. It enforces 100vh/100dvh viewport heights and overflow hidden rules to prevent any in-slide scrolling across devices.

Can I generate branded HTML slides from a plain text outline?▼

Yes, you can generate branded HTML slides directly from an outline. The Skill creates new decks using built-in NSLS or Society brand tokens, and includes a guided style-discovery flow that produces three preview slides for you to select your preferred visual style.

What is the best way to make responsive HTML presentations that fit mobile and desktop viewports?▼

The best way to make responsive HTML presentations fit all viewports is by using clamp()-based typography and height-based breakpoints. This Skill automatically enforces these technical constraints alongside 100dvh slide heights to ensure your deck scales correctly without scrolling.

Do I need any external libraries or dependencies to run my HTML slides?▼

No, you do not need any external libraries or dependencies to run your HTML slides. The Skill generates zero-dependency, self-contained HTML files with all CSS and JavaScript inlined, so presentations are ready to open and present in any standard web browser.

Does the generated HTML presentation support keyboard navigation and accessibility?▼

Yes, the generated HTML presentation supports keyboard and touch navigation for user interaction. It also utilizes Intersection Observer for reveal animations, includes reduced-motion support for accessibility, and contains clear code comments for long-term maintainability.

Why does my converted PowerPoint slide require layout adjustments for different screens?▼

Converted PowerPoint slides require layout adjustments because fixed PPTX dimensions do not translate fluidly to varying browser sizes. This Skill resolves this by applying responsive rules, clamp() typography, and height-based breakpoints to adapt the extracted content automatically.

Related Skills

Explore More Design & Creative Skills→
claude-office-skillsclaude-office-skills
368

md-slides

Generate presentations from Markdown files using Marp and export to PDF, PPTX, or HTML.

Official
Intermediate
adobe-summit2026-l613adobe-summit2026-l613

generate-import-html

Convert authoring analysis into structured HTML export for AEM Edge Delivery.

Official
Intermediate
het8802het8802
3

hyperframes

Automate HTML-based video composition with GSAP animations and synchronized text and audio.

Community
Advanced
MuhammadUAMuhammadUA

presentations

Create, validate, and export 1920x1080 HTML slide decks to PDF and PPTX.

Community
Intermediate