jaykim88/third-party-scripts
plugins/frontend-toolkit/skills/third-party-scripts/SKILL.md
Audit and optimize third-party scripts — analytics, tag managers, chat widgets, embeds — with the right loading strategy, performance budget, facades, and CSP/consent controls. Use when adding a script, when TBT/INP regress, when a GDPR/CCPA consent requirement arises, or before shipping. Not for first-party bundle size (use bundle-optimization) or broad Core Web Vitals diagnosis (use rendering-performance).
development
Updated May 30, 2026
$ install --global
skillsauthnpx skillsauth add jaykim88/claude-ai-engineering third-party-scriptsInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: May 30, 2026, 7:52 AM80.1s1 file scanned
SKILL.md
- name:
- third-party-scripts
- description:
- Audit and optimize third-party scripts — analytics, tag managers, chat widgets, embeds — with the right loading strategy, performance budget, facades, and CSP/consent controls. Use when adding a script, when TBT/INP regress, when a GDPR/CCPA consent requirement arises, or before shipping. Not for first-party bundle size (use bundle-optimization) or broad Core Web Vitals diagnosis (use rendering-performance).
- license:
- MIT
Third-Party Scripts
Purpose
Keep third-party scripts (analytics, tag managers, chat, A/B tools, embeds) from silently destroying performance and privacy. Each script earns its place: right loading strategy, measured cost, CSP-controlled, consent-gated where required.
Universal — loading-strategy classification, performance budgeting, facade patterns, and CSP/consent controls apply to any site; only the script-injection helper differs by framework.
Procedure
-
Inventory every third-party script
- List all external scripts (analytics, tag managers, ads, chat, embeds, hosted fonts)
- For each: purpose, owner, business-critical? — scripts with no owner or unclear purpose are removal candidates
-
Assign a loading strategy per script
- Critical & needed early (consent manager, core analytics) → load high priority, but still async
- Important, not render-blocking (most analytics) → load after hydration / when the main thread is idle
- On-interaction only (chat widget, video embed) → lazy-load on click / scroll via a facade
- Never inject a render-blocking synchronous
<script>in<head>
-
Use a facade for heavy embeds
- Chat widgets, YouTube / maps embeds, social widgets often cost 500KB+ each
- Render a static placeholder; load the real script only on user intent (click)
- This is the single biggest win for INP / TBT on widget-heavy pages
-
Prefer server-side / first-party where possible
- Tag managers and analytics increasingly support server-side containers — moves work off the client
- Self-host stable scripts (fonts, small libs) to cut a third-party origin connection
-
Set a third-party performance budget
- Cap total third-party JS (e.g., ≤ 100KB transfer, ≤ 200ms main-thread on mid-tier mobile)
- Each new script must fit the budget or displace an existing one — measure with the WebPageTest "3rd party" breakdown or Lighthouse
-
Connection hints for unavoidable origins
preconnect/dns-prefetchfor the script origin (saves TCP/TLS handshake) — coordinate withapi-caching-optimization- Only preconnect the few origins that matter; each one costs a connection
-
Security + privacy controls
- Allowlist each script origin in CSP
script-src(coordinate withsecurity-audit) — no blanket'unsafe-inline' - Add Subresource Integrity (SRI) hash for scripts served from a fixed URL
- Consent-gate tracking scripts — don't load before opt-in where GDPR / CCPA applies. Consent must gate loading, not just configuration; in the EEA, Google Consent Mode v2 is required for ads/analytics tags, and the consent manager is the one script allowed to load first
- Tag managers are a runtime backdoor: GTM lets non-engineers inject arbitrary scripts that bypass your review, budget, and CSP — govern who can publish, audit the container, and accept that its CSP story is painful (it pushes toward
'unsafe-inline'or nonce gymnastics)
- Allowlist each script origin in CSP
-
Measure impact (validation loop)
- Record a trace before/after each script; if main-thread blocking or INP regresses past budget, downgrade its strategy (idle → on-interaction → facade) and re-measure
- Loop until total third-party cost fits the budget
Anti-patterns
| ❌ Anti-pattern | ✅ Correct |
|---|---|
| Synchronous <script> in <head> for analytics | Async, loaded after hydration / when idle |
| Chat widget loaded eagerly on every page | Facade placeholder → load on click |
| Blanket script-src 'unsafe-inline' for vendors | Allowlist each origin + nonce / SRI |
| Loading tracking before consent (GDPR) | Consent-gate loading (Consent Mode v2 in EEA); load only after opt-in |
| Tag manager any teammate can publish to | Governed publish access + container audit + CSP review |
| Adding scripts with no budget check | Each script must fit the third-party budget or displace one |
Severity tiers
| Tier | Examples | Action SLA |
|---|---|---|
| Critical | Render-blocking sync third-party script in <head>; tracking loaded pre-consent in a GDPR region | Block release; fix immediately |
| Major | Eagerly-loaded heavy widget (chat / embed) inflating INP / TBT; third-party JS over budget; missing CSP allowlist; ungoverned tag manager (anyone can inject runtime scripts) | Fix this sprint |
| Minor | Missing preconnect for a used origin; unowned script of unclear value | Schedule within 2 sprints |
Completion Criteria
- [ ] Every third-party script inventoried with purpose + owner
- [ ] Each script has an explicit loading strategy (none render-blocking)
- [ ] Heavy widgets / embeds use a facade (load on interaction)
- [ ] Total third-party JS within budget (default ≤ 100KB transfer)
- [ ] Each script origin allowlisted in CSP; SRI where applicable
- [ ] Tracking scripts consent-gated where required (Consent Mode v2 in EEA); tag-manager publish access governed
- [ ] All Critical findings fixed; all Major findings scheduled
Output
- Script inventory:
docs/third-party-scripts.md— script / purpose / owner / strategy / size / budget impact - Loading config: per-script strategy (async / idle / on-interaction) + facades for heavy embeds
- CSP update:
script-srcallowlist + SRI hashes (coordinate withsecurity-audit) - Budget report (paste into PR): total third-party transfer + main-thread time before/after
- Commit format:
perf(3p): defer <script>/feat(3p): facade for <widget>
Implementation
React + Next.js (default)
- Loading:
next/scriptwithstrategy—beforeInteractive(rare, critical only),afterInteractive(default),lazyOnload(idle),worker(Partytown, experimental — runs off the main thread; test each script, those needing direct DOM/cookies often break in a worker) - Facades: render a placeholder component, mount the real embed on click (e.g.,
react-lite-youtube-embed, lazy chat triggers) - Connection hints:
<link rel="preconnect">in the root layout - CSP:
script-srcallowlist innext.config.tsheaders()(seesecurity-audit) - Server-side: GTM server-side container; reverse-proxy analytics (PostHog, Vercel) to a first-party path
Other stacks
- Vue / Nuxt:
useHead({ script: [{ src, defer }] }), or@nuxt/scripts(purpose-built: facades, consent, perf strategies) - SvelteKit:
<svelte:head>for script tags; manual facade components; Partytown integration for worker offloading - Angular: a script-loader service (or
Renderer2) with an explicit per-script strategy; manual facades for embeds - Universal:
<script async/defer>,preconnect/dns-prefetch, CSPscript-src, SRI, and the facade pattern are web-platform standards; Partytown (web-worker offloading) is framework-agnostic
Related skills
rendering-performance— third-party JS is a top INP / TBT regression sourcebundle-optimization— first-party bundle vs. third-party loaded scripts are different leverssecurity-audit— external scripts need CSP allowlisting + SRI
Reference
- Key insight encoded: Third-party scripts are the most common cause of poor INP / TBT because they run on the main thread outside your control. Default everything to
afterInteractive/lazyOnload, use facades for heavy widgets (load on interaction), and hold every script to a measured budget — a script with no owner and no measured value is a removal candidate. Two governance traps: a tag manager is a runtime backdoor that bypasses your CSP/budget/review (govern publish access), and consent must gate script loading (Consent Mode v2 in the EEA), not just post-load configuration.
Related Skills
jaykim88/test-strategy
development
VerifiedTrustedCommunity
Apply the Testing Trophy (mostly integration tests with RTL + MSW, sparing E2E with Playwright) and set coverage thresholds. Use before new feature work, after bug fixes, when CI coverage falls below target, or when tests are flaky or break on every refactor. Not for wiring coverage gates + Playwright into the GitHub Actions matrix (use cicd-pipeline) or auditing WCAG a11y compliance (use accessibility-audit).
SKILL.mdUpdated May 30, 2026
jaykim88/tech-debt-management
development
VerifiedTrustedCommunity
Inventory and prioritize technical debt — TODO/FIXME/HACK, any usage, deprecated APIs, untested logic — with impact × effort matrix. Use at quarter start, before a refactoring sprint, when a new teammate joins, or when feature velocity slows. Not for actually paying down debt (use code-refactoring) or recording a migration approach (use decision-records) — this only inventories and prioritizes.
SKILL.mdUpdated May 30, 2026
jaykim88/state-management-decisions
development
VerifiedTrustedCommunity
Decision framework for choosing the right state location — URL, server cache, local component, or shared/global store. Use when state-sync bugs appear, prop drilling gets deep (3+ levels), filters/tabs lose state on reload, or quarterly review. Not for form state specifically (use form-ux) or when the state is actually server data (use api-caching-optimization).
SKILL.mdUpdated May 30, 2026
jaykim88/seo-metadata
development
VerifiedTrustedCommunity
Apply Next.js Metadata API per route — title template, og:image, generateMetadata for dynamic pages, JSON-LD structured data, robots, sitemap, canonical, hreflang. Use when adding a new route, when search visibility drops, when rich results are needed, or before shipping. Not for choosing a route's render mode (use render-strategy-decision); align generateMetadata with that route caching choice.
SKILL.mdUpdated May 30, 2026