Domains
Forms
Mechanism
Breaks down how the skill works and what it produces, so you can quickly judge whether it fits your scenario and value.
When writing, reviewing, or refactoring React/Next.js code, or optimizing bundle size, data fetching, and rendering performance.
Code follows Vercel engineering best practices: fewer waterfalls, smaller bundles, better server/client performance, and optimized re-renders.
Use Cases
A developer writes a new Next.js dashboard page with multiple data fetches and third-party widgets. By applying this skill, they learn to parallelize fetches (async-parallel), dynamically import heavy widgets (bundle-dynamic-imports), and dedupe client requests (client-swr-dedup). The result is faster load time, smaller initial JS, and smoother UX without manual trial-and-error.
During a code review, an engineer finds a list view re-rendering excessively and a large bundle. Using the skill, they reference rerender-memo and bundle-barrel-imports rules, refactor components, and eliminate barrel imports. The PR gets concrete, priority-backed suggestions, reducing re-renders and cutting bundle size before merge.
Skill Relationships
Dependency relationships read as "the upper tier points to the lower tier." The current Skill sits in the middle tier — above are Skills that depend on it, below are Skills it depends on.
Tier 1 · These Skills Use Me
Tier 2 · Current Skill
Tier 3 · I Use These Skills
Browse this skill's relationships within its skillset. Click a node to switch the side panel; use the search box to jump to any skill.
Skill File
