From system-design-skills
Guides CDN architecture decisions: edge caching, cache-control headers, origin offload, and push/pull distribution models.
How this skill is triggered — by the user, by Claude, or both
Slash command
/system-design-skills:content-deliveryThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Push bytes to the network edge so requests terminate close to the user and never
Push bytes to the network edge so requests terminate close to the user and never reach the origin. A CDN is the outermost cache layer of a system: get it right and most static/media traffic and a chunk of latency vanish before they hit your servers; get it wrong and you serve stale assets, leak origin load, or pay egress twice.
The same files (images, video, JS/CSS bundles, downloads, fonts) are read
repeatedly by a geographically spread audience; the origin or its bandwidth is the
bottleneck for static reads; or cross-region latency on first byte hurts (a
cross-continent round trip is ~100 ms — see back-of-the-envelope). A CDN buys
latency and origin offload at once.
Highly personalized, per-request dynamic responses with no cacheable shape (a CDN
adds a hop and caches nothing). Tiny single-region audiences where the origin
already serves reads comfortably (YAGNI — a CDN is another vendor, another bill,
another invalidation problem). Strictly fresh data that cannot tolerate any
staleness window — that belongs at the origin or behind consistency-coordination,
not a TTL-based edge. Naming a CDN before a number shows static reads or geography
is the problem is a red flag.
back-of-the-envelope).Distribution model — how content reaches the edge
Caching key & TTL — what the edge keys on and for how long
app.4f9a.js, image.png?v=2): immutable
assets cached for months; a content change is a new URL, not an invalidation.
Use when you control asset URLs — the cleanest model.stale-while-revalidate: bound staleness for content that
changes on a schedule. Use when URLs are stable but content updates.Edge proximity & routing — how a user reaches the nearest PoP
load-balancing — see there for the routing mechanics.Origin protection — shrinking the origin's exposed surface
| Option | What it solves | What it worsens | Change it when |
|---|---|---|---|
| Pull CDN | Edge holds only requested content; no upload pipeline | First request per object is a slow miss; redundant re-pulls when TTL expires before content changes | Cold-miss latency or launch spikes hurt → push / pre-warm |
| Push CDN | No cold miss; full control of what's cached and when | You own upload + storage + URL rewriting; pay to store rarely-read assets | Catalog grows or churns → pull |
| Long TTL + fingerprinted URLs | Near-permanent caching; updates are new URLs (no invalidation race) | Requires build/URL control; old versions linger at edge until aged out | URLs are not under your control → short TTL |
| Short TTL / stale-while-revalidate | Bounded staleness on stable URLs | More origin revalidation traffic; synchronized expiry can stampede | Content is truly immutable → fingerprint + long TTL |
| Geo-routing / anycast | Users hit the nearest edge; lower latency | More PoPs to reason about; routing can send users to a degraded PoP | Single-region audience → skip it |
| Origin shield | Collapses edge misses into one origin fetch; protects origin | Extra hop on cold path; the shield is a new chokepoint/SPOF if single-region | Origin is robust and offload is already enough → drop it |
A CDN usually absorbs load spikes — that's its job — but it has its own failure shapes, and they tend to dump straight onto the origin.
caching thundering herd at global scale. Mitigate: origin shield to
collapse misses, TTL jitter, stale-while-revalidate so the edge serves stale
while it refetches, staged purges.no-cache or a hot uncacheable asset can
10× the origin egress bill silently.Monitor: edge hit ratio (cache hit rate), origin offload %, origin request rate (the number that spikes when the edge fails), p95 edge latency by region, egress bytes, and 4xx/5xx at the edge vs origin.
Clarify first). If the
cacheable fraction is near zero or the audience is single-region, stop here.stale-while-revalidate.Cache-Control (max-age, immutable, stale-while-revalidate),
the cache key (URL path + whitelisted params; strip cookies on static paths),
Vary only where you truly differ, and add an origin shield if offload or
stampede protection matters.stale-while-revalidate + shield keep the origin
survivable, and that a client/DNS fallback to origin exists.requests × avg object size) via back-of-the-envelope. If egress
or origin request rate is alarming, revisit the cache key and TTL.Choosing a provider).Do
stale-while-revalidate and TTL jitter so synchronized expiry can't stampede
the origin.Don't
Vary: Cookie explode the keyspace and gut caching.no-cache on a hot asset — it can silently 10× origin egress.The decisive quantities are hit ratio (90%+ is the goal; below ~80% question
whether content is cacheable), origin offload % (1 − origin-requests/total),
and egress (requests × avg object size). Edge-vs-origin latency is the
payoff: an edge hit is a same-region round trip (~ms to tens of ms) instead of a
cross-continent one (~100 ms). Do the egress and offload math with
back-of-the-envelope — don't restate its tables here; egress is the line item
that usually dominates a CDN bill.
The contract is mostly HTTP cache headers the origin sets and the edge obeys:
Cache-Control: public, max-age=31536000, immutable for fingerprinted static.Cache-Control: public, max-age=60, stale-while-revalidate=600 for stable URLs
with periodic updates.ETag / Last-Modified to enable cheap revalidation (304 Not Modified).Vary only on headers you truly serve differently on (a careless Vary: Cookie
destroys hit rate).PURGE/invalidation API call or (preferably) a URL version
bump. Versioned URLs sidestep the purge-propagation race entirely.Default to the generic recipe above. If the user names a cloud, read
references/providers/<provider>.md for the managed-service mapping,
quotas/limits, and provider-specific trade-offs. If no file exists for that
provider, the generic recipe is the answer.
To visualize the edge → shield → origin pull path (and the dashed cold-miss arrow,
plus geo-routing from clients to the nearest PoP), use the in-plugin
architecture-diagram skill. Sketch the edge nodes in the cache color and the
origin in its store color; do not embed Mermaid here.
caching — owned-concept lives in: invalidation, eviction, TTL, and
thundering-herd theory live there; the CDN is the edge tier above the
app/distributed cache and alternative to origin reads for static/media.load-balancing — owned-concept lives in: the geo/anycast routing and origin
health checks that send users to the nearest edge.back-of-the-envelope — feeds into this: supplies the egress, offload %, and
latency-payoff numbers that justify a CDN.data-storage — depends on: the object store that is usually the CDN's origin.consistency-coordination — alternative to this for data that cannot tolerate
any staleness window (serve from origin, not a TTL-based edge).system-design — pairs with (back-link): the orchestrator that routes here when
a design serves static/media at geographic scale.references/deep-dive.md — cache-key normalization, Cache-Control directive
semantics, push vs pull mechanics, origin shield / tiered topology, invalidation
vs versioning races, multi-CDN, and media-specific delivery (segmented HLS/DASH,
range requests, signed URLs). Read when designing the edge layer in detail.references/providers/{generic,aws,azure,gcp}.md — service mappings, limits, and pitfalls per environment.npx claudepluginhub proyecto26/system-design-skills --plugin system-design-skillsDesigns and optimizes CDN architecture with tiered caching, origin shielding, edge compute, and multi-CDN strategies for globally distributed apps.
Designs CDN configurations including caching rules, TTLs, and origin shield setup for providers like Cloudflare, CloudFront, and Fastly.
Designs or audits HTTP caching, CDN configuration, and application-level cache policies for web services.