kids-storybook-builder

Builds bilingual storybook practice sites with TTS audio and word-level karaoke from page text or images.

Updated Apr 11, 2026
One-click install
npx skills add https://github.com/cashwu/ThreeLittlePigs --skill kids-storybook-builder-cashwu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: kids-storybook-builder
Source: https://github.com/cashwu/ThreeLittlePigs/tree/main/.agents/skills/kids-storybook-builder
Command: npx skills add https://github.com/cashwu/ThreeLittlePigs --skill kids-storybook-builder-cashwu

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Turning a children's picture book into an interactive read-along practice site requires tedious manual work: transcribing pages, translating sentences, generating per-sentence audio, aligning word-level timing, and wiring up a playable web page. This Skill automates that entire pipeline while preserving the original story text, page order, and line breaks. ## Core Features & Use Cases - Transcription and Translation: Accepts page-by-page English text or page images, transcribes with visual verification, and produces one-to-one Traditional Chinese translations validated per page. - TTS Audio with Karaoke: Generates per-sentence English MP3s with word-boundary timing, optional consonant-to-vowel learning pauses for young readers, and atomic staging so failed runs never corrupt published audio. - Standalone Practice Page: Produces a file://-openable index.html with page tabs, play/pause per sentence, word-level highlighting across line breaks, mobile-friendly scrolling tabs, and optional Docker Compose deployment with Nginx. - Use Case: A parent photographs 12 pages of a child's English picture book; the Skill transcribes each page, translates every sentence into Traditional Chinese, generates audio, and delivers a verified bilingual shadowing site the child can use on a phone. ## Quick Start Build a bilingual read-along storybook site from these page-by-page story images, with English audio, Chinese translations, and word-level karaoke highlighting.

Frequently Asked Questions about kids-storybook-builder

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I turn a picture book into a read-along practice website?▼

Provide page-by-page English text or photos of each page. The Skill transcribes the text, translates each sentence into Traditional Chinese, generates per-sentence English MP3 audio with word timing, and outputs a standalone index.html with karaoke highlighting.

How to generate word-level karaoke highlighting for TTS audio?▼

Each sentence's display lines are joined and sent to TTS, which returns word-boundary offsets. The page maps these offsets to word spans in the DOM, highlighting words in sequence even across line breaks, with a plain-text fallback if timing counts mismatch.

Can the storybook site work without a web server?▼

Yes, the generated index.html is standalone and opens directly via file:// with no runtime fetch. Audio files load only when the user presses play, and all page, sentence, and timing data is embedded in the page.

What happens if TTS audio generation fails partway through?▼

Audio is generated into a staging directory first and published by atomic replace only after all sentences succeed. On failure, staging is cleaned up and existing published audio and HTML remain byte-for-byte unchanged.

Does the storybook builder support Docker deployment?▼

Yes, it can generate a small Nginx image with docker-compose.yml that copies only runtime HTML and audio, supports byte-range requests for MP3s, and exposes the host port via an environment variable. Verification includes a Range request expecting 206 Partial Content.

When should I not use this storybook builder?▼

It is designed for storybook reading and shadowing sites, not illustration-only requests. It also refuses to silently guess illegible image text or rewrite the original story; ambiguous content that changes the story requires user confirmation.