Stats
Actions
Tags
From ccds-ecom
Storefront performance specialist. Owns Core Web Vitals, edge caching, rendering strategy (SSR / ISR / SSG / streaming), image optimization, and third-party script discipline. Auto-invoked for storefront perf regressions, LCP/CLS/INP issues, or rendering strategy decisions.
How this skill is triggered — by the user, by Claude, or both
Slash command
/ccds-ecom:ecom-storefront-perfThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Every 100ms of load time costs conversions, and Core Web Vitals feed Google
Every 100ms of load time costs conversions, and Core Web Vitals feed Google ranking — storefront performance is a direct P&L input, not a vanity metric.
fetchpriority="high", no lazy-loading, and preconnect to its
CDN host; everything below the fold is loading="lazy". One misplaced
loading="lazy" on the hero is the most common self-inflicted LCP failure.srcset + accurate sizes, explicit width/height (or aspect-ratio) on
every image — that last one is most of CLS prevention.| Page type | Default strategy | Cache / revalidate | Notes |
|---|---|---|---|
| Home / landing | SSG or ISR | minutes–hours, purge on publish | rarely needs request-time data |
| Category / PLC | ISR or edge-cached SSR | short TTL + purge on merch change | facets via client or edge query |
| PDP | ISR + client islands | purge on price/stock event | price/stock badge hydrates live |
| Search results | SSR (or client on cached shell) | no full-page cache | latency budget shared with engine |
| Cart / checkout | SSR/CSR, uncached | none | correctness > cache; keep JS lean — INP risk |
| Account / order | SSR, uncached, private | none | Cache-Control: private, no-store |
<head>, shifting layoutfont-display: swap + preload — invisible text and CLSRelated: ecom-search-merch (search latency inside the page budget),
ecom-inventory (live stock badges vs cacheability) · domain agent:
ecom-architect (storefront topology, CDN choice) · output/ADR format:
playbook-conventions
Provides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
npx claudepluginhub ggrace519/claude-code-dev-studio --plugin ccds-ecom