AGENT SKILL

netlify-frameworks

Guide for deploying web frameworks on Netlify. Use when setting up a framework project (Vite/React, Astro, TanStack Start, Next.js, Nuxt, SvelteKit, Remix) for Netlify deployment, configuring adapters or plugins, or troubleshooting framework-specific Netlify integration. Covers what Netlify needs from each framework and how adapters handle server-side rendering.

License 许可
Apache-2.0
所属仓库
Thamielis/.agents
最近更新
2026-06-08
Stars
★ 0
Forks
0

01 前言 Front Matter

name
netlify-frameworks
description
Guide for deploying web frameworks on Netlify. Use when setting up a framework project (Vite/React, Astro, TanStack Start, Next.js, Nuxt, SvelteKit, Remix) for Netlify deployment, configuring adapters or plugins, or troubleshooting framework-specific Netlify integration. Covers what Netlify needs from each framework and how adapters handle server-side rendering.

02 资源文件 8

03 SKILL.md 正文

Frameworks on Netlify

Netlify supports any framework that produces static output. For frameworks with server-side capabilities (SSR, API routes, middleware), an adapter or plugin translates the framework's server-side code into Netlify Functions and Edge Functions automatically.

How It Works

During build, the framework adapter writes files to .netlify/v1/ — functions, edge functions, redirects, and configuration. Netlify reads these to deploy the site. You do not need to write Netlify Functions manually when using a framework adapter for server-side features.

Detecting Your Framework

Check these files to determine the framework:

File Framework
astro.config.* Astro
next.config.* Next.js
nuxt.config.* Nuxt
vite.config.* + react-router Vite + React (SPA or Remix)
app.config.* + @tanstack/react-start TanStack Start
svelte.config.* SvelteKit

Framework Reference Guides

Each framework has specific adapter/plugin requirements and local dev patterns:

General Patterns

Client-Side Routing (SPA)

For single-page apps with client-side routing, add a catch-all redirect:

# netlify.toml
[[redirects]]
from = "/*"
to = "/index.html"
status = 200

Custom 404 Pages

  • Static sites: Create a 404.html in your publish directory. Netlify serves it automatically for unmatched routes.
  • SSR frameworks: Handle 404s in the framework's routing (the adapter maps this to Netlify's function routing).

Environment Variables in Frameworks

Each framework exposes environment variables to client-side code differently:

Framework Client prefix Access pattern
Vite / React VITE_ import.meta.env.VITE_VAR
Astro PUBLIC_ import.meta.env.PUBLIC_VAR
Next.js NEXT_PUBLIC_ process.env.NEXT_PUBLIC_VAR
Nuxt NUXT_PUBLIC_ useRuntimeConfig().public.var

Server-side code in all frameworks can access variables via process.env.VAR or Netlify.env.get("VAR").

Bundled References (Load As Needed)

04 同仓库更多 Skills

Thamielis
Thamielis/.agents

webapp-testing

Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.

测试与质量前端开发
★ 0
Thamielis
Thamielis/.agents

web-artifacts-builder

Suite of tools for creating elaborate, multi-component Codex.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

前端开发
★ 0
Thamielis
Thamielis/.agents

visual-explainer

Generate beautiful, self-contained HTML pages that visually explain systems, code changes, plans, and data. Use when the user asks for a diagram, architecture overview, diff review, plan review, project recap, comparison table, or any visual explanation of technical concepts. Also use proactively when you are about to render a complex ASCII table (4+ rows or 3+ columns) — present it as a styled HTML page instead.

数据分析师前端开发
★ 0
Thamielis
Thamielis/.agents

transloadit-media-processing

Process media files (video, audio, images, documents) using Transloadit. Use when asked to encode video to HLS/MP4, generate thumbnails, resize or watermark images, extract audio, concatenate clips, add subtitles, OCR documents, or run any media processing pipeline. Covers 86+ processing robots for file transformation at scale.

图像与多媒体Skill与智能体开发
★ 0
Thamielis
Thamielis/.agents

theme-factory

Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.

视觉设计
★ 0
Thamielis
Thamielis/.agents

terraform-azurerm-set-diff-analyzer

Analyze Terraform plan JSON output for AzureRM Provider to distinguish between false-positive diffs (order-only changes in Set-type attributes) and actual resource changes. Use when reviewing terraform plan output for Azure resources like Application Gateway, Load Balancer, Firewall, Front Door, NSG, and other resources with Set-type attributes that cause spurious diffs due to internal ordering changes.

运维与部署
★ 0