skills.rest
MichaelSolati
MichaelSolatiCOMMUNITY
Explore all skills by this author →
Website𝕏@MichaelSolatiGitHub

slides

Create responsive HTML presentations with Chart.js and pre-built layout patterns.

Updated Jul 22, 2025
Search Tags:#data visualization#responsive design#chart.js#layout patterns#pitch decks#html presentations#copywriting formulas
One-click install
npx skills add https://github.com/MichaelSolati/mkai --skill slides-michaelsolati
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: slides
Source: https://github.com/MichaelSolati/mkai/tree/main/profiles/ui-ux-design/skills/slides
Command: npx skills add https://github.com/MichaelSolati/mkai --skill slides-michaelsolati

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill eliminates the manual effort of building professional, responsive HTML presentations from scratch for business, marketing, and stakeholder use cases, removing the need to manually code layouts, integrate data visualizations, or structure persuasive content for different audience types.

Core Features & Use Cases

  • Pre-built Responsive Templates: Includes a complete HTML template with 16:9 aspect ratio support, responsive breakpoints for mobile, tablet, and desktop, and native Chart.js integration for embedding interactive data visualizations.
  • Strategic Content Frameworks: Provides 25 copywriting formulas tailored to specific slide types, 25 responsive layout patterns for common presentation needs, and 15 proven deck structures with emotion arcs for use cases like investor pitches, sales pitches, product demos, QBRs, and conference talks.
  • Use Case Example: If you need to create a seed funding pitch deck for venture capitalists, use this Skill to apply the YC Seed Deck structure, use PAS formula for problem slides, and embed Chart.js metrics to showcase traction.

Quick Start

Use the slides skill to create a 10-slide seed funding pitch deck with Chart.js traction metrics and persuasive copy for investor presentations.

Frequently Asked Questions about slides

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

FAQPage Schema
How do I build responsive HTML presentations with embedded data visualizations?▼

Build responsive HTML presentations by applying pre-built 16:9 layout patterns with native Chart.js integration. This provides responsive breakpoints for mobile, tablet, and desktop alongside interactive data visualizations without manually coding layouts.

What copywriting formulas should I use for pitch deck slides?▼

Pitch deck slides utilize 25 copywriting formulas tailored to specific slide types, such as the PAS formula for problem slides. These are paired with 15 proven deck structures featuring emotion arcs to optimize audience engagement for investor pitches.

Can I use Chart.js for data visualization in 16:9 business presentations?▼

Yes, Chart.js is natively integrated into the 16:9 HTML presentation templates. You can embed interactive data visualizations directly into business and marketing slides to showcase metrics like traction in QBRs or sales pitches.

Does this approach provide responsive design templates for mobile and desktop presentations?▼

Responsive design templates include 25 layout patterns with native breakpoints for mobile, tablet, and desktop viewing. This ensures HTML presentations maintain their 16:9 aspect ratio and professional layout across all devices.

What is the best way to structure a seed funding pitch deck for venture capitalists?▼

Structure a seed funding pitch deck by applying the YC Seed Deck framework with emotion-optimized content strategies. This includes using PAS copywriting formulas for problem slides and embedding Chart.js metrics to showcase traction.

Are there limitations to using HTML presentations instead of traditional slide software for marketing use cases?▼

HTML presentations require manual deployment to a web server rather than native desktop software export. However, they eliminate manual coding effort by providing pre-built responsive layouts, design token customization, and data visualization integration for marketing use cases.

Related Skills

Explore More Marketing & Sales Skills→
ralvarezdevralvarezdev
3

demo-presentation-architect

Generate slide-deck outlines and per-slide specs from interview briefings.

Community
Advanced
aresbitaresbit
46

frontend-slides

Convert PowerPoint files into zero-dependency HTML slide decks.

Community
Advanced
idontcarlidontcarl

ckm:slides

Create strategic HTML slide decks with Chart.js and design tokens.

Community
Intermediate
xpert-aixpert-ai
8

report-to-google-slides

Convert HTML analytics reports into editable Google Slides decks.

Official
Advanced