Animation
UI animations and transitions
framer-motion-interactive-animation
by Agentient
Framer Motion animations including motion components, gestures, entrance/exit, and scroll triggers. PROACTIVELY activate for: (1) adding hover and tap animations, (2) implementing entrance/exit transitions with AnimatePresence, (3) creating scroll-triggered animations. Triggers: "animate", "framer motion", "whileHover"
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.
moving-rainbow
by vishalsachdev
Generate MicroPython programs for the Moving Rainbow LED strip educational project using Raspberry Pi Pico with NeoPixel strips and button controls.
interaction-design
by pluginagentmarketplace
Master interaction design - patterns, micro-interactions, user flows, affordances, feedback
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.
remotion-best-practices
by alfredang
Best practices for Remotion - Video creation in React
flutter-flame-games
by Mauriciog87
Comprehensive guide for building 2D games with Flutter and Flame Engine. Covers game architecture, sprites, animations, collision detection, input handling (keyboard/joystick/gamepad), camera systems, Tiled maps, audio, particles, and UI overlays. Use when creating or refactoring Flutter games.
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."
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.
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.
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."
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.
phonics-splitter
by maominvlang-jpg
自然拼读单词分析与教学内容生成工具，专为中小学生设计。当用户输入任意英语单词，需要进行音节切分、拼读规则分析、生成教学讲解、或输出自然拼读动画数据时，必须使用此 skill。触发场景包括：分析单词拼读结构、识别元音/辅音规则、应用动物规则切分音节、生成双语教学脚本、输出 animation_data.json 动画数据、解释 Magic E / Bossy R / Digraph 等拼读特殊规则。只要用户提到"自然拼读"、"phonics"、"音节切分"、"拆分单词"、"拼读规则"、"phonics动画"，就立即调用此 skill。
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.
impeccable-bolder
by SebastiaanWouters
"Skills-only equivalent of impeccable.style /bolder. Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability. Use for frontend and UI design tasks."
frontend-design
by SebastiaanWouters
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications. Generates creative, polished code that avoids generic AI aesthetics.
mobile-ux-fixer
by mediawave-dev
"Comprehensive mobile UX audit, visual inspection, and auto-fix skill for web projects. Detects and fixes 40+ mobile issues across 10 phases: viewport/layout, scroll/parallax, animations, images, touch/forms, typography, Core Web Vitals, SEO/PWA, accessibility, RTL, and dark mode. Uses Playwright MCP for visual inspection. Use when user says 'fix mobile', 'mobile audit', 'check mobile', 'mobile issues', 'looks broken on phone', 'scroll jump', 'address bar jump', 'parallax mobile', 'mobile test', 'mobile performance', 'core web vitals mobile', 'תקן מובייל', 'בעיות במובייל', 'קופץ בגלילה', 'נראה רע בטלפון', 'בדיקת מובייל', or after deploying and testing on a real device."
mobile-app-designer
by CAPHTECH
"iOS/Androidモバイルアプリのデザインを体系的に行うスキル。Apple HIG・Material Design 3などプラットフォームガイドラインに準拠し、ナビゲーション・レイアウト・コンポーネント・モーション・アクセシビリティを適切に設計する。Use when: 「モバイルアプリをデザインして」「iOSアプリのUIを設計して」「Androidアプリの画面を作って」「モバイルのナビゲーションを設計して」「タッチUIを改善して」「アプリのアクセシビリティを対応して」と言われた時。"
essay-outline
by clyderankin
Create the structural skeleton of your essay before drafting—the arc, sections, and throughline
beautiful-ui
by apetcu
Build stunning glassmorphism dark-mode interfaces with Next.js and Tailwind CSS v4. Use when creating any frontend UI, component, page, or application. Specializes in glass-like translucent surfaces, luminous color palettes on dark backgrounds, fluid animations with Framer Motion, and premium visual polish. Always generates dark-mode-first, glassmorphic, production-grade code with exceptional aesthetic quality.
UX Designer
by dennytosp
Expert UI/UX design guidance for building unique, accessible, and user-centered interfaces. Use when designing interfaces, making visual design decisions, choosing colors/typography, implementing responsive layouts, or when user mentions design, UI, UX, styling, or visual appearance. Always ask before making design decisions.