What is the Slidev Code skill for Claude?

It is a specialized capability that provides guidance on configuring and optimizing code presentation features like highlighting and animations within Slidev.

Can I import code from external files?

Yes, the skill provides patterns for importing external code snippets to ensure your slides stay synchronized with your actual source code.

Does this skill support interactive code editors?

Yes, it provides instructions for integrating the Monaco editor to allow for live, interactive code manipulation during your presentation.

Can I create animated code transitions with this skill?

Yes, it specifically helps you implement Magic Move, which allows for smooth, animated transitions between different states of a code block.

How does it handle TypeScript type information?

It assists in setting up TwoSlash type annotations, which display hoverable type information directly within your slide's code blocks.

Slidev Code Blocks

Name: Slidev Code Blocks
Author: vinnie357

byvinnie357

•

学习与文档

Optimizes code presentation in Slidev with advanced syntax highlighting, interactive editors, and animated transitions.

This skill provides expert guidance for implementing professional-grade code blocks within Slidev presentations. It streamlines the configuration of Shiki syntax highlighting, line-level highlighting, and the integration of the Monaco editor for interactive demonstrations. Additionally, it helps developers master complex features like Magic Move animations for smooth code transitions, TwoSlash type annotations for TypeScript clarity, and organized code groups, ensuring technical presentations are both visually compelling and highly functional.

主要功能

01Code grouping with tabbed interfaces and external snippet imports

02Magic Move animated code transition implementation

03Interactive Monaco editor integration for live code

04Shiki syntax and line-specific highlighting configuration

05TwoSlash type annotation and documentation support

069 GitHub stars

使用场景

01Building educational tutorials with animated code walkthroughs

02Creating high-end technical slide decks for developer conferences

03Developing interactive documentation and live-coding presentation environments

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add vinnie357/claude-skills code

For use in Claude.ai and ChatGPT

Download Skill