static-spa-conversion

A skill for designing course, workshop, and training program outlines that produces the structural skeleton including day themes, unit breakdowns, learning objectives, and scheduling metadata before content authoring begins.

Converts a finished teaching website into printable PDF and DOCX ebook formats by reading the live course data object and composing markdown via Playwright and pandoc. Designed as a post-site step once the teaching site is feature-complete and stable.

A skill for authoring course teaching content including lecture notes, sample materials (CSV/YAML/MD), quiz items, prompt templates, and worksheets, organized by day with anchoring to outline IDs for SPA conversion.

A skill for condensing multi-day public-class teaching sites into corporate in-house trainings, such as compressing a 4-day course into a 6-hour intensive. Produces single-folder, offline-ready, zippable deliverables with inlined course data and brand customization.

A design system skill for teaching sites and content-driven SPAs that defines visual tokens using OKLCH color space, typography, geometry, dark mode strategy, and reusable component patterns. Provides the reasoning behind each design decision so future projects can adapt the values while preserving the intent.

Generates Playwright-based runtime verification scripts for web UI testing, including multi-viewport screenshots, console error capture, visual regression detection, and responsive design verification across browsers.

A top-level skill that orchestrates building interactive teaching websites and course microsites, coordinating 10 specialized sub-skills covering the full pipeline from course outline and content authoring to single-page app conversion, interactive elements, and ebook publishing.

Produces visual assets for teaching websites using four sources: Playwright scraping for tool screenshots, AI image generation for conceptual scenes, hand-drawn SVG for diagrams, and code generators for QR codes and functional artifacts.

A skill that adds polished interaction layers to vanilla static SPAs, including localStorage-based progress persistence, sidebar navigation with scrollspy, dark/light theme toggle, responsive mobile layout, keyboard navigation, fade-in animations, and quiz scoring with section back-links.

A skill that produces audit scripts to verify cross-file data and asset consistency in content-driven sites, surfacing drift between source files, course data, and deployed visuals before release.