skills.rest
decniner
decninerCOMMUNITY
Explore all skills by this author →
GitHub

interactive-study-html

Generates single-file interactive HTML study tools with toggleable language tracks and GitHub deployment.

Updated Jul 3, 2026
Search Tags:#study tool#html#github#language learning#single-file#interactive#bilingual
One-click install
npx skills add https://github.com/decniner/HermesP1 --skill interactive-study-html-decniner
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: interactive-study-html
Source: https://github.com/decniner/HermesP1/tree/main/.hermes-backup/skills/interactive-study-html
Command: npx skills add https://github.com/decniner/HermesP1 --skill interactive-study-html-decniner

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? It turns structured bilingual or multilingual educational content into a self-contained interactive HTML study page where learners can toggle pronunciation and translation tracks on or off, then publishes it to GitHub for mobile access. ## Core Features & Use Cases - Three-track content model: Every text block carries a source-language track, a phonetic/romaji track, and a translation track, each mapped to dedicated CSS classes. - Visibility toggle bar: A sticky header with buttons for Japanese-only mode, romaji toggle, and English toggle, plus live status dots driven by a small JavaScript state object. - GitHub deployment workflow: Creates a public repo, pushes the HTML file, and produces an htmlpreview.github.io URL for phone viewing. - Use Case: A language learner asks for a Japanese business keigo practice page; the skill generates dialogue, email, and grammar table content with all three tracks, compiles it into one dark-themed HTML file, and delivers a mobile-friendly URL. ## Quick Start Create an interactive Japanese study HTML page with toggleable romaji and English tracks from my lesson notes and deploy it to GitHub for mobile viewing.

Frequently Asked Questions about interactive-study-html

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

FAQPage Schema
How do I create an interactive HTML study page with toggleable translations?▼

Structure each text block with separate CSS classes for the source language, phonetic, and translation tracks, then add a sticky toggle bar whose buttons add or remove hiding classes on the main container. A small JavaScript state object tracks which tracks are visible and updates status indicator dots.

How to deploy a single HTML file to GitHub for mobile viewing?▼

Create a public GitHub repository, commit the HTML file, and push to the main branch. Then build an htmlpreview.github.io URL pointing at the raw file path, which renders the page in any mobile browser without hosting setup.

Why does htmlpreview.github.io not render my HTML file?▼

htmlpreview.github.io only works with public repositories, so a private repo will fail to load. Also verify the branch name is main rather than master, since git init may default to master and the URL path must match the actual branch.

Can the HTML study page work offline without external dependencies?▼

Yes, the page is built as a single self-contained HTML file with all CSS and JavaScript inline. No CDN links or external libraries are used, so it renders identically offline and avoids broken resource issues.

How do I make the toggle bar work on mobile screens?▼

Use a sticky header for the toggle bar and add a media query breakpoint at 640px to adjust layout for narrow viewports. Test the toggle buttons, status dots, and content tables at that width to confirm nothing overflows.

Related Skills

Explore More Education & Research Skills→
vvieira010-pixelvvieira010-pixel

historical-source-adapter

Adapt historical primary sources into classroom materials with analytical validation.

Community
Advanced
RemseyMailjardRemseyMailjard

publish-to-pages

Convert PPTX, PDF, HTML, or Google Slides into a live GitHub Pages URL.

Community
Advanced
alohaysalohays
5

slide-excellence

Review presentation slides for visual, pedagogical, and proofreading issues.

Community
Advanced
trungdo9trungdo9
3

markdown-novel-viewer

Convert markdown files into interactive HTML pages via a local HTTP server.

Community
Basic