Design and build distinctive, production-ready frontend interfaces with intentional typography, color, layout, and motion—without generic AI aesthetics.
HyperFrames from NousResearch’s Hermes project, created by HeyGen. Use it to turn text, scripts, websites, or HTML/CSS/JS compositions into polished MP4/WebM videos. Build motion graphics, product tours, captioned videos, social overlays, TTS narration, audio-reactive visuals, and scene transitions, with frame-by-frame rendering and built-in quality checks.
Built on Spatial Deck, an open-source (MIT) presentation framework. Paste rough notes, a Google Slides export, a PDF, or a PowerPoint outline and get back ONE finished HTML file: double-click to present in any browser, or drag it onto a free host for a live share link. Animated slides, themed sections, a constellation overview map, and speaker notes wired to a presenter view — no PowerPoint, no code, no account. Drop a NOTE: marker anywhere in your input and it writes that part for you.
Create polished, animation-rich HTML presentations from scratch or convert PowerPoint decks into responsive web slides.
Visual Explainer turns your code, systems, data, and plans into clean HTML pages instead of messy terminal text. Ask it to diagram an architecture, review a diff, audit a plan against the codebase, compare requirements in a table, or build a slide deck, and it generates a self-contained page with real typography, Mermaid diagrams, and charts. The visual explainer for technical work, ready in chat.
Open-source CLI (MIT, 2k+ GitHub stars, Hacker News front page). Turn any video URL or local file into scene-aware keyframes plus a timestamped, speaker-labeled transcript your LLM can actually read. - Runs 100% on your machine, nothing is uploaded - Works with Claude, ChatGPT, Gemini or local models - URL videos reuse the platform's own captions, Whisper otherwise New in 0.10.5: Apple Silicon GPU transcription, about 6x faster on M-series Macs, same no-fake-captions gate.
Animated SVGs (CSS keyframes, SMIL, Web Animations API) can't be read by standard video tools — ffmpeg only sees a static image. This Skill solves that by driving a headless browser to scrub the animation frame-by-frame at exact timestamps, screenshotting each one, then stitching the sequence into a real H.264 MP4 with ffmpeg. Handles Figma Motion exports, custom CSS-animated SVGs, looping/repeat duration, resolution/fps tradeoffs, and the MP4-has-no-alpha-channel caveat.
Built from hands-on work optimizing production Astro sites across static, hybrid, and SSR output modes. Covers the full performance stack: native image optimization with the Astro Image component, View Transitions API integration, prefetch strategies, Dev Toolbar audit workflows, accessibility fixes aligned to WCAG, and Core Web Vitals improvements. Grounded in Astro 3/4/5/6+ internals and real optimization cycles — not generic web performance advice.
Frontend Design Direction from affaan-m’s ECC project. Use it to make websites, dashboards, apps, components, and other web UIs feel more intentional and product-specific. It helps choose the right visual direction, hierarchy, typography, color, layout, motion, responsiveness, and interaction patterns while avoiding generic AI-style UI and working with the project’s existing design system.