add-cdn-bundle
Bundles your browser packages for CDN distribution.
Install
mkdir -p .claude/skills/add-cdn-bundle && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/4159" && unzip -o skill.zip -d .claude/skills/add-cdn-bundle && rm skill.zipInstalls to .claude/skills/add-cdn-bundle
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Create a new CDN bundle for the browser package with specified featuresKey capabilities
- →Generate browser package CDN bundle source files
- →Configure Rollup build settings for new bundles
- →Define size-limit constraints for bundle variants
- →Integrate new bundles into CI/CD workflows
- →Update browser integration test configurations
How it works
The process involves creating specific TypeScript source and test files, updating Rollup and size-limit configurations, and registering the new bundle in the CI/CD pipeline.
Inputs & outputs
When to use add-cdn-bundle
- →Creating CDN bundles for libraries
- →Packaging browser-based SDKs
- →Updating CDN distribution assets
About this skill
Add CDN Bundle Skill
This skill creates a new CDN bundle for the browser package that includes a specific combination of features.
Input
The user provides a feature combination using dot notation:
logs.metrics- Bundle with logs and metricsreplay.logs.metrics- Bundle with replay, logs, and metricstracing.replay.logs- Bundle with tracing, replay, and logstracing.replay.feedback.logs.metrics- Full featured bundle
Feature order in bundle names: tracing → replay → feedback → logs → metrics
Instructions
Follow the detailed guide at docs/adding-cdn-bundle.md to create the bundle.
Quick Reference - Naming Conventions
Given a feature combination, derive these variants:
| Placeholder | Example (replay.logs.metrics) |
|---|---|
{FEATURE_COMBO} | replay.logs.metrics |
{feature_combo} | replay_logs_metrics |
{featureCombo} | replayLogsMetrics |
{Human Readable Features} | Replay, Logs, Metrics |
{Human Readable Feature List} | Replay, Logs, and Metrics |
Quick Reference - Files to Create/Modify
- Create
packages/browser/src/index.bundle.{FEATURE_COMBO}.ts - Create
packages/browser/test/index.bundle.{FEATURE_COMBO}.test.ts - Modify
packages/browser/rollup.bundle.config.mjs - Modify
.size-limit.js - Modify
dev-packages/browser-integration-tests/package.json - Modify
dev-packages/browser-integration-tests/utils/generatePlugin.ts - Modify
.github/workflows/build.yml
Verification Steps
After making changes:
yarn lint
cd packages/browser && yarn build:dev
cd packages/browser && yarn test
When not to use it
- →When adding features to an existing bundle
- →When modifying non-browser SDK packages
Prerequisites
Limitations
- →Requires manual adherence to specific feature naming and ordering conventions
- →Requires manual verification steps via linting and testing
How it compares
This automates the manual creation of boilerplate files and configuration updates required to support new CDN bundle feature combinations.
Compared to similar skills
add-cdn-bundle side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| add-cdn-bundle (this skill) | 1 | 5mo | Review | Intermediate |
| pwa-development | 9 | 4mo | Caution | Intermediate |
| oly-apps | 0 | 4mo | No flags | Beginner |
| vite-patterns | 0 | 2mo | Review | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by getsentry
View all by getsentry →You might also like
pwa-development
alinaqi
Progressive Web Apps - service workers, caching strategies, offline, Workbox
oly-apps
slaveOftime
Use when building a web app/api to present rich output or interactive experiences to users.
vite-patterns
Fmarzochi
Vite build tool patterns including config, plugins, HMR, env variables, proxy setup, SSR, library mode, dependency pre-bundling, and build optimization. Activate when working with vite.config.ts, Vite plugins, or Vite-based projects.
progressive-centralization-starter
Swader
Bootstrap Bun-based single-file frontends with Filebase/IPFS, ENS, and Arweave/ArNS deploy tooling. Use when creating a progressive centralization starter project, setting up .env-driven deploys, or when the user asks to "just do it" for IPFS/ENS/Arweave hosting.
drn-buildwww-vite
duranserkan
DRN buildwww Vite build system - multi-build configuration, TypeScript aliases, wwwroot output, appPreload/appPostload, and Vite manifest discovery. Keywords: drn, buildwww, vite, typescript, bundling, asset-compilation, npm, javascript, css, scss, build-pipeline, entry-points, manifest
zustand
lobehub
Zustand state management guide. Use when working with store code (src/store/**), implementing actions, managing state, or creating slices. Triggers on Zustand store development, state management questions, or action implementation.