Design, implement, and review interface animation, from button feedback to drag gestures. When measurement tools are available, analyze recordings to reconstruct timing, easing—how speed changes—and spring motion, then produce code and an implementation specification.
Build interactive web motion from videos or image sequences, controlled by scrolling, pointer movement, dragging, or state changes. It covers media preparation, timeline compilation, playback controllers, delivery format selection, and checks on the target page.
Plan or improve motion graphics by refining the message, typography, scene transitions, pacing, and timeline. It helps connect movement to meaning while leaving artifact creation and export to the active task's production workflow.
Find and adapt animations for web pages and components using 160 examples with HTML, CSS, JavaScript, and adjustable parameters. Covers text, interaction, basic, and advanced effects, with guidance on accessibility and fitting code into existing projects.
Plan artistic animations and explainer scenes using 35 style recipes, nine explanation patterns, storyboards, and reusable Canvas drawing code. Build motion within the host environment’s timeline, using its available tools for assets and export.
Implement purposeful animations for existing interfaces or an agreed UI brief. It selects motion based on purpose and usage frequency, then handles timing, interrupted interactions, exits, and reduced-motion preferences while reusing the project’s tools and design values.
Build a creative studio website with classical illustrations, cobalt colors, serif headings, and cinematic scrolling. Adapt the supplied HTML template to a brand while retaining chapter navigation, service sections, FAQs, and mobile layouts.
Run a project's configured build and test commands, including type checks that detect inconsistent data types. Save pass or fail results, failure details, and logs so an automated editing loop can decide whether verification is complete.
Create an HTML pricing page with plan cards, a feature comparison table, expandable FAQs, and action buttons. The skill adapts the number of plans to the brief and follows the project's colors, typography, and component patterns.
Build a website prototype as a single HTML file using a supplied template and section layouts. Suitable for landing pages, pricing pages, and documentation indexes, with colors adapted to an existing design system.
Create a desktop landing page wireframe, a simple layout made of grey boxes, with numbered markers and a matching specification panel. The result shows page structure alongside short implementation and user experience notes.
Collect design tokens—reusable values for colors, typography, spacing, corners, and shadows—from source code, screenshots, or Figma exports. Organize them in a JSON file with source and usage references for later mapping to a design system.
Creates web prototypes inspired by Swiss industrial print, using newsprint backgrounds, oversized black type, fine grid lines, and red accents. It suits editorial pages, agency portfolios, and manifesto sites with a precise, assertive visual style.
Choose one visual direction before building, using an existing design system, supplied brand references, or the project brief. Record the choice and define the colors, typography, and other visual settings that guide implementation.
Review a design across five areas: visual execution, fit to the user's problem, brand consistency, accessibility, and wording. It guides the agent to fix concrete defects and explain any issues that remain unresolved.
Build a trading analysis dashboard as a single HTML file, with dense market panels and interactive charts. Include light and dark themes, Live/Demo controls, chart focus views, and a keyboard command menu for navigating the interface.
Create full-screen animated visuals with WebGL, a browser technology for GPU rendering. Combine shaders, 3D scenes, or particles with a text overlay, and deliver the result as one self-contained HTML file without external requests.
Create a reusable snapshot of an existing code repository, covering files, imports, components, and routes. It gives agents a shared reference for migration and editing work without repeatedly scanning the directory tree.
Turn product requirements, roadmaps, architecture reviews, and retrospectives into HTML slides for decision-making. Choose one of eight visual themes to create a consistent, horizontally navigable deck, using source evidence and real numbers to support review.
Turn notes or documents into a talk outline, page-by-page media choices, and a production brief for a separate slide-making skill. After rendering, check each slide against its planned purpose and generate revision instructions for up to three rounds.
Prepare a structured plan for a code rewrite spanning multiple files. It records file responsibilities, ordered changes, and risk levels so later editing, diff review, and build testing can follow a clear, reviewable scope.
Generates short, single-shot videos for product reveals, teasers, and ambient loops. Plans the subject, movement, and lighting, then saves an MP4 in the project folder using the selected model, duration, and aspect ratio.
Build a single HTML visualizer for particles, fractals, simulations, or data. It moves heavy calculations into a Web Worker, a background browser process, and draws on a canvas while targeting smooth 60fps rendering.
Turn unresolved requirements into a compact clarification form. Use choices and input fields to collect answers that affect design direction, content structure, or delivery format, so the workflow can proceed.
Is this your account? Link GitHub to bring it onto your creator page (Japanese)