Does this skill require external frameworks like React or Tailwind?

No, Storytelling Web generates zero-dependency single-file HTML with all CSS and JavaScript inlined for maximum portability and speed.

Can I customize the visual style and brand colors?

Yes. The skill includes a style discovery phase where it generates three distinct visual previews based on your desired 'vibe' and mood selection before generating the full page.

What is the difference between Slides and Scrolling mode?

Slides mode provides structured, sequential navigation similar to a deck, while Scrolling mode creates a continuous, exploratory narrative driven by scroll-triggered animations.

Are the generated web pages accessible and mobile-friendly?

Absolutely. All outputs follow semantic HTML standards for accessibility and responsive design principles to ensure a seamless experience on mobile, tablet, and desktop.

Storytelling Web Designer

Name: Storytelling Web Designer
Author: wang1212

bywang1212

•

デザインツール

Transforms text into stunning, animation-rich visual web pages with customizable slide and scrolling modes.

Storytelling Web is a specialized Claude Code skill designed to convert raw text into immersive, production-quality web experiences. By offering both structured slide-based presentations and fluid, scroll-driven narratives, it empowers users to create distinctive, zero-dependency HTML files that avoid generic aesthetics. The skill guides users through a comprehensive design process—from content discovery and mood-based style previews to final generation—ensuring high-performance, accessible, and visually compelling outputs for pitches, educational guides, or digital brand storytelling.

主な機能

01Mobile-first responsiveness: Ensures all generated experiences are accessible and performant across all device types.

02Advanced typography and motion: Employs professional font pairings and smooth, non-generic animation patterns.

03Dual interaction modes: Choose between structured slide navigation or continuous scroll-driven narratives.

04Visual style discovery: Generates three unique design previews based on specific user moods and brand vibes.

05Zero-dependency output: Generates single-file, production-ready HTML with inline CSS and JavaScript.

063 GitHub stars

ユースケース

01Building high-impact investor pitch decks and immersive product launch presentations.

02Developing exploratory digital journalism or atmospheric brand narrative experiences.

03Creating interactive educational tutorials and engaging long-form documentation.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add wang1212/storytelling-web storytelling-web

For use in Claude.ai and ChatGPT

Download Skill