Animation
UI animations and transitions
procedural-weather
by CK42BB
Generate dynamic procedural weather effects in Three.js using WebGPU compute with WebGL2 fallback. Covers rain (drizzle to monsoon), snow (flurries to blizzard), hail, fog and mist (ground fog, volumetric), lightning (bolt, sheet, cloud-internal), dust/sandstorms, wind-driven debris, rainbows, aurora borealis, and a weather state machine for smooth transitions. All precipitation uses GPU particle systems with collision, splashes, and accumulation. Provides per-effect lighting changes, ambient sound cue hints, and camera post-processing (wet lens, frost). Use when building weather systems, atmospheric effects, environmental ambience, climate simulation, or any scene needing dynamic weather. Triggers: "procedural weather", "rain effect", "snow particles", "lightning", "fog shader", "weather system", "storm", "blizzard", "sandstorm", "aurora", "rainbow", "precipitation", "weather transition", "wet lens".
ios-hig-reference
by beshkenadze
Apple Human Interface Guidelines quick reference. Use when needing iOS design guidelines, HIG rules, or Apple design best practices.
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.
headlessui-react
by peixotorms
Use when building with HeadlessUI for React — unstyled, accessible UI components. Covers compound component API, render props, as/asChild prop, Dialog, Menu, Listbox, Combobox, Switch, Disclosure, Popover, RadioGroup, Tabs, Transitions, Floating UI positioning, focus management, keyboard navigation, ARIA patterns, and playground examples via MCP tools.
frontend-design
by icartsh
높은 디자인 품질을 갖춘 독특하고 운영 수준(production-grade)의 프런트엔드 인터페이스를 생성합니다. 웹 컴포넌트, 페이지, 아티팩트, 포스터 또는 애플리케이션(예: 웹사이트, 랜딩 페이지, 대시보드, React 컴포넌트, HTML/CSS 레이아웃 또는 모든 웹 UI의 스타일링/미화)을 구축할 때 이 SKILL을 사용하세요. 일반적인 AI 미학을 피하고 창의적이고 세련된 코드와 UI 디자인을 생성합니다.
text-animation-copier
by andchir
Copy and recreate text animations from video examples using Remotion. This skill analyzes video frames to identify text animation patterns (timing, movement, styling, effects) and generates corresponding Remotion React components. Use when the user asks to replicate, copy, or recreate text animations from a video sample.
agentic-website-design
by melvinmt
Design and build websites using AI coding agents with static site generators. Covers Astro-first workflow, iterative visual refinement via browser feedback, skill-enhanced prompting (frontend-design, copywriting), animations, and high-bar polish loops. Use when building a website with an AI agent, designing landing pages, or iterating on web design with LLM assistance.
slidev
by marcoshaber99
Use this skill when working with Slidev presentations. Helps with slide syntax, frontmatter configuration, layouts, animations, code highlighting, diagrams, themes, and exporting. Prevents common mistakes like incorrect asset paths, deprecated features, and non-existent layouts.
frontend-design-ultimate
by kesslerio
Create distinctive, production-grade static sites with React, Tailwind CSS, and shadcn/ui — no mockups needed. Generates bold, memorable designs from plain text requirements with anti-AI-slop aesthetics, mobile-first responsive patterns, and single-file bundling. Use when building landing pages, marketing sites, portfolios, dashboards, or any static web UI. Supports both Vite (pure static) and Next.js (Vercel deploy) workflows.
elite-gsap
by RSHVR
Complete GSAP (GreenSock Animation Platform) reference for elite web animations. Covers ScrollTrigger, SplitText, Flip, MorphSVG, DrawSVG, MotionPath, Observer, Draggable, timelines, and framework integration. 2026 UPDATE: All GSAP plugins are now 100% FREE (Webflow acquisition). Use when asked about: GSAP, gsap, GreenSock, ScrollTrigger, scroll animations, SplitText, text animations, Flip plugin, layout animations, MorphSVG, DrawSVG, SVG animations, complex animations, animation library, pinned sections, horizontal scroll, parallax effects, or any sophisticated web animation needs.
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.
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.
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
material-design-3-motion
by shelbeely
Applies Material Design 3 Expressive motion and animation principles to create natural, intuitive, and engaging user experiences. Use this when implementing animations, transitions, micro-interactions, or when the user asks to apply Material Design 3 motion guidelines.
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
unity-review-asset
by cuozg
PR asset review — shaders, textures, animations, import settings. Triggers — 'review assets', 'asset review', 'check assets', 'shader review', 'texture review'.
frontend-design
by wollfoo
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. Sử dụng khi: thiết kế frontend, wireframe, mockup, prototype.
river-surrender-mindset
by Coowoolf
Use when exhausted by constant striving, when winning no longer brings joy, or when navigating uncertain life transitions where logic fails
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.
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.
remotion-best-practices
by vishalsachdev
Best practices for Remotion - Video creation in React
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.