What problem does it solve?
Prevents accidental client-side bundle regressions by detecting server-only imports, unsafe env usage, and heavy/unused dependencies that cause oversized first-load JavaScript or runtime failures.
Core Features & Use Cases
- Server leakage detection: Flags imports in client code that would pull DB/server libraries (or Node-only modules) into the browser bundle.
- Environment variable safety: Identifies
process.env.* usage in client files and highlights likely non-public secret exposure or undefined runtime values.
- Client weight regression checks: Detects newly added heavy dependencies and warns when they’re statically imported where they inflate the initial load.
- Targeted asset risk flagging: Checks added/changed images and video for “unoptimized” sizes that can hurt performance budgets.
Quick Start
Run the code-check-client-bundle skill after changing any client route/component/hook, then ask it to report any server leakage, non-public env usage, heavy dependency imports, or oversized assets in the diff.