revealjs-skill

🥈Silver

Automate creation of polished, professional reveal.js presentations using natural language. Operations teams benefit from faster, consistent presentation generation. Connects to reveal.js for HTML output, streamlining workflows.

26930Updated 1mo ago

Intermediate30min to implementautomation

Saves ~60 min per use

Quick InstallView Source

git clone https://github.com/ryanbbrown/revealjs-skill.git

Works with:

Claude

Overview

About This Skill

How to Use

[{"step":1,"action":"Define the structure of your presentation by listing the slide titles and key content points in plain language. For example: 'Slide 1: Title and presenter info. Slide 2: Key metrics with bullet points. Slide 3: Action items with numbered list.'","tip":"Be specific about the data or talking points you want included. The more detail you provide, the more tailored the output will be."},{"step":2,"action":"Choose a theme for your presentation. Common reveal.js themes include 'solarized', 'beige', 'black', or 'white'. Specify your preference in the prompt.","tip":"Use a theme that aligns with your organization's branding or the formality of the presentation. Dark themes like 'black' work well for technical audiences."},{"step":3,"action":"Paste the generated reveal.js HTML into a file with a .html extension (e.g., presentation.html). Open the file in a web browser to preview the presentation.","tip":"Use the browser's developer tools to inspect and tweak the styling if needed. For example, adjust font sizes or colors to match your brand guidelines."},{"step":4,"action":"Share the HTML file or host it on a platform like GitHub Pages or a company intranet. Collaborate with team members by version-controlling the file in a repository.","tip":"Add a README file to the repository with instructions on how to update or customize the presentation for future use."},{"step":5,"action":"For recurring presentations, save the prompt template and reuse it with updated [PLACEHOLDERS]. Automate the process by integrating the AI tool with your workflow (e.g., using a script to generate the HTML file).","tip":"Set up a template in your note-taking app or project management tool to quickly generate new presentations without starting from scratch."}]

Setup & Installation

Quick Install

No install command available. Check the GitHub repository for manual installation instructions.

Alternative Install (Git Clone)

git clone https://github.com/ryanbbrown/revealjs-skill

Requirements

Claude Code or compatible AI agent
Works with: Claude

Quick Start Guide

Install the Skill

Copy the install command above and run it in your terminal.

Open Your AI Agent

Launch Claude Code, Cursor, or your preferred AI coding agent.

Try It Out

Use the prompt template or examples below to test the skill.

Customize

Adapt the skill to your specific use case and workflow.

Usage Examples

Prompt Template

Create a reveal.js presentation titled '[PRESENTATION_TITLE]' with the following structure: [SLIDE_1_CONTENT], [SLIDE_2_CONTENT], and [SLIDE_3_CONTENT]. Use a professional theme like 'solarized' or 'beige'. Include speaker notes for each slide with key talking points. Format the output as valid reveal.js HTML. Ensure the presentation is concise, visually balanced, and ready for immediate use in a business setting.

Example Output

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Quarterly Performance Review - Q2 2024</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/reveal.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/theme/solarized.min.css">
</head>
<body>
  <div class="reveal">
    <div class="slides">
      <!-- Slide 1: Title -->
      <section>
        <h1>Quarterly Performance Review</h1>
        <h3>Q2 2024</h3>
        <p>Presented by: Alex Carter, Operations Lead</p>
        <aside class="notes">
          Opening remarks: Thank the team for their hard work this quarter. Highlight the importance of reviewing KPIs and setting goals for Q3.
        </aside>
      </section>

      <!-- Slide 2: Key Metrics -->
      <section>
        <h2>Key Metrics Overview</h2>
        <ul>
          <li><strong>Revenue Growth:</strong> +12% YoY (Target: +10%)</li>
          <li><strong>Customer Acquisition:</strong> 450 new customers (Goal: 400)</li>
          <li><strong>Operational Efficiency:</strong> Reduced downtime by 15%</li>
        </ul>
        <aside class="notes">
          Emphasize the revenue growth exceeding targets. Mention the efficiency gains as a result of the new monitoring tools deployed last quarter.
        </aside>
      </section>

      <!-- Slide 3: Action Items -->
      <section>
        <h2>Next Steps</h2>
        <ol>
          <li>Implement the new CRM integration by August 15.</li>
          <li>Schedule a follow-up meeting with the sales team to review pipeline health.</li>
          <li>Document lessons learned from the Q2 downtime incidents.
        </ol>
        <aside class="notes">
          Assign clear owners for each action item. Stress the importance of documentation for continuous improvement.
        </aside>
      </section>
    </div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/reveal.min.js"></script>
  <script>
    Reveal.initialize({
      controls: true,
      progress: true,
      center: true,
      hash: true
    });
  </script>
</body>
</html>
```