framer-motion

Framer Motion performance optimization guidelines. This skill should be used when writing, reviewing, or refactoring React animations with Framer Motion to ensure optimal performance patterns. Triggers on tasks involving motion components, animations, gestures, layout transitions, scroll-linked effects, and SVG animations.

跳到安装查看文件

仓库: pproenca/dot-skills
最近来源活动: 2026年5月27日 09:50
检测到的 SKILL.md 语言: 英语
星标: 211
分支: 18

安装方式

默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。

用 AI 助手安装

复制这段 Prompt，发给你正在使用的 AI 助手。

Follow https://skillsmp.com/skill-install/prompt.md to install only the Agent Skill at https://github.com/pproenca/dot-skills/tree/master/skills/.experimental/framer-motion.

直接命令不会经过审查 Prompt；运行前请先检查来源。

npx skills add https://github.com/pproenca/dot-skills --skill framer-motion

命令会保持在同一行。复制前请横向滚动并检查完整内容。

想先保存到本地？可下载 SkillsMP 当前能够提供的文件。

检查来源文件

决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。

文件资源管理器

47 个文件

SKILL.md

来源说明 · 只读预览

name: framer-motion
description: Framer Motion performance optimization guidelines. This skill should be used when writing, reviewing, or refactoring React animations with Framer Motion to ensure optimal performance patterns. Triggers on tasks involving motion components, animations, gestures, layout transitions, scroll-linked effects, and SVG animations.

# Community Framer Motion Best Practices Comprehensive performance optimization guide for Framer Motion animations in React applications. Contains 42 rules across 9 categories, prioritized by impact to guide automated refactoring and code generation. ## When to Apply Reference these guidelines when: - Adding animations to React components with Framer Motion - Optimizing bundle size for animation-heavy applications - Preventing unnecessary re-renders during animations - Implementing layout transitions or shared element animations - Building scroll-linked or gesture-based interactions ## Rule Categories by Priority | Priority | Category | Impact | Prefix | |----------|----------|--------|--------| | 1 | Bundle Optimization | CRITICAL | `bundle-` | | 2 | Re-render Prevention | CRITICAL | `rerender-` | | 3 | Animation Properties | HIGH | `anim-` | | 4 | Layout Animations | HIGH | `layout-` | | 5 | Scroll Animations | MEDIUM-HIGH | `scroll-` | | 6 | Gesture Optimization | MEDIUM | `gesture-` | | 7 | Spring & Physics | MEDIUM | `spring-` | | 8 | SVG & Path Animations | LOW-MEDIUM | `svg-` | | 9 | Exit Animations | LOW | `exit-` | ## Quick Reference ### 1. Bundle Optimization (CRITICAL) - [`bundle-lazy-motion`](references/bundle-lazy-motion.md) - Use LazyMotion and m component instead of motion - [`bundle-dynamic-features`](references/bundle-dynamic-features.md) - Dynamically import motion features - [`bundle-dom-animation`](references/bundle-dom-animation.md) - Use domAnimation for basic animations - [`bundle-use-animate-mini`](references/bundle-use-animate-mini.md) - Use mini useAnimate for simple cases - [`bundle-strict-mode`](references/bundle-strict-mode.md) - Enable strict mode to catch accidental imports ### 2. Re-render Prevention (CRITICAL) - [`rerender-motion-value`](references/rerender-motion-value.md) - Use useMotionValue instead of useState - [`rerender-use-transform`](references/rerender-use-transform.md) - Derive values with useTransform - [`rerender-stable-callbacks`](references/rerender-stable-callbacks.md) - Keep animation callbacks stable - [`rerender-variants-object`](references/rerender-variants-object.md) - Define variants outside component - [`rerender-animate-prop`](references/rerender-animate-prop.md) - Use stable animate values - [`rerender-motion-value-event`](references/rerender-motion-value-event.md) - Use motion value events ### 3. Animation Properties (HIGH) - [`anim-transform-properties`](references/anim-transform-properties.md) - Animate transform properties - [`anim-opacity-filter`](references/anim-opacity-filter.md) - Prefer opacity and filter for visual effects - [`anim-hardware-acceleration`](references/anim-hardware-acceleration.md) - Leverage hardware acceleration - [`anim-will-change`](references/anim-will-change.md) - Use willChange prop judiciously - [`anim-independent-transforms`](references/anim-independent-transforms.md) - Animate transforms independently - [`anim-keyframes-array`](references/anim-keyframes-array.md) - Use keyframe arrays for sequences ### 4. Layout Animations (HIGH) - [`layout-dependency`](references/layout-dependency.md) - Use layoutDependency to limit measurements - [`layout-position-size`](references/layout-position-size.md) - Use layout="position" or "size" appropriately - [`layout-group`](references/layout-group.md) - Group related layout animations - [`layout-id-shared`](references/layout-id-shared.md) - Use layoutId for shared element transitions - [`layout-scroll`](references/layout-scroll.md) - Add layoutScroll to scrollable ancestors ### 5. Scroll Animations (MEDIUM-HIGH) - [`scroll-use-scroll`](references/scroll-use-scroll.md) - Use useScroll hook for scroll-linked animations - [`scroll-use-spring-smooth`](references/scroll-use-spring-smooth.md) - Smooth scroll animations with useSpring - [`scroll-element-tracking`](references/scroll-element-tracking.md) - Track specific elements entering viewport - [`scroll-offset-configuration`](references/scroll-offset-configuration.md) - Configure scroll offsets - [`scroll-container-ref`](references/scroll-container-ref.md) - Track scroll within specific containers ### 6. Gesture Optimization (MEDIUM) - [`gesture-while-props`](references/gesture-while-props.md) - Use whileHover/whileTap instead of handlers - [`gesture-variants-flow`](references/gesture-variants-flow.md) - Let gesture variants flow to children - [`gesture-drag-constraints`](references/gesture-drag-constraints.md) - Use dragConstraints ref for boundaries - [`gesture-drag-elastic`](references/gesture-drag-elastic.md) - Configure dragElastic for natural feel - [`gesture-tap-cancel`](references/gesture-tap-cancel.md) - Use onTapCancel for interrupted gestures ### 7. Spring & Physics (MEDIUM) - [`spring-physics-based`](references/spring-physics-based.md) - Use physics-based springs for interruptibility - [`spring-damping-ratio`](references/spring-damping-ratio.md) - Configure damping to control oscillation - [`spring-mass-inertia`](references/spring-mass-inertia.md) - Adjust mass for heavier/lighter feel - [`spring-use-spring-hook`](references/spring-use-spring-hook.md) - Use useSpring for reactive values ### 8. SVG & Path Animations (LOW-MEDIUM) - [`svg-path-length`](references/svg-path-length.md) - Use pathLength for line drawing animations - [`svg-motion-components`](references/svg-motion-components.md) - Use motion.path and motion.circle - [`svg-viewbox-animation`](references/svg-viewbox-animation.md) - Animate viewBox for zoom effects - [`svg-morph-matching-points`](references/svg-morph-matching-points.md) - Match point counts for morphing ### 9. Exit Animations (LOW) - [`exit-animate-presence`](references/exit-animate-presence.md) - Wrap conditional renders with AnimatePresence - [`exit-unique-keys`](references/exit-unique-keys.md) - Provide unique keys for AnimatePresence children - [`exit-mode-wait`](references/exit-mode-wait.md) - Use mode="wait" for sequential transitions ## How to Use Read individual reference files for detailed explanations and code examples: - [Section definitions](references/_sections.md) - Category structure and impact levels - [Rule template](assets/templates/_template.md) - Template for adding new rules ## Reference Files | File | Description | |------|-------------| | [references/_sections.md](references/_sections.md) | Category definitions and ordering | | [assets/templates/_template.md](assets/templates/_template.md) | Template for new rules | | [metadata.json](metadata.json) | Version and reference information |

在 GitHub 查看

返回搜索返回安装

ray-llm

LLM workloads on open-source Ray (pinned to 2.57) — OpenAI-compatible serving with ray.serve.llm (vLLM-backed LLMConfig + build_openai_app) and batch inference with ray.data.llm (build_processor). Corrects the stale defaults a model produces — the archived ray-llm repo and its YAML configs, hand-rolled vLLM engines inside plain Serve deployments, the removed build_llm_processor name, deprecated boolean stage flags, top-level LLMServer/LLMRouter imports, free-form accelerator strings, one-deployment-per-LoRA-adapter designs — with the 2.57 idioms (stage configs, placement_group_config over hand-rolled PGs, deployment_config autoscaling, dynamic LoRA multiplexing, prefix-cache-affinity routing, the full OpenAI endpoint surface). Use when writing, reviewing, or productionizing LLM serving or batch inference on Ray. Classic-ML Ray (Train/Tune/Data/Serve/clusters) lives in the sibling ray skill.

2026-08-15

ray

Production Ray (open-source, pinned to 2.57) for classic-ML workloads from training to serving — Ray Train, Tune, Data, Serve, Core, and cluster deployment on KubeRay. Corrects the older-corpus defaults a model reaches for (ray.air session reporting, Trainer-inside-Tuner, tune.run, map_batches concurrency=, DatasetPipeline/to_torch, max_concurrent_queries, RayServeHandle + ray.get, Deployment.deploy, ray.state, ray.get-in-a-loop) with the 2.57 idioms that replaced them (Train V2 defaults, driver-function tuning, compute strategies, streaming datasets, DeploymentHandle/DeploymentResponse, serve build/deploy, ray.util.state, KubeRay CRDs and Jobs API). Use when writing, reviewing, or productionizing Python code that touches Ray distributed training, data pipelines, hyperparameter tuning, model serving, or Ray cluster operations. LLM serving/batch-inference on Ray lives in the sibling ray-llm skill.

2026-08-15

mlflow-3

MLflow 3 (open-source, pinned to 3.15) for classic-ML MLOps — logging and registering models, promoting versions across dev/staging/prod, standing up a tracking server, evaluating with gates, and serving. Corrects the MLflow 2-era defaults a model reaches for (artifact_path, registry stages and get_latest_versions, top-level mlflow.evaluate with baseline_model, runs-URI registration, pickle serialization, mlruns file stores, MLServer serving) with the MLflow 3 idioms that replaced them (named LoggedModels, aliases and copy_model_version, models.evaluate plus validate_evaluation_results, skops/torch.export defaults, database backends, the FastAPI scoring server). Use when writing, reviewing, or migrating Python code that touches MLflow tracking, the model registry, evaluation, or serving.

2026-08-15

查看这个仓库的全部 Skills

framer-motion

来源信息

安装方式

用 AI 助手安装

检查来源文件

同仓库更多 Skills

用 AI 助手安装

同仓库更多 Skills