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-9/

Styled Presentation

Create a 3-slide presentation with custom styling using utility classes. Each slide should demonstrate different styling techniques.

Requirements

Slide 1: Title Slide

  • Center the slide content vertically and horizontally
  • Display the title in extra-large text
  • Apply a gradient background (blue to purple gradient)
  • Wrap the title and subtitle in a container with padding and rounded corners
  • Make the subtitle text semi-transparent

Slide 2: Feature Cards

  • Display 3 feature items in separate boxes
  • Each box should have:
    • Box shadow for depth
    • Internal spacing (padding)
    • Space between boxes (margin)
    • A left border in a unique color (use red, green, and blue)
  • Arrange the boxes vertically with consistent spacing

Slide 3: Code Display

  • Show a code block with custom styling
  • Style the code container with:
    • Dark background color
    • Rounded corners
    • Internal padding
  • Add a label above the code that says "Example Code"
  • Style the label with a background color and padding

Implementation

@generates

Test Cases

  • The first slide has a gradient background and centered large text @test
  • The second slide contains three cards with different colored borders @test
  • The third slide has a code block with styling and a header @test

Dependencies { .dependencies }

@slidev/cli { .dependency }

Provides the presentation framework and development server.

unocss { .dependency }

Provides utility-first CSS framework for styling.

Version

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