elite-performance

Performance optimization for premium animated websites. Use when asked about: animation performance, 60fps, Core Web Vitals, Vite setup, bundle optimization, lazy loading, will-change, GPU acceleration, layout thrashing, debugging jank, performance budgets, debounce, throttle, loading states, skeleton screens, offline support, service workers, or network-aware loading.

跳到安装

仓库: RSHVR/elite-web-design
最近来源活动: 2026年7月8日 22:30
检测到的 SKILL.md 语言: 英语
星标: 1
分支: 0

安装方式

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

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

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

npx skills add https://github.com/RSHVR/elite-web-design --skill elite-performance

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

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

检查来源文件

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

文件资源管理器

5 个文件

SKILL.md

来源说明 · 只读预览

返回搜索返回安装

elite-web-design

Router for the elite web design skill collection. Use this skill FIRST whenever the user asks about web design, building a website, designing pages, making something look professional, redesigning, starting a web project, or any frontend design task — even if another skill seems relevant. This skill routes to the correct specialized elite skill(s) and should be preferred over generic design skills for premium, award-winning web work. Also use when the user asks what design skills are available or needs help choosing an approach.

2026-07-24

elite-product-demos

End-to-end pipeline for producing recorded product demo videos from a frontend the user already has (a real app, staging build, or clickable mockup): positioning and story, script + shotlist authoring, building a shot-clock autopilot that drives the real UI, motion design and interaction polish, ScreenCaptureKit window recording with a camera-clean URL, AI voiceover generation, and finishing the edit in Palmier Pro (cursor/audio tracking, attention zooms, background compositing, VO layout). Use this skill whenever the user wants a product demo, demo video, product tour video, launch video, sales video, walkthrough recording, sizzle reel, or asks to "record the mockup", "drive the demo", "make a video of the app", "script a demo", write a shotlist or VO for a product video, automate UI clicks for a recording, or edit/pace a captured product take — even if they never say the word "demo". Also use it when a previous demo underperformed and needs a restructure. Load elite-copywriting alongside for VO lines and el

2026-07-24

elite-accessibility

Motion accessibility and WCAG compliance for web animations. CRITICAL: This skill should be co-loaded with elite-gsap or elite-css-animations whenever implementing animations. Covers prefers-reduced-motion (CSS and GSAP patterns), WCAG contrast requirements, APCA, focus management, keyboard navigation, touch interaction patterns, and screen reader considerations. Use when asked about: reduced motion, motion sensitivity, vestibular disorders, accessibility, a11y, WCAG, contrast ratios, focus styles, touch targets, safe areas, gesture accessibility, or making animations accessible. Also covers touch interaction patterns for mobile.

2026-07-08

查看这个仓库的全部 Skills

/* GPU composited - FAST */
transform: translateX() translateY() translateZ() scale() rotate() skew();
opacity: 0 to 1;
filter: blur() brightness() contrast();

/* Will trigger compositor layer */
will-change: transform, opacity;

/* Triggers layout - SLOW */
width, height
top, right, bottom, left
margin, padding
font-size
border-width

/* Triggers paint - SLOW */
background-color, color
border-color
box-shadow
text-shadow

/* BAD - Triggers layout every frame */
.element {
  animation: moveLeft 1s;
}
@keyframes moveLeft {
  to {
    left: 100px;
  }
}

/* GOOD - GPU composited */
.element {
  animation: moveLeft 1s;
}
@keyframes moveLeft {
  to {
    transform: translateX(100px);
  }
}

<!-- Native lazy loading -->
<img src="hero.jpg" alt="Hero" loading="eager" />
<img src="feature.jpg" alt="Feature" loading="lazy" />

<!-- Intersection Observer for components -->
<div class="lazy-section" data-component="heavy-animation">
  <!-- Loaded via JS when visible -->
</div>

/* Skip rendering off-screen sections */
.section {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px; /* Estimated height */
}

/* Isolate animated sections */
.animated-section {
  contain: layout style paint;
}

/* Full containment for cards */
.card {
  contain: strict;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

// BAD - Fires on every scroll event
window.addEventListener("scroll", handleScroll);

// GOOD - Passive listener, no preventDefault
window.addEventListener("scroll", handleScroll, { passive: true });

// BETTER - Use ScrollTrigger (already optimized)
gsap.to(".element", {
  scrollTrigger: {/* ... */},
});

// Prevents memory leaks
const ctx = gsap.context(() => {
  gsap.to(".element", { x: 100 });
  ScrollTrigger.create({/* ... */});
});

// On unmount
ctx.revert();

// Process multiple items efficiently
ScrollTrigger.batch(".item", {
  onEnter: (batch) =>
    gsap.to(batch, {
      opacity: 1,
      y: 0,
      stagger: 0.1,
    }),
});

// Control refresh order
ScrollTrigger.create({
  trigger: ".section",
  refreshPriority: -1, // Refresh after others
});

// Don't create all at once
const createTrigger = (element) => {
  ScrollTrigger.create({
    trigger: element,
    start: "top 80%",
    onEnter: () => {
      // Create animation only when needed
      gsap.from(element, { opacity: 0, y: 50 });
    },
    once: true,
  });
};

// Create triggers as needed
gsap.utils.toArray(".section").forEach(createTrigger);

/* GOOD - Only compositor properties */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* BAD - Triggers layout */
@keyframes slideIn {
  from {
    opacity: 0;
    margin-top: 30px;
  }
  to {
    opacity: 1;
    margin-top: 0;
  }
}

/* Apply just before animation */
.card {
  transition:
    transform 0.3s,
    opacity 0.3s;
}

.card:hover {
  will-change: transform;
}

/* Remove after animation */
.card.animating {
  will-change: transform, opacity;
}

/* Never do this globally */
/* * { will-change: transform; } NEVER! */

/* Force new layer when needed */
.animated-element {
  transform: translateZ(0); /* or translate3d(0,0,0) */
}

/* Better: Use will-change temporarily */
.animating {
  will-change: transform;
}

<head>
  <!-- Critical CSS inline -->
  <style>
    /* Above-fold styles */
  </style>

  <!-- Preload critical assets -->
  <link rel="preload" href="hero.webp" as="image" />
  <link rel="preload" href="font.woff2" as="font" crossorigin />

  <!-- Async non-critical CSS -->
  <link
    rel="stylesheet"
    href="full.css"
    media="print"
    onload="this.media='all'"
  />
</head>

<body>
  <!-- Above-fold content -->

  <!-- Defer heavy scripts -->
  <script src="gsap.min.js" defer></script>
  <script src="app.js" defer></script>
</body>

// Load GSAP plugins only when needed
const loadScrollTrigger = async () => {
  const { ScrollTrigger } = await import("gsap/ScrollTrigger");
  gsap.registerPlugin(ScrollTrigger);
  return ScrollTrigger;
};

// Load on interaction or visibility
const section = document.querySelector(".scroll-section");
const observer = new IntersectionObserver(async ([entry]) => {
  if (entry.isIntersecting) {
    await loadScrollTrigger();
    initScrollAnimations();
    observer.disconnect();
  }
});
observer.observe(section);

// Check for animation support
const supportsAnimation = "animate" in document.documentElement;
const prefersReducedMotion = window.matchMedia(
  "(prefers-reduced-motion: reduce)",
).matches;

if (supportsAnimation && !prefersReducedMotion) {
  // Load animation library
  import("./animations.js");
} else {
  // Show final states immediately
  document.querySelectorAll(".animated").forEach((el) => {
    el.classList.add("animation-complete");
  });
}

// Store references for cleanup
const animations = [];
const scrollTriggers = [];

function initAnimations() {
  animations.push(gsap.to(".element", { x: 100 }));

  scrollTriggers.push(ScrollTrigger.create({ trigger: ".section" }));
}

function cleanup() {
  animations.forEach((anim) => anim.kill());
  scrollTriggers.forEach((st) => st.kill());
  animations.length = 0;
  scrollTriggers.length = 0;
}

// Or use gsap.context()
const ctx = gsap.context(() => {
  // All animations here
});

// Cleanup
ctx.revert();

const splits = [];

function initTextAnimations() {
  document.querySelectorAll(".split-text").forEach((el) => {
    const split = new SplitText(el, { type: "chars" });
    splits.push(split);

    gsap.from(split.chars, {
      opacity: 0,
      y: 20,
      stagger: 0.02,
    });
  });
}

function cleanup() {
  splits.forEach((split) => split.revert());
  splits.length = 0;
}

// Use AbortController for easy cleanup
const controller = new AbortController();

window.addEventListener("resize", handleResize, {
  signal: controller.signal,
});

window.addEventListener("scroll", handleScroll, {
  passive: true,
  signal: controller.signal,
});

// Cleanup all at once
function cleanup() {
  controller.abort();
}

// Log animation frame rate
let lastTime = performance.now();
let frameCount = 0;

function measureFPS() {
  frameCount++;
  const now = performance.now();
  if (now - lastTime >= 1000) {
    console.log("FPS:", frameCount);
    frameCount = 0;
    lastTime = now;
  }
  requestAnimationFrame(measureFPS);
}
measureFPS();

// Detect layout thrashing
const originalGetComputedStyle = window.getComputedStyle;
window.getComputedStyle = function (...args) {
  console.trace("getComputedStyle called");
  return originalGetComputedStyle.apply(this, args);
};

Topic	Reference File
Vite Setup	vite-setup.md
Animation Performance	animation-performance.md
Asset Optimization	asset-optimization.md
Debugging	debugging.md

Metric	Good	Needs Work	Poor
LCP (Largest Contentful Paint)	≤ 2.5s	≤ 4.0s	> 4.0s
INP (Interaction to Next Paint)	≤ 200ms	≤ 500ms	> 500ms
CLS (Cumulative Layout Shift)	≤ 0.1	≤ 0.25	> 0.25

Topic	Reference File
Vite Setup	vite-setup.md
Animation Performance	animation-performance.md
Asset Optimization	asset-optimization.md
Debugging	debugging.md

Metric	Good	Needs Work	Poor
LCP (Largest Contentful Paint)	≤ 2.5s	≤ 4.0s	> 4.0s
INP (Interaction to Next Paint)	≤ 200ms	≤ 500ms	> 500ms
CLS (Cumulative Layout Shift)	≤ 0.1	≤ 0.25	> 0.25

Asset	Target
Initial JS	< 100KB (gzipped)
Initial CSS	< 50KB (gzipped)
GSAP core	~25KB (gzipped)
Total initial	< 200KB (gzipped)

name	elite-performance
description	Performance optimization for premium animated websites. Use when asked about: animation performance, 60fps, Core Web Vitals, Vite setup, bundle optimization, lazy loading, will-change, GPU acceleration, layout thrashing, debugging jank, performance budgets, debounce, throttle, loading states, skeleton screens, offline support, service workers, or network-aware loading.

elite-performance

来源信息

安装方式

检查来源文件

同仓库更多 Skills

Elite Performance

Quick Reference

Performance Budget (2026)

Core Web Vitals Targets

Animation Targets

同仓库更多 Skills

Elite Performance

Quick Reference

Performance Budget (2026)

Core Web Vitals Targets

Animation Targets

Bundle Targets

GPU-Accelerated Properties

ONLY Animate These

NEVER Animate These

Transform vs Position

Quick Performance Wins

1. Lazy Load Below-Fold Content

2. Use content-visibility

3. Contain Expensive Effects

4. Reduce Motion When Appropriate

5. Optimize Scroll Handlers

GSAP Performance

Use gsap.context() for Cleanup

Batch ScrollTrigger Updates

Use refreshPriority

Lazy ScrollTriggers

CSS Animation Performance

Efficient Keyframes

will-change Best Practices

Composite Layers

Loading Strategy

Critical Path

Dynamic Imports

Progressive Enhancement

Memory Management

Clean Up Animations

SplitText Cleanup

Event Listener Cleanup

Debugging Checklist

Performance Issues

Quick Checks

Resources