---

name: jamstack-static-architecture description: Guidelines for implementing Jamstack architecture. ONLY invoke this skill when the user explicitly requests 'Jamstack architecture' or 'Static Data Architecture'.

Jamstack Static Data Architecture

This skill provides guidelines for transforming dynamic runtime API applications into highly performant, statically generated applications (Jamstack). Use this skill when a user wants to scale their application, avoid API quota limits, reduce serverless function cold starts, or improve page load speeds.

Core Philosophy

Instead of fetching data from a third-party API (like YouTube, Twitter, or a CMS) every time a user visits the page (runtime), we fetch the data once during a build step and save it as a static json file. The frontend then simply reads this static file.

Implementation Steps

1. Create a Sync Script (scripts/sync_data.js)

Create a Node.js or Python script that handles the data fetching.

• The script should securely read API keys from a local .env file.
• It should fetch all necessary data from the third-party API, handling pagination if required.
• It should process, filter, and structure the data optimally for the frontend.
• It should output the result to a static file (e.g., data.json or videos.json) in the public directory.

2. Update Frontend Logic

Modify the frontend JavaScript (e.g., script.js) to remove the dynamic API calls.

• Replace fetch('/api/my-serverless-function') with fetch('./data.json?v=' + Date.now()).
• Add a Skeleton Loader animation to display while the local JSON is being fetched. This improves perceived performance and prevents layout shift.

3. Remove Serverless Functions

Delete any serverless API routes (e.g., /api/youtube.js) since they are no longer needed. This removes security risks and completely eliminates cold-start latency.

4. Git Configuration

Ensure that .env is listed in .gitignore so API keys are never pushed to the repository. The generated data.json file should be committed if the site relies on it and a CI/CD pipeline (like GitHub Actions) is not yet set up to run the sync script automatically.

Benefits to Explain to the User

When implementing this architecture, clearly explain to the user:

• Zero API Quotas: The live site never touches the external API, making rate-limiting impossible.
• Global CDN Speed: Static files are cached on edge nodes worldwide, resulting in single-digit millisecond load times.
• Enhanced Security: API keys remain strictly on the local machine (or secure CI environment) and never exist on the production server.