Skills
Practical instructions for better interface work.
60fps-animationExternal
Web animation performance guidance for avoiding layout thrashing and reaching smooth 60/120fps motion with compositor-friendly techniques.
antfuExternal
Anthony Fu's opinionated tooling and conventions for JavaScript/TypeScript projects.
auditExternal
Run technical UI quality audits across accessibility, performance, theming, responsive behavior, and anti-patterns.
best-practicesExternal
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".
core-web-vitalsExternal
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".
fixing-motion-performanceExternal
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.
gsap-performanceExternal
Official GSAP performance guidance for compositor-friendly transforms, quickTo, stagger batching, and smooth 60fps animation.
improve-animationsExternal
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.
improve-reactExternal
Survey a React codebase using React Doctor's findings, then produce prioritized audits and self-contained implementation plans without modifying source code.
next-cache-componentsExternal
Enable Cache Components in a Next.js app and resolve blocking routes surfaced during adoption.
next-cache-components-optimizerExternal
Drive a Next.js route to instant navigation under Cache Components using a failing Playwright test and an agentic fix loop.
nuxtExternal
Nuxt full-stack Vue framework guidance for SSR, auto-imports, file-based routing, and server routes.
optimizeExternal
Diagnose and improve interface performance across rendering, motion smoothness, assets, and load speed.
performanceExternal
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".
pnpmExternal
pnpm package manager guidance for strict dependency resolution, workspaces, catalogs, patches, and overrides.
react-doctorExternal
Run React Doctor to detect regressions in security, performance, correctness, and architecture, with score-based quality checks.
react-native-best-practicesExternal
React Native performance optimization guidelines for FPS, TTI, bundle size, memory leaks, re-renders, and animations.
review-animationsExternal
Review animation quality, timing, and motion consistency with a production-critical eye.
iannuttall-seoExternal
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.
addyosmani-seoExternal
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".
threejs-geometryExternal
Three.js geometry patterns for built-in shapes, BufferGeometry, custom meshes, and instancing.
threejs-loadersExternal
Three.js asset loading patterns for GLTF, textures, HDR assets, async loading, and progress handling.
threejs-postprocessingExternal
Three.js post-processing techniques with EffectComposer, bloom, depth of field, and screen-space effects.
to-spring-or-not-to-springExternal
Audit animation timing choices to decide when springs versus easing curves produce better motion.
tsdownExternal
Bundle TypeScript and JavaScript libraries with tsdown, including declarations and multi-format builds.
turborepoExternal
Turborepo monorepo build system guidance for pipelines, caching, filtering, CI, and package boundaries.
react-best-practicesExternal
Vercel React best practices for rendering performance, bundle efficiency, and scalable component architecture.
viteExternal
Vite configuration and plugin guidance, including SSR and Vite 8 Rolldown migration patterns.
vuejs-ai-vue-best-practicesExternal
Core Vue development best practices for component architecture, reactivity, and maintainable code.
antfu-vue-best-practicesExternal
Vue.js best practices emphasizing Composition API with script setup and TypeScript.
web-quality-auditExternal
Web quality auditing skill for Lighthouse-style analysis across performance, accessibility, best practices, and SEO signals.
webgl-componentsExternal
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.