Does this skill work with apps that require authentication?

Yes. Walkr interacts with your app via a browser instance; you can script login flows or use the clearCache() function to manage session states.

Can I preview the walkthrough before exporting?

Yes, the skill helps you launch Walkr Studio, which provides a live-reloading preview in your browser so you can iterate on your script before the final render.

Do I need to install external dependencies?

The skill will check for and guide you through installing @walkrstudio/core, @walkrstudio/cli, and @walkrstudio/recorder via pnpm or your preferred package manager.

What is 'code-first' product demo creation?

Code-first means you define the walkthrough steps in a TypeScript file rather than using a manual screen recorder. This makes demos easy to version control, update, and reproduce.

What formats can I export my walkthroughs in?

You can export your completed walkthroughs as MP4 (H.264), WebM, animated GIF, or a self-contained HTML embed that works offline.

Product Walkthrough Generator

Name: Product Walkthrough Generator
Author: janhoon

byjanhoon

0•

学習とドキュメンテーション

Automates the creation of high-quality, animated product demos and tutorial videos using code-first scripting.

This skill integrates the Walkr framework into Claude's workflow, allowing you to script interactive website walkthroughs via a dedicated TypeScript API. It guides you through the entire lifecycle of creating a product demo—from initial setup and authoring complex interaction scripts with animated cursors and tooltips to exporting final assets. Whether you need an MP4 for marketing, a GIF for documentation, or an interactive HTML embed for onboarding, this skill streamlines the production of professional visual guides directly from your development environment.

主な機能

01Multi-format export capabilities for MP4, WebM, GIF, and self-contained HTML.

020 GitHub stars

03Support for advanced visual cues like spotlights, tooltips, and viewport zooming.

04Real-time preview and iteration via a local Walkr Studio dev server with hot-reload.

05Scripted browser interactions including clicks, typing, and scrolling with natural cursor movement.

06Precise timing controls for scene transitions, typing delays, and navigation waits.

ユースケース

01Creating automated, repeatable GIF walkthroughs for technical documentation and READMEs.

02Generating high-fidelity marketing videos for SaaS landing pages and social media.

03Building interactive, self-contained HTML onboarding tours for web 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