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.