Skill UI

Helps designers explore trending Coolors palettes, capture hex codes, and map selections into Tailwind configs or curated fallbacks when the browser is unavailable, ensuring contrast and role guidance for frontend themes.

A comprehensive guide for designing cross-device applications across the Apple ecosystem. This skill helps developers adhere to the specific Human Interface Guidelines (HIG) for various platforms—including iOS, macOS, watchOS, tvOS, and visionOS. It emphasizes adapting design principles (e.g., touch-first vs. pointer-based vs. spatial) while maintaining brand consistency, ensuring a native and optimal user experience regardless of the operating system.

Visits target URLs to capture screenshots and inspect pages, then extracts palettes, typography, layouts, and repeatable UI patterns so design teams can document inspiration for new projects.

Utility to browse Google Fonts, capture trending faces, suggest pairings, and output import snippets plus Tailwind config so frontend teams can finalize typography systems quickly.

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.

A comprehensive guide detailing the aesthetic and technical implementation of AI-native user interfaces for web and mobile applications. It emphasizes conversational flow, adaptive layouts, and generative state visual cues, providing CSS, SwiftUI, and Flutter code examples.

A comprehensive style guide for implementing the Cyber Y2K aesthetic across web and mobile applications. This design package captures the retro-futuristic blend of late 90s/early 2000s digital culture, modern glitch art, and iridescent holographic gradients. It provides detailed code examples using CSS, SwiftUI, and Flutter to achieve key effects like RGB splitting, animated gradients, and aggressive vector typography.