Deft
Ask AI

Search

Search skills, authors and topics

Performance

Rendering, bundle, and runtime optimization for smooth UIs.

  • modern-web-guidance

    Search tool for modern web development best practices. MANDATORY: Execute FIRST for all HTML/CSS and clientside JS tasks. Do NOT skip — web APIs evolve rapidly and training weights contain obsolete patterns. Trigger immediately for: modals/dialogs/popovers, tables, dark mode, anchor positioning, container queries, view transitions, scroll-driven animations, parallax/reveals, forms, validation, autofill, accessibility, custom selects, scrollbars, CWV (LCP, INP, CLS), content-visibility, fetch pri

    GoogleChrome2.8K

  • performance-optimization

    Optimizes application performance across frontend, backend, queries, and databases. Use when performance requirements exist, when you suspect performance regressions, when Core Web Vitals or load times need improvement, when N+1 query patterns need fixing, or when profiling reveals bottlenecks.

    addyosmani115K

  • web-perf

    Audit, diagnose, or optimize website loading and interaction performance, Core Web Vitals, and Lighthouse performance scores.

    cloudflare3.3K

  • vercel-react-native-skills

    React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.

    vercel-labs33.8K

  • remove-animations

    Find the animations an interface doesn't need and remove them — motion on keyboard actions, high-frequency surfaces, functional data, and decoration with no purpose — then clean up what they leave behind. Edits code, but only to subtract; it never adds or retunes motion. Use when the user says the app "feels slow", "has too much animation", "feels over-animated", wants to "tone down the motion", or asks what animations to remove. For finding places that should animate, use find-animation-opportunities; for fixing animations that should stay, use improve-animations or review-animations.

    emilkowalski55.8K

  • swiftui-view-refactor

    Refactor and review SwiftUI view files with strong defaults for small dedicated subviews, MV-over-MVVM data flow, stable view trees, explicit dependency injection, and correct Observation usage. Use when cleaning up a SwiftUI view, splitting long bodies, removing inline actions or side effects, reducing computed `some View` helpers, or standardizing `@Observable` and view model initialization patterns.

    dimillian4K

  • swiftui-performance-audit

    Audit and improve SwiftUI runtime performance from code review and architecture. Use for requests to diagnose slow rendering, janky scrolling, high CPU/memory usage, excessive view updates, or layout thrash in SwiftUI apps, and to provide guidance for user-run Instruments profiling when code review alone is insufficient.

    dimillian4K

  • swiftui-liquid-glass

    Implement, review, or improve SwiftUI features using the iOS 26+ Liquid Glass API. Use when asked to adopt Liquid Glass in new SwiftUI UI, refactor an existing feature to Liquid Glass, or review Liquid Glass usage for correctness, performance, and design alignment.

    dimillian4K

  • react-component-performance

    Analyze and optimize React component performance issues (slow renders, re-render thrash, laggy lists, expensive computations). Use when asked to profile or improve a React component, reduce re-renders, or speed up UI updates in React apps.

    dimillian4K

  • threejs-react-three-fiber

    Building three.js scenes from React with React Three Fiber and drei: renderer setup, the scene graph as JSX, frame-loop, state and loading hooks, pointer events, and adaptive performance, on WebGL or with WebGPU and TSL. Use when writing React components that render three.js.

    cloudai-x4.1K

  • threejs-performance

    Measuring and optimizing three.js speed: render statistics, memory counters, fewer draw calls via merging, instancing, batching and LOD, fill rate, shadows, CPU work per frame, shader stalls and GPU compute for particles, WebGL or WebGPU with TSL. Use when a scene is slow, janks or exceeds memory.

    cloudai-x4.1K

  • threejs-asset-pipeline

    Shrinking glTF assets for three.js with gltf-transform: inspect, validate and optimize commands, Draco, meshopt and quantization, KTX2, WebP and AVIF textures, the loader setup each output needs, and gltfjsx for React. Use when compressing, optimizing or validating 3D models before loading them.

    cloudai-x4.1K

  • animation-performance

    Keep web animations inside the frame budget — animate composite-only properties, keep motion off the main thread when the page is busy, and find the cause when an animation drops frames. Covers the layout/paint/composite pipeline, cheaper property swaps, CSS vs WAAPI vs requestAnimationFrame, Framer Motion's hardware-accelerated path, React re-rendering per frame, inherited CSS variable recalculation, blur cost, and when `will-change` actually helps. Use when an animation is janky, choppy, stutters, or drops frames; when choosing which property to animate; when deciding between CSS and JS animation on performance grounds; or when reaching for `will-change` or GPU layers. For choosing easing, duration, or whether to animate at all use animate; for reviewing motion as a whole use review-animations.

    emilkowalski55.8K

  • web-perf

    Diagnose page-load and interaction performance using browser traces, network evidence, and source code for Core Web Vitals and layout-shift investigations.

    elithrar223

  • mobile-native

    Make a web app feel native on a phone with CSS and meta-tag fixes for touch, viewport, scroll, safe areas, inputs, and PWA polish on real hardware.

    emilkowalski55.8K

  • seo

    Optimize for search engine visibility and ranking. Use when asked to "improve SEO", "optimize for search", "fix meta tags", "add structured data", "sitemap optimization", or "search engine optimization".

    addyosmani3.1K

  • performance

    Optimize web performance for faster loading and better user experience. Use when asked to "speed up my site", "optimize performance", "reduce load time", "fix slow loading", "improve page speed", or "performance audit".

    addyosmani3.1K

  • core-web-vitals

    Optimize Core Web Vitals (LCP, INP, CLS) for better page experience using field and lab evidence. Use when asked to "improve Core Web Vitals", "fix LCP", "reduce CLS", "optimize INP", "page experience optimization", or "fix layout shifts".

    addyosmani3.1K

  • best-practices

    Apply modern web development best practices for security, compatibility, and code quality. Use when asked to "apply best practices", "security audit", "modernize code", "code quality review", or "check for vulnerabilities".

    addyosmani3.1K

  • seo

    Use for SEO audits, rankings, keyword research, indexing, metadata, Search Console, GA4, and AI search visibility. Routes to evidence-backed reports through the local SEO CLI and MCP server.

    iannuttall616

  • webgl-components

    Build small, always-on WebGL visuals (identity avatars, ambient orbs, glass and iridescent surfaces, animated textures) that ship inside a normal web app UI without wrecking performance, accessibility, SSR, or layout. Use whenever a shader-, GLSL-, or canvas-driven decorative element is added to a product UI, especially one rendered many times per page or per list; when reviewing or optimizing one; or when debugging one that renders blurry, aliased, all-black, or paints over the surrounding UI on machines without hardware acceleration.

    flornkm115

  • 60fps-animation

    Web animation performance guidance for avoiding layout thrashing and reaching smooth 60/120fps motion with compositor-friendly techniques.

    iart-ai81

  • gsap-performance

    Official GSAP performance guidance for compositor-friendly transforms, quickTo, stagger batching, and smooth 60fps animation.

    greensock18.2K

  • optimize

    Diagnose and improve interface performance across rendering, motion smoothness, assets, and load speed.

    pbakaus107.5K

  • audit

    Run technical UI quality audits across accessibility, performance, theming, responsive behavior, and anti-patterns.

    pbakaus107.5K

  • improve-animations

    Survey a codebase's animation and motion code as a senior motion advisor, then produce prioritized audit and self-contained implementation plans. Read-only on source code - it plans improvements, it does not apply them. Use when the user asks to improve animations, audit motion, make an app feel better, or wants a roadmap of animation fixes rather than a review of a single diff.

    emilkowalski55.8K

  • improve-react

    Survey a React codebase using React Doctor's findings, then produce prioritized audits and self-contained implementation plans without modifying source code.

    millionco15.1K

  • react-doctor

    Run React Doctor to detect regressions in security, performance, correctness, and architecture, with score-based quality checks.

    millionco15.1K

  • vite

    Vite configuration and plugin guidance, including SSR and Vite 8 Rolldown migration patterns.

    antfu6K

  • turborepo

    Turborepo monorepo build system guidance for pipelines, caching, filtering, CI, and package boundaries.

    vercel31.3K

  • tsdown

    Bundle TypeScript and JavaScript libraries with tsdown, including declarations and multi-format builds.

    rolldown4.3K

  • pnpm

    pnpm package manager guidance for strict dependency resolution, workspaces, catalogs, patches, and overrides.

    antfu6K

  • nuxt

    Nuxt full-stack Vue framework guidance for SSR, auto-imports, file-based routing, and server routes.

    antfu6K

  • antfu

    Anthony Fu's opinionated tooling and conventions for JavaScript/TypeScript projects.

    antfu6K

  • threejs-loaders

    Three.js asset loading patterns for GLTF, textures, HDR assets, async loading, and progress handling.

    cloudai-x4.1K

  • web-quality-audit

    Web quality auditing skill for Lighthouse-style analysis across performance, accessibility, best practices, and SEO signals.

    addyosmani3.1K

  • fixing-motion-performance

    Audit and fix animation performance issues including layout thrashing, compositor properties, scroll-linked motion, and blur effects. Use when animations stutter, transitions jank, or reviewing CSS/JS animation performance.

    ibelick10.7K