Create live HTML product demos that show an app’s workflow inside a Mac-style window. Reproduce real interface text and results, animate a scripted pointer, and support step navigation, scrubbing, and consistent frozen frames.
Design a dark interface with matte-black surfaces, emerald accents, framed cards, and restrained glow. Apply consistent styling across navigation, typography, charts, and motion to create a calm, technical dashboard.
Choose a visual direction for landing pages using WebGL, a browser graphics technology. Balance brand style with readable copy, clear calls to action, mobile performance, accessibility, and implementation effort, then define fallbacks and build priorities.
Add word-by-word reveal animations to headlines and short copy, with each word fading in and rising once as it enters view. Includes implementation examples that account for screen readers, reduced motion, and disabled JavaScript.
Evaluate work on a ten-point scale using clear criteria, then improve each item toward a chosen target. Record evidence, compare before-and-after scores, and explain any remaining gaps without rounding scores up to claim success.
Transform an article, case study, or brand story into a connected scrolling page. Choose scroll-controlled video, a real-time Three.js scene, or HTML with charts and typography, then organize the narrative into five to seven clear stages.
Build visual sequences that move forward and backward with page scrolling. Use video, image frames, canvas, SVG, or HTML elements in a sticky stage, while preserving keyboard access, static alternatives, and predictable visual states.
Add controllable rain, storms, and snow to Three.js scenes. Coordinate visible precipitation, lightning with delayed thunder, accumulating snow, wet ground, puddles, and seamless ambient audio while sharing particle resources across changing weather states.
Add a real 3D object to a web page using Three.js. Combine geometric depth, materials that respond to light, perspective, and subtle rotation or floating motion for hero sections and product visuals.
Turn ordered steps into a vertical or horizontal timeline whose progress line and active step update as readers scroll. Keep the sequence readable across screen sizes, with keyboard navigation and support for reduced-motion preferences.
Embed interactive Unicorn Studio scenes in websites and adjust their sizing, layering, and rendering settings. Use it to integrate animated visuals with page content, manage performance, and troubleshoot scenes that fail to appear.
Create web controls that resemble physical materials using gradients, layered shadows, reflective edges, and subtle texture. The skill covers raised and pressed states, plus embossed labels and icons for buttons, cards, switches, and other controls.
Give navigation, controls, and feature cards a consistent icon style using Iconify Solar Duotone Bold. It guides icon sizing, clear labels, two-tone opacity, and contrast so icons fit the surrounding interface.
Generate towers, castles, pagodas, and domes in Three.js from adjustable parameters. Create construction animations with a rising reveal, matching solid sections, scaffolding, and stage captions, using reusable geometry instead of imported mesh files.
Add animated backgrounds such as waves or fog with Vanta.js, which renders graphics through WebGL. Configure effects, integrate them into pages or React components, handle resizing and cleanup, and plan fallbacks for mobile devices.
Build text that reveals word by word as readers scroll. Preserve inline links, emphasis, and responsive wrapping, while keeping complete text accessible to screen readers and immediately readable when reduced motion is preferred.
Document visual work with real screenshots captured before a change, during key interactions, and after completion. Inspect each image and share captioned files throughout the task so users can review progress and redirect the work early.
Design a two-panel page that gives visuals and supporting information distinct roles. This skill guides framing, spacing, typography, compact labels, and responsive stacking for product pages, portfolios, showcases, and technical presentations.
Build a Three.js landscape backdrop for buildings, products, or figures. Combine uneven terrain, wind-blown grass, scattered stones, sky, and stars, with smooth transitions between times of day and guidance on rendering performance.
Create a fixed, full-screen WebGL laser background with a thin white core, brand-colored halo, and soft smoke. Adjust beam placement, glow, fog, and rendering cost while keeping foreground content readable and interactive.
Build consistent web interfaces with Tailwind CSS using small styling classes. Apply layout, typography, responsive behavior, interaction states, and dark mode patterns, with examples for buttons, page sections, and reusable components.
Add animated AI activity indicators to React interfaces, with distinct states for searching, reasoning, listening, writing, and creating. The skill covers matching indicators to real tasks, choosing sizes and themes, and providing accessible status announcements.
Design a dark monochrome interface around an exploded 3D wireframe, an outline view of separated parts. Coordinate annotations, connector lines, typography, and small metric displays to explain product structures or system states.
Track multiple Claude sessions working on one project, check that changes reached main with screenshots and changelog entries, verify the live site, and identify finished sessions, interrupted work, and questions awaiting the user.
Is this your account? Link GitHub to bring it onto your creator page (Japanese)