Skill UI

A comprehensive guide detailing best practices for optimizing Angular applications. It covers critical topics like change detection strategies (OnPush, Signals), managing asynchronous data flows (avoiding waterfalls), optimizing bundle size via lazy loading and tree shaking, and improving rendering efficiency with modern features like @defer and trackBy. Use this when building, reviewing, or refactoring complex Angular components for peak performance.

Automated Frontend Development assistant that guides bundle size analysis, optimization best practices, and production-ready code/config setup for React, Vue, CSS, and performance workflows.

Helps developers systematically optimize web performance by measuring key metrics, reducing bundle size, deferring scripts, optimizing images and fonts, and tuning caching and CSS for faster Time to Interactive and better Lighthouse scores.

A comprehensive optimization guide maintained by Vercel, covering 45 rules for React and Next.js. Use this resource when building new components, implementing complex data fetching (client or server-side), refactoring code, or systematically improving bundle size and overall load times for high-performance web applications.

A comprehensive diagnostic bundle designed for developers integrating with the Speak API. It systematically collects critical information, including authentication status, audio format validation (checking codecs, sample rates, and file size using ffprobe), and network connectivity tests for both Speak and OpenAI endpoints. Use this tool when troubleshooting complex language learning integration issues or verifying API setup.

Automatically checks application metrics such as load times, bundle sizes, and API responses against predefined performance budgets, surfacing regressions and preventing slippage before deployments—ideal for CI/CD workflows.

A comprehensive guide to optimizing Vercel deployment performance. This skill covers advanced techniques such as edge caching implementation (using Cache-Control headers), leveraging Incremental Static Regeneration (ISR), minimizing serverless function cold starts, and optimizing bundle size. Use this when facing slow page load times, needing to improve Core Web Vitals, or requiring robust, scalable deployment performance.

Implement comprehensive guardrails for Vercel applications, covering the entire development lifecycle. This solution includes custom ESLint rules to prevent secret exposure, pre-commit hooks for credential scanning, and robust CI checks to validate vercel.json, ensure edge runtime compatibility, and monitor bundle size, guaranteeing high quality and secure deployments.

Vercel Engineering’s authoritative React and Next.js performance guide, offering prioritized rules for waterfalls, bundle size, data fetching, memoization, rendering, caching, and advanced patterns.

A comprehensive guide for developers to measure, analyze, and optimize website and web application performance. Covers critical areas including Core Web Vitals (LCP, FID, CLS), reducing JavaScript bundle size, implementing effective caching, and optimizing rendering paths to boost user experience and SEO rankings.

Configure the maximum allowed size of the Webiny API Lambda bundle using the Infra.Api.MaxBundleSize extension in webiny.config.tsx. Use when the API bundle exceeds the default 4.5 MB limit or to enforce a stricter limit. Covers extension syntax, byte calculations, and interpreting build error messages.

A comprehensive guide detailing advanced performance optimization patterns for React 18/19 and Next.js. Adapted from Vercel Engineering's best practices, this skill organizes 70+ critical rules across eight categories—including eliminating waterfalls, optimizing bundle size, improving server-side rendering, and managing client-side re-renders. Use this when developing, reviewing, or refactoring high-performance React applications.