Loading...
Loading...
Found 5 Skills
Turn a dense PDF (or one chapter or section of it) into a single-file interactive HTML web page that is easier to understand in less time than the original and fun to explore—starting with a 30-second summary on the first screen, followed by hands-on scenes, guess-then-reveal interactions, and a citation on every number that opens the corresponding source sentence and page. Use a chosen art style for the illustrations, then self-audit the result against the source. Use this whenever someone wants to make a PDF, paper, textbook chapter, annual report / 10-K, rulebook, manual, contract, novel chapter, or lecture notes easier to read, “come alive,” interactive, explorable, scrollytelling-based, a mini web app, an interactive lesson, or courseware—even if they only say “this PDF is unreadable,” “help me get through this,” or mention a Gemini Canvas / Claude Artifacts-style “PDF to web app.” Chinese triggers: turn a PDF into a web page, interactive web page, interactive courseware, visual explanation, a PDF I cannot finish reading, turn a paper / textbook / financial report / rulebook / classic into a playable page, Canvas-style PDF-to-web-page conversion.
Modern web design trends, principles, and implementation patterns for 2024-2025. Use this skill when designing websites, creating interactive experiences, implementing design systems, ensuring accessibility, or building performance-first interfaces. Triggers on tasks involving modern design trends, micro-interactions, scrollytelling, bold minimalism, cursor UX, glassmorphism, accessibility compliance, performance optimization, or design system architecture. References animation skills (GSAP, Framer Motion, React Spring), 3D skills (Three.js, R3F, Babylon.js), and component libraries for implementation guidance.
Modern web design trends, principles, and implementation patterns for 2024-2025. Use this skill when designing websites, creating interactive experiences, implementing design systems, ensuring accessibility, or building performance-first interfaces. Triggers on tasks involving modern design trends, micro-interactions, scrollytelling, bold minimalism, cursor UX, glassmorphism, accessibility compliance, performance optimization, or design system architecture. References animation skills (GSAP, Framer Motion, React Spring), 3D skills (Three.js, R3F, Babylon.js), and component libraries for implementation guidance.
Implements scroll-driven storytelling experiences with pinned sections, progressive reveals, and scroll-linked animations. Use when asked to build scrollytelling, scroll-driven animations, parallax effects, narrative scroll experiences, or story-driven landing pages.
Build scene-by-scene chapters that advance left to right on one fixed stage while the user scrolls vertically, with native scroll as the only input. One pure function turns scrollY into scene, dwell and move, so forward, reverse, scrollbar drags, fast skips and reload at depth all land on the right frame. Covers dwell versus transition budgets, a burn-wipe or pan between scenes, chapter index and progress UI, glide-to-scene links that skip intermediate scenes, keyboard and reduced-motion behaviour. Use for horizontal scrollytelling, multi-scene product tours, "scroll down to travel sideways", chapter carousels driven by the wheel, or any piece where a wheel-jacked slider keeps breaking on touch, keys, refresh or back.