Skill UI

This skill is designed to enhance the overall feel and usability of user interfaces. Currently, this file is undergoing Japanese translation. Please refer to the original English skill file for detailed functionality and usage scenarios.

Create a single-file HTML presentation with horizontal swipe navigation, WebGL backgrounds, and two visual modes: Magazine/E-Ink and Swiss Style. Ideal for talks, product launches, and shareable web slides.

This skill converts a structured markdown file containing multiple slides into a single, self-contained, interactive HTML presentation. It supports advanced presentation features such as Presenter Mode (with speaker notes, clock, and next slide preview), URL-hash deep linking, and print-to-PDF functionality. Ideal for creating professional, browser-based slide decks directly from simple markdown source.

This utility burns an SRT subtitle track directly into an MP4 video file using ffmpeg's libass filter. It re-encodes the video (H.264) while copying the audio untouched. It supports defining custom font fallback chains (e.g., CJK fonts) and provides detailed control over font size, margins, and video encoding parameters (CRF, preset) for professional subtitling workflows.

This tool concatenates multiple numbered MP4 segments (e.g., 1_*.mp4, 2_*.mp4) into a single cohesive video file. It provides advanced features like optional fade transitions and automatic normalization of resolution, frame rate, and codecs. Use it when a workflow generates several short clips that need to be seamlessly stitched together into a final, polished reel.

Runs a comprehensive, systematic QA check on Figma designs to ensure they are production-ready before handing off to engineering. The checklist rigorously evaluates file hygiene, component consistency, accessibility (WCAG AA), content completeness, and overall readiness across multiple platforms (iOS/Android/Web). Use this skill when needing to validate a design’s quality and structure to prevent costly development rework.

This skill provides a comprehensive blueprint for designing digital products within Figma. It systematically maps out entire user journeys, including happy paths, loading states, error conditions, empty states, and edge cases. By defining the complete flow and suggested file structure beforehand, it prevents scope creep and ensures designers account for every necessary screen variant before starting the actual design work.