code-check-client-bundle

Detect client bundle regressions from server leakage and heavy dependencies.

22|3|Updated Jul 28, 2024
One-click install
npx skills add https://github.com/webdevcody/go-mailing-list --skill code-check-client-bundle
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: code-check-client-bundle
Source: https://github.com/webdevcody/go-mailing-list/tree/main/.claude/skills/code-check-client-bundle
Command: npx skills add https://github.com/webdevcody/go-mailing-list --skill code-check-client-bundle

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about code-check-client-bundle

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I detect server leakage in a client bundle?

Detect server leakage in a client bundle by applying server-vs-client boundary heuristics to flag Node-only modules and DB libraries imported into browser code. Scoped diff-based detection prevents accidental server dependencies from breaking client runtime execution.

How does environment variable safety work in Next.js and Vite client code?

Environment variable safety works by identifying `process.env.*` usage in client files to highlight non-public secret exposure or undefined runtime values. This prevents accidentally bundling sensitive backend configuration into the browser payload.

How do I check for client bundle weight regressions after adding dependencies?

Check for client bundle weight regressions by running scoped diff-based detection after dependency changes to warn when heavy libraries are statically imported. This catches newly added packages inflating initial first-load JavaScript without scanning the whole repository.

Does this client bundle check work with TanStack Start projects?

Yes, this client bundle check works with TanStack Start, Next.js, and Vite projects. It applies after client code or dependency changes, using scoped diff-based detection rather than whole-repo scans to find server leakage and heavy dependencies.

What is the best way to flag unoptimized media assets in a diff?

The best way to flag unoptimized media assets in a diff is through targeted asset risk flagging, which checks added or changed images and video for oversized files. This catches unoptimized sizes that hurt performance budgets before deployment.