Index of every page on this site: llms.txt
All skills
vercel avatar

/next-bundle-optimizer

@3a6dc24 official
by vercelvercel/next.js143k stars
34,879
Run it yourself

Audit and reduce Next.js browser initial-load work. Use for slow route startup, oversized client bundles, duplicate browser dependencies, or features that can wait for interaction.

Use this Skill: https://skilld.dev/gh/vercel/next.js/next-bundle-optimizer

Nothing lands on disk. Nothing to clean up.

Fork this Skill

Edit a local copy. It keeps the author and licence.

referencesfix-patterns.md

≈662 tokens on demand. Your agent reads this file only when SKILL.md points to it.

Fix patterns

Read the section matching the candidate before proposing a change. Each section ends with the evidence needed to take that candidate into the main workflow's edit/measure/behavior loop.

Lazy interaction feature

For a large component such as an editor, chart or dialog needed after interaction, inspect its actual importer and confirm the feature is not already async. Add one lazy boundary with a stable placeholder, preserving loading/error states, keyboard/focus, direct visits and client/server behavior.

Preload on intent only after measuring its benefit. Idle preloading can waste data/battery and compete with important requests.

Ready to test: the synchronous paths that keep the feature reachable are accounted for, and each preserved behavior has a named check.

Duplicate browser dependency

Verify the shipped browser versions and inspect the package-manager graph (pnpm why or npm ls). Distinguish duplicate shipped JavaScript from module variants and server/client copies. Prefer compatible direct-range or parent upgrades and dedupe before overrides. If resolving duplicates requires a major-version upgrade, verify API compatibility and behavior for every affected consumer.

Check React/singleton peer constraints and hydration behavior. Recheck the resolved dependency graph and shipped browser code to ensure the change reduces duplication rather than introducing more duplicates through dependencies.

Ready to test: the duplicated browser code is evidenced, the resolution change is compatible with every affected consumer, and checks cover peer/hydration behavior and the resulting shipped duplication.

Server-rendered display work

For Markdown/MDX, parsers, registries or display-only work in a Client Component, establish whether it needs live editing, offline use or browser-only inputs. Move eligible display work to server rendering with a small interactive island, or keep a lazy parser for editing. Preserve sanitizer and authorization boundaries and verify hydration.

Ready to test: the source work selected for relocation has no required browser-only behavior, and rendering, interaction, hydration and trust-boundary checks are named.

Other attributed assets

Inspect polyfills, barrels, layout imports, CSS/fonts/media/WASM when the scoped attribution warrants it. Keep source/build attribution separate from observed requests: a generic asset source alone does not establish a browser request.

Ready to test: the exact source/importer and output contribution explain the proposed edit, and its effects on shared routes and runtime side effects are covered.

Source: SKILL.md on GitHub

skilld matched fixed text patterns in SKILL.md and file names. Patterns miss obfuscated code.

skilld run checks every file with the same patterns. It asks for approval before it loads a Skill with a behavior marked Needs approval.

No alerts16d3 checks · Risk SAFE
  • Gen Agent Trust Hub16d

    This skill includes security considerations such as instructions to bypass sandbox restrictions and the ingestion of external project data. While these are intended for development workflows, they involve techniques that warrant review. See detailed analysis for context.

  • Socket16d

    No alerts

  • Snyk16d

    Risk: LOW · No issues

Signed by skilld at 3a6dc24. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub yesterday.

Activeupdated 2 weeks ago

README badge

README badge for vercel/next.js/next-bundle-optimizer