teaching-site

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.

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.

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.

Converts structured course content or chapter-based data in markdown form into a working interactive website as a vanilla HTML + JS single-page app, with no framework or build step required. Triggered by phrases like "convert to SPA" or "static site from markdown."

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.