What export formats does the walkthrough skill support?

You can export your completed walkthroughs as MP4 videos, animated GIFs, WebM files, or self-contained HTML embeds that function offline.

Does it support custom branding for the cursor and tooltips?

Yes, you can customize cursor presets, colors, and sizes, as well as add explanatory tooltips and highlights to match your product's visual identity.

What kind of UI interactions can be scripted?

You can script a wide range of actions including cursor movements, clicks, character-by-character typing, scrolling, element highlighting, and even camera effects like zooming and panning.

Do I need to manually find all the CSS selectors?

The skill suggests best-guess selectors (such as data-testids, IDs, or classes) based on your flow description, which you can then refine during the preview phase.

Can I preview the walkthrough before exporting the final file?

Yes, the skill guides you through launching Walkr Studio locally, which provides a real-time, hot-reloading preview of your script in a browser.

Product Walkthrough Creator

Name: Product Walkthrough Creator
Author: janhoon

byjanhoon

0•

学习与文档

Generates high-quality, code-first product demos and animated tutorials using the Walkr TypeScript API.

The create-walkthrough skill empowers developers to build professional product tours and animated walkthroughs directly from their codebase. By leveraging the Walkr framework, it automates the process of scripting cursor movements, element interactions, and realistic typing sequences, ensuring your demos are consistent and easy to maintain. Whether you need a tutorial video for documentation or an interactive embed for a marketing landing page, this skill manages the entire lifecycle from project setup and script authoring to real-time previewing and multi-format exporting.

主要功能

01Real-time preview with hot-reloading via Walkr Studio integration

02Multi-format export support including MP4, GIF, WebM, and HTML

03Automate realistic cursor movements, clicking, and typing sequences

04Built-in support for spotlights, tooltips, and custom viewport resolutions

05Script UI interactions using a developer-friendly TypeScript API

060 GitHub stars

使用场景

01Generating high-fidelity product demo videos for marketing sites and social media

02Documenting complex user workflows for internal training and technical guides

03Creating interactive onboarding tutorials for SaaS applications

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add janhoon/walkr create-walkthrough

For use in Claude.ai and ChatGPT