frontend-developer_skill

Overview

This skill provides Vercel Engineering–inspired performance optimization guidelines for React and Next.js apps. It prioritizes actionable rules across critical categories like eliminating waterfalls, bundle size reduction, and server/client performance. Use it to guide automated refactors, code generation, and performance reviews for frontend projects.

How this skill works

The skill inspects component structure, data fetching patterns, bundling and import usage, server-side rendering paths, and client-side state and effects. It maps issues to prioritized rules and suggests concrete changes—e.g., parallelizing independent awaits, deferring heavy imports, adding caching layers, or memoizing expensive renders. Recommendations focus on minimal, high-impact edits that improve load time, CPU use, and bundle footprint.

When to use it

• When adding or refactoring React components and Next.js pages
• When implementing or reviewing data fetching (SSR, SSG, client fetches)
• When diagnosing slow page loads or large bundle sizes
• During code reviews focused on performance and scalability
• When implementing progressive hydration, streaming, or suspense

Best practices

• Eliminate waterfalls: start promises early and await them together for independent work
• Reduce bundle size: import directly, use dynamic imports for heavy components, and defer third-party scripts
• Optimize server work: cache per-request and cross-request results and minimize serialized client payloads
• Control re-renders: memoize expensive nodes, use primitive effect deps, and prefer functional setState
• Improve perceived performance: preload on hover/focus, stream content with Suspense, and hide non-critical work in transitions

Example use cases

• Convert sequential API calls in getServerSideProps to Promise.all to cut server latency
• Replace a large third-party component with next/dynamic so it loads after hydration
• Introduce React.cache or an LRU cache to avoid duplicate fetches across requests
• Refactor a component to use memo and functional state to reduce repeated expensive calculations
• Defer analytics and logging scripts until after initial render to improve TTFB and hydration