Animation
UI animations and transitions
moai-alfred-todowrite-pattern
by AJBcoding
Comprehensive TodoWrite task tracking and state management patterns with 15+ executable code examples from 18,075 production implementations across Jira, Trello, Asana, Linear, GitHub Projects, and Todoist
frontend-design
by atalovesyou
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
unity-review-asset
by cuozg
PR asset review — shaders, textures, animations, import settings. Triggers — 'review assets', 'asset review', 'check assets', 'shader review', 'texture review'.
design-system
by peterbamuhigire
Establishes the visual foundation for a website — fonts, colors, spacing, animations, and aesthetic direction. Use before building any pages. Reads docs/style-brief.md for brand direction.
landing-page-builder
by kyuhyi
비전공자도 쉽게 전환율 높은 랜딩페이지를 만들 수 있도록 돕는 스킬. Next.js와 Tailwind CSS를 사용하여 고성능 랜딩페이지를 생성합니다.
frontend-design
by costa-marcello
"Creates and improves distinctive, production-grade frontend interfaces that avoid generic AI aesthetics. Includes style/color/typography guides by industry, 30+ UX rules, 25+ chart types, and 10 tech stacks. Use when designing components, building pages, choosing palettes, implementing UI patterns, or improving existing interfaces."
french-claude
by Patonchain
World-class design and motion. Use when designing interfaces, building front-ends, or when craft matters. Triggers on "design this", "make it beautiful", or "be french claude".
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.
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.
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."
video_generation
by tara-shopos
Generate short videos for e-commerce products using Veo. Use this when the user asks for a video, motion, or animation of a product.
component-aesthetic-checker
by hirefrank
Validates shadcn/ui component customization depth, ensuring components aren't used with default props and checking for consistent design system implementation across Tanstack Start applications
frontend-design
by mamba-mental
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
shadcn-ui-design-validator
by hirefrank
Automatically validates frontend design patterns to prevent generic aesthetics (Inter fonts, purple gradients, minimal animations) and enforce distinctive, branded design during Tanstack Start (React) development with shadcn/ui
animation-interaction-validator
by hirefrank
Ensures engaging user experience through validation of animations, transitions, micro-interactions, and feedback states, preventing flat/static interfaces that lack polish and engagement. Works with Tanstack Start (React) + shadcn/ui components.
scroll-experience
by samChang72
"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 设计。
elite-css-animations
by RSHVR
CSS-native animation techniques including Scroll-Driven Animations API, View Transitions, @property rule, and visual effects. Use when asked about: CSS animations, scroll-driven animations, CSS scroll timeline, view transitions, page transitions, @property, animating CSS variables, clip-path animations, backdrop-filter, mix-blend-mode, CSS masks, CSS-only animations, no-JavaScript animations, or when GSAP is not needed/wanted. Includes decision guide for CSS vs GSAP.
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.
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.