动画
UI 动画与过渡效果
material-design-3-motion
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.
frontend-design
xenitV1
Design thinking and decision-making for web UI. Use when designing components, layouts, color schemes, typography, or creating aesthetic interfaces. Teaches principles, not fixed values.
product-video
sanky369
Create animated product videos with reveals and animations. Use when creating product demos, promotional videos, or dynamic visual content.
damage-numbers
verekia
Display floating damage numbers that animate upward and fade out, with support for critical hits.
interaction-physics
sanky369
Master microinteractions, animations, transitions, and feedback systems. Create intentional, delightful interactions that guide users and provide clear feedback. Includes animation principles, timing, easing, state transitions, and best practices for performance and accessibility.
impeccable-bolder
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."
design-engineer-mindset
sanky369
Understand the Design Engineer role - bridging design and implementation. Learn to think about design as code, understand rendering pipelines, optimize animation performance, and ensure design fidelity through implementation. Use when translating designs to code, optimizing performance, or ensuring quality through development.
remotion-script-writer
sanky369
Writes detailed video scripts for Remotion based on input requirements and codebase analysis
loading-states
sanky369
Design effective loading states, skeleton screens, and empty states that maintain user confidence. Use when content takes time to load, when showing progress, or handling empty data scenarios. Triggers on "loading state", "skeleton screen", "empty state", "spinner", "progress bar", "loading animation", "zero state".
pushback
verekia
Make enemies flash white and rock back and forth when receiving damage.
low-health
verekia
Display a pulsing red vignette overlay when the player's health is low.
vr-ar
xenitV1
VR/AR development principles. Comfort, interaction, performance requirements.
slack-gif-creator
crewship-ai
Knowledge and utilities for creating animated GIFs optimized for Slack. Provides constraints, validation tools, and animation concepts. Use when users request animated GIFs for Slack like "make me a GIF of X doing Y for Slack."
ui-skills
BenjaminG
Opinionated constraints for building better interfaces with agents.
vue-best-practices
uni-helper
MUST be used for Vue.js tasks. Strongly recommends Composition API with <script setup> and TypeScript as the standard approach. Covers Vue 3, SSR, Volar, vue-tsc. Load for any Vue, .vue files, Vue Router, Pinia, or Vite with Vue work. ALWAYS use Composition API unless the project explicitly requires Options API.
frontend-design
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.
ui-design-principles
ssiumha
UI 디자인 기본 원칙 가이드. Use when creating UI components, writing frontend code, reviewing designs, or avoiding AI-looking interfaces.
frontend-design
matteocervelli
Create distinctive, production-grade frontends by composing design dimensions and tech-specific implementations
reanimated-skia-performance
andreev-danila
"Write and review high-performance React Native animations and 2D graphics using react-native-reanimated (v4+) and @shopify/react-native-skia (Canvas scenes, runtime effects/shaders). Use for: gesture-driven interactions, spring/timing transitions, layout/mount animations, Reanimated CSS transitions/animations, Skia drawings, animated shader uniforms, path/vector interpolation, dev-mode tuning panels (sliders), and diagnosing animation jank (JS thread stalls, excessive re-renders, per-frame allocations)."
kanpeki
fellipeutaka
"Use Kanpeki component library in React projects. Activate when user wants to add, use, customize, or compose accessible UI components from Kanpeki (@kanpeki/*). Covers installation, component patterns, forms, theming, and dark mode with React Aria Components + Tailwind CSS 4.1 + CVA."
frontend-design
fellipeutaka
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.
motion-design
richtabor
Provides motion design guidance for UI components. Triggers on animation requests ("animate this", "add transition", "motion for"), refinement requests ("clean up this animation", "clean up the motion", "this feels too fast/slow", "make this feel more alive/natural"), and questions about easing, timing, or micro-interactions.
frontend-design-system
oikon48
フロントエンドUIデザインを洗練された独自性のあるスタイルで生成します。ランディングページ、ダッシュボード、Webアプリケーションのデザイン、UIコンポーネント作成時に使用してください。「AIっぽい」汎用デザインを避け、プロフェッショナルで記憶に残るUIを実現します。
dokie-ai-ppt
MYZY-AI
AI presentation generator. Create professional HTML slides through conversation. Triggers: create/edit PPT, presentation, slides, deck, keynote, pitch deck, quarterly report, product intro, training materials, roadshow, work report. Core: requirement analysis, outline generation, theme selection, HTML slide generation, local preview.