CtrlK
CommunityDocumentationLog inGet started
Tessl Logo

tessl/npm-slidev--cli

tessl install tessl/npm-slidev--cli@52.1.0

Modern presentation framework and CLI tool that transforms Markdown files into interactive, web-based slide presentations with built-in development server, export capabilities, and Vue.js integration

Agent Success

Agent success rate when using this tile

100%

Improvement

Agent success rate improvement when using this tile compared to baseline

1.12x

Baseline

Agent success rate without this tile

89%

task.mdevals/scenario-8/

Code Diff Presentation Generator

A tool that generates presentation slides to demonstrate code changes before and after refactoring.

Overview

Create a presentation slide generator that takes code snippets from two versions of a file (before and after) and generates a Markdown slide file showing the differences side-by-side. The tool should create slides that display code comparisons in a diff view, making it easy to present code changes during talks or reviews.

Capabilities

Generate Diff Slide

  • Given a title "Refactoring Example", old code const x = 1;, new code const count = 1;, and language "js", it generates a slide with title heading and a diff code block using {monaco-diff} syntax @test
  • The diff code block contains the old code followed by ~~~ separator, then the new code @test

Handle Different Languages

  • When language is "typescript", the diff code block starts with ```ts {monaco-diff} @test

Create Multi-Slide Presentation

  • Given presentation title "My Presentation", author "John Doe", and array of 2 slide objects, it generates a complete markdown file with frontmatter, title slide, and 2 diff slides separated by --- @test

Implementation

@generates

API

/**
 * Generates a slide with a code diff comparison.
 *
 * @param {Object} slideData - The slide configuration
 * @param {string} slideData.title - The title of the slide
 * @param {string} slideData.oldCode - The original code snippet
 * @param {string} slideData.newCode - The refactored code snippet
 * @param {string} slideData.language - The programming language (e.g., 'js', 'ts', 'python')
 * @returns {string} The markdown content for a single slide with diff view
 */
function generateDiffSlide(slideData) {
  // IMPLEMENTATION HERE
}

/**
 * Generates a complete presentation file with multiple diff slides.
 *
 * @param {Object} presentationData - The presentation configuration
 * @param {string} presentationData.title - The presentation title
 * @param {string} presentationData.author - The author name
 * @param {Array<Object>} presentationData.slides - Array of slide data objects
 * @returns {string} The complete markdown content for the presentation
 */
function generatePresentation(presentationData) {
  // IMPLEMENTATION HERE
}

module.exports = {
  generateDiffSlide,
  generatePresentation,
};

Dependencies { .dependencies }

@slidev/cli { .dependency }

Provides presentation framework with diff view capabilities.

@satisfied-by

Version

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@slidev/cli@52.1.x
tile.json