Skill UI

This skill generates a single, full-bleed, looping motion composition using only inline CSS animations. It functions as a high-fidelity poster frame, specifically designed to be captured by keyframe exporters (like HyperFrames or Lottie) to create animated hero videos, title cards, or video posters for marketing campaigns. Ideal for briefs requiring sophisticated 'motion design' or 'animated hero' assets.

HyperFrames is a comprehensive framework that treats HTML as the source of truth for video production. It allows users to create complex video compositions, including animated title cards, dynamic captions synced to audio, advanced text-to-speech narratives, and sophisticated audio-reactive visuals (like beat synchronization). The tool manages the entire video workflow, from composition authoring and timing to scene transitions (crossfades, wipes) and final rendering.

This comprehensive guide provides implementation details for Card-Based Design, a popular pattern for displaying bite-sized, discrete information units. It covers best practices for achieving responsive, Pinterest-style layouts across multiple platforms, including modern CSS Grid/Masonry for web, and native frameworks like SwiftUI, Flutter, and React Native for mobile apps. Use it when structuring content feeds, portfolio grids, or news articles.

A comprehensive guide for implementing Flat Design 2.0 (Semi-Flat). This style maintains the clean, solid aesthetic of flat design while introducing subtle, diffuse shadows and micro-gradients to enhance perceived depth and communicate element interactability (e.g., buttons, cards). It provides detailed, cross-platform code examples for Web (CSS), iOS (SwiftUI), Flutter, and React Native.

A comprehensive guide covering the aesthetic and technical implementation of floating User Interface (UI) elements. Learn how to create detached, elevated components, such as cards and navigation bars, giving the application a light, airy, and modern feel across Web (CSS), iOS (SwiftUI), and Flutter platforms. Key principles include soft shadows, generous margins, and pill shapes.

Generate a set of aesthetic, multi-card content slides mimicking the popular Xiaohongshu style. Ideal for turning dry knowledge or marketing copy into engaging, swipeable carousels (3:4 ratio). The template includes structure for a captivating cover, multiple core points, and a strong call-to-action, using soft colors and high white space for optimal social media visibility.

A specialized presentation deck designed to assist speakers. It features dedicated slide notes (150-300 words) for comprehensive scripting and a pop-up teleprompter interface (CURRENT/NEXT/SCRIPT/TIMER cards). This tool helps users maintain a confident and fluid presentation flow, minimizing the risk of forgetting key points.

Generate highly cinematic and vintage-styled opening frames or chapter cards for films and documentaries. This template simulates the authentic look of analog film using light leak effects, 35mm grain noise, and classic letterboxed aspect ratios (2.39:1 or 16:9). Perfect for giving your video project an immediate, professional, and nostalgic film quality.

This template delivers a professional, minimalist presentation experience inspired by Apple Keynote. Each slide is designed to be a single, impactful card, perfect for storytelling, product launches, or marketing pitches. Features include smooth fade transitions, keyboard navigation (left/right arrows), and a clean, modern layout that emphasizes white space and key data points.

A comprehensive UI component designed to mimic the Spotify Now-Playing interface. It renders current music, podcast, or media content with album art, progress bar, and playback controls. Ideal for video overlays, streaming intros, or personal website hero sections, providing a highly branded and polished look.

This tool generates hyper-realistic X (Twitter) post cards, accurately simulating the platform's UI, including user profiles, content, and dynamic interaction metrics (likes, reposts, views). It is ideal for content creators and marketers needing high-fidelity social media assets for video overlays, knowledge card sharing, or professional promotional materials.

A premium prototype template designed with an Apple-tier aesthetic. Features include a soft, squircle design, ambient mesh backgrounds, double-bezel cards, button-in-button CTA elements, and subtle spring motion for a fluid, modern user experience. Ideal for modern app UI/UX.