Animation
UI animations and transitions
gsap-master
by su69ar
Full GSAP v3 mastery for interactive websites: core tweens/timelines, eases, staggers, keyframes, modifiers, utilities, plus complete plugin coverage (ScrollTrigger, ScrollTo, ScrollSmoother, Flip, Draggable, Inertia, Observer, MotionPath, DrawSVG, MorphSVG, SplitText, ScrambleText, TextPlugin, Physics2D/PhysicsProps, CustomEase/Wiggle/Bounce, GSDevTools). Includes Next.js/React patterns (useGSAP, gsap.context cleanup), responsive matchMedia, reduced-motion accessibility, performance best practices, and debugging playbooks.
glimmer
by MaTriXy
Design and build stunning transparent, glassmorphic, and AR-inspired user interfaces that simulate the look and feel of heads-up displays, smart glasses, and holographic overlays — across web (HTML/CSS/React), SwiftUI, Jetpack Compose, and React Native. Use this skill whenever the user asks for glass UI, transparent UI, HUD interfaces, AR/XR mockups, holographic dashboards, futuristic interfaces, sci-fi UI, heads-up displays, smart glasses UI, visionOS interfaces, or any interface that should feel like it's floating over the real world. Also trigger when users mention "glassmorphism", "frosted glass", "translucent UI", "ambient display", "overlay interface", ".ultraThinMaterial", "Material3 transparent", or want to create interfaces inspired by Google Glass, Apple Vision Pro, Meta glasses, Android XR, or any wearable display technology. Trigger for native mobile glass effects in SwiftUI, Jetpack Compose, or React Native. Even if the user just says "make it look futuristic" or "floating UI" — this is the skill to use.
frontend-design
by mrsknetwork
Create distinctive, production-grade frontend interfaces with high design quality using structured SOPs and comprehensive UI/UX guidelines. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Also use when the user asks about typography, padding, spacing, sizing, layout systems, font pairing, color palettes, animation/motion design, responsive design, or UI component patterns. Generates creative, polished code and UI design that avoids generic AI aesthetics. Trigger this skill for any frontend design, UI/UX design, web design, component creation, or design system task.
accessibility-a11y
by canatufkansu
Semantic HTML, keyboard navigation, focus states, ARIA labels, skip links, and WCAG contrast requirements. Use when ensuring accessibility compliance, implementing keyboard navigation, or adding screen reader support.
figma-to-code
by kyuhyi
Figma 디자인을 고성능 Next.js와 Tailwind CSS 코드로 변환하는 스킬. 픽셀 퍼펙트한 반응형 컴포넌트 구현을 지원합니다.
wiggle
by Maryanohit549
Create animated logo files (Lottie JSON, GIF, MP4) from static logo images. This skill should be used when users provide a logo image (PNG/SVG/JPG) and request any kind of logo animation, motion graphics, animated logo effect, waveform animation, bouncing logo, rotating logo, pulsing logo, wiggling logo, or ask to "animate my logo" or "make my logo move". Outputs standalone animation files (not React/HTML artifacts). Generates Lottie JSON with automatic GIF/MP4 rendering, perfect loop validation, and professional motion design patterns.
scroll-experience
by liuchiawei
"Expert in building immersive scroll-driven experiences - parallax storytelling, scroll animations, interactive narratives, and cinematic web experiences. Like NY Times interactives, Apple product pages, and award-winning web experiences. Makes websites feel like experiences, not just pages. Use when: scroll animation, parallax, scroll storytelling, interactive story, cinematic website."
motion-js
by jis3r
Build, debug, and optimize Motion animations in vanilla JavaScript. Use when the user asks for Motion/motion.dev or the motion package in a non-React, non-Vue context, or explicitly wants vanilla JS animation. Prioritize this skill for complex web animations (staggered reveals, scroll-linked effects, in-view triggers, hover/press gestures, motion values/effects) and migration from GSAP/WAAPI to Motion JS. Do not use for motion/react or framework-specific Motion APIs unless the user explicitly requests them.
frontend-design
by huminglong
创建具有高品质设计、独特且适用于生产环境的 frontend 界面。当用户要求构建网页组件、页面、工件、海报或应用程序时（例如网站、着陆页、仪表板、React 组件、HTML/CSS 布局，或对任何网页 UI 进行样式化/美化时），使用这项技能。生成富有创意、精致且避免通用 AI 美学的代码和 UI 设计。
frontend-design
by mokbhai
Create distinctive, production-grade frontend interfaces using Tailwind CSS with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, Astro projects, or when styling/beautifying any web UI). Optimized for Astro + React tech stack. Generates creative, polished code and UI design that avoids generic AI aesthetics.
ui-skills
by simonlee2
This skill should be used when the user asks to "build UI", "create interface", "design components", "implement frontend", or needs guidance on building accessible, performant interfaces with proper animation, typography, and component patterns. Provides opinionated constraints for building better interfaces with agents.
reka-ui
by aksuharun
Use when building accessible Vue.js interfaces with Reka UI (Radix Vue).
moving-icons
by jis3r
Integrate and use the Moving Icons library (@jis3r/icons) in Svelte 5/SvelteKit apps. Use when users ask for animated (Lucide-style) icons in Svelte, mention @jis3r/icons or moving icons, icon import/usage patterns, hover-controlled animation with the animate prop, icon selection, theming, sizing, or migration from @lucide/svelte to animated icons.
wcag-audit-operable-motion-deep
by Jkense
Animation and movement accessibility rules for dynamic interface elements
animator
by SebastiaanWouters
Create beautiful, performant, and accessible web animations with Motion One (motion.dev). Use when requests mention Motion One, motion.dev, WAAPI-based animation, UI micro-interactions, scroll-linked motion, staggered reveals, easing/timing tuning, animation performance optimization, or reduced-motion accessibility in vanilla JS/React/Vue apps.
processing-media
by Git-Fg
"Handles video editing, ffmpeg processing, and visual analysis. Use when transforming raw footage into polished output or analyzing visual content."
remotion-best-practices
by xdrshjr
Best practices for Remotion - Video creation in React
base-ui
by noklip-io
Base UI reference and workflows for @base-ui/react (unstyled, accessible React components, composition utilities, and form helpers). Use when implementing Base UI components, portals, styling/state hooks, render-prop composition, eventDetails customization, animations, forms/validation, TypeScript typing, CSP/RTL utilities, or checking Base UI docs, issues, or releases.
build
by AhmedHamadto
Prompt enhancer — takes a simple one-liner and expands it into a detailed professional specification, then executes it. Use like /build Create me a REST API for a todo app.
frontend-design
by le-dat
Create bold, high-end, production-grade frontend interfaces with the mindset of a professional UI/UX designer and frontend engineer.
impeccable-delight
by SebastiaanWouters
"Skills-only equivalent of impeccable.style /delight. Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful. Use for frontend and UI design tasks."
impeccable-quieter
by SebastiaanWouters
"Skills-only equivalent of impeccable.style /quieter. Tone down overly bold or visually aggressive designs. Reduces intensity while maintaining design quality and impact. Use for frontend and UI design tasks."
impeccable-animate
by SebastiaanWouters
"Skills-only equivalent of impeccable.style /animate. Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use for frontend and UI design tasks."
remotion-best-practices
by Jackiexiao
"Remotion best practices for creating videos in React."