web-performance

Configure Apollo fetch policies, Redis TTLs, and CloudFront caching for web apps.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/AlexanderStephenThompson/claude-hub --skill web-performance
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-performance
Source: https://github.com/AlexanderStephenThompson/claude-hub/tree/main/web/skills/web-performance
Command: npx skills add https://github.com/AlexanderStephenThompson/claude-hub --skill web-performance

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend performance bottlenecks arise from unoptimized caching, large payloads, and inconsistent CDN behavior, leading to slow interactions and higher latency for users.

Core Features & Use Cases

  • Apollo Client/Server caching patterns to normalize and merge data efficiently.
  • Redis caching layer integration to reduce backend load and latency with proper TTLs and invalidation.
  • CloudFront/S3 strategies for static assets to maximize delivery speed and minimize bundle impact.
  • Use Case: In a data-heavy React app, apply these patterns to keep hot data readily available while ensuring freshness for dynamic content.

Quick Start

Analyze a React app and generate a caching strategy using Apollo, Redis, and CloudFront to improve performance.

Frequently Asked Questions about web-performance

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I optimize frontend performance using Apollo, Redis, and CloudFront?

You can optimize frontend performance by applying Apollo caching patterns to normalize data, integrating Redis to reduce backend latency with proper TTLs, and using CloudFront with S3 to maximize static asset delivery speed. This reduces latency and improves user experience across page loads and API calls.

What is the best way to configure Apollo fetch policies for a data-heavy React app?

The best way to configure Apollo fetch policies is to apply caching patterns that normalize and merge data efficiently. This keeps hot data readily available while ensuring freshness for dynamic content, reducing unnecessary network requests.

How do I implement Redis caching to reduce backend load and latency?

You implement Redis caching by configuring a caching layer with proper TTLs and data invalidation strategies. This reduces backend load and latency by serving frequently accessed data directly from memory instead of hitting the primary database.

Can I use CloudFront and S3 to cache static assets and minimize bundle impact?

Yes, you can use CloudFront and S3 strategies to cache static assets. This maximizes content delivery speed and minimizes bundle impact by serving files from edge locations closer to your users.

Why does inconsistent CDN behavior cause slow interactions in web applications?

Inconsistent CDN behavior causes slow interactions because unoptimized caching and large payloads force repeated fetches and increase latency. Applying consistent CloudFront and S3 caching strategies ensures static assets are delivered quickly from edge locations.

Do I need a specific framework to apply these caching strategies?

These caching strategies target web applications using Apollo, Redis, and CloudFront. You need a React frontend and the supporting backend infrastructure to effectively configure fetch policies, TTLs, and static asset delivery.