Netlify Frameworks

This gives Claude the context it needs to help you deploy framework projects to Netlify without manually wiring up functions. It covers the adapter system that translates SSR, API routes, and middleware into Netlify Functions automatically, plus framework detection, environment variable patterns across Vite, Astro, Next.js, and others, and how to set up SPAs with catch-all redirects. The skill is most useful when you're configuring a new framework deployment or debugging why server-side features aren't working as expected. It cuts through the usual confusion about what the adapter actually does during build.

skills.sh installs: 3.4K
GitHub stars: 51
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add netlify/context-and-tools --skill netlify-frameworks --agent claude-code

Installs into .claude/skills of the current project.

Files

Route framework-specific deep work to the guides in this skill: references/astro.md, references/nextjs.md, references/nuxt.md, references/sveltekit.md, references/tanstack.md, references/vite.md.

Env vars: modern rules (read first)

Env values are injected at build time. Any change (client- or server-side) requires a redeploy — editing a var in the UI/CLI does NOT reach the live site or already-deployed functions until a new build runs.

Never use a client prefix for secrets. Client-prefixed vars are inlined into the browser bundle: VITE_, NEXT_PUBLIC_, PUBLIC_, NUXT_PUBLIC_, REACT_APP_, GATSBY_, VUE_APP_.

Client-embed prefixes by framework: CRA REACT_APP_, Gatsby GATSBY_, Next NEXT_PUBLIC_, Nuxt NUXT_ENV_, Vue CLI VUE_APP_.

Scopes: build-time access needs Builds scope; SSR/DSG runtime access needs both Functions and Builds. netlify.toml is read only during build — functions cannot read it at runtime; set runtime vars in UI/CLI/API.

SKILL.md on GitHub