[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M71P4MCS7SA9025JDV935ZNA":3,"skill-same:01M71P4MCS7SA9025JDV935ZNA":101},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":15,"sourceHtmlUrl":16,"categories":17,"keywords":18,"publishedAt":39,"linkOnly":40,"markdownContent":41,"markdownBody":42,"frontMatter":43,"refName":44,"commitSha":45,"skillDirectory":46,"forksCount":13,"repositoryHtmlUrl":47,"repositoryHomepageUrl":6,"ownerHtmlUrl":48,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":49,"install":50,"resources":63},"01M71P4MCS7SA9025JDV935ZNA","netlify-frameworks",null,"Guide for deploying web frameworks on Netlify. Use when setting up a framework project (Vite\u002FReact, 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.","Thamielis\u002F.agents","Thamielis","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F52717133?v=4","01M71NG040Z4RAKTDW6JVQTZA0","01M71NG04N9WFE1H3RH0BF6VDY",0,"Apache-2.0","https:\u002F\u002Fgithub.com\u002FThamielis\u002F.agents\u002Fblob\u002Fmain\u002Fplugins\u002Fnetlify\u002Fskills\u002Fnetlify-frameworks\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002FThamielis\u002F.agents\u002Fblob\u002Fmain\u002Fplugins\u002Fnetlify\u002Fskills\u002Fnetlify-frameworks\u002FSKILL.md",[],[19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38],"frameworks","netlify frameworks","netlify","for","setting","framework","guide","start","rendering","how","next","server","astro","react","framework-specific","when","up","tanstack start","remix","project","2026-11-10 10:56:23",false,"---\nname: netlify-frameworks\ndescription: Guide for deploying web frameworks on Netlify. Use when setting up a framework project (Vite\u002FReact, 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.\n---\n\n# Frameworks on Netlify\n\nNetlify 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.\n\n## How It Works\n\nDuring build, the framework adapter writes files to `.netlify\u002Fv1\u002F` — 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.\n\n## Detecting Your Framework\n\nCheck these files to determine the framework:\n\n| File | Framework |\n|---|---|\n| `astro.config.*` | Astro |\n| `next.config.*` | Next.js |\n| `nuxt.config.*` | Nuxt |\n| `vite.config.*` + `react-router` | Vite + React (SPA or Remix) |\n| `app.config.*` + `@tanstack\u002Freact-start` | TanStack Start |\n| `svelte.config.*` | SvelteKit |\n\n## Framework Reference Guides\n\nEach framework has specific adapter\u002Fplugin requirements and local dev patterns:\n\n- **Vite + React (SPA or with server routes)**: See [references\u002Fvite.md](references\u002Fvite.md)\n- **Astro**: See [references\u002Fastro.md](references\u002Fastro.md)\n- **TanStack Start**: See [references\u002Ftanstack.md](references\u002Ftanstack.md)\n- **Next.js**: See [references\u002Fnextjs.md](references\u002Fnextjs.md)\n\n## General Patterns\n\n### Client-Side Routing (SPA)\n\nFor single-page apps with client-side routing, add a catch-all redirect:\n\n```toml\n# netlify.toml\n[[redirects]]\nfrom = \"\u002F*\"\nto = \"\u002Findex.html\"\nstatus = 200\n```\n\n### Custom 404 Pages\n\n- **Static sites**: Create a `404.html` in your publish directory. Netlify serves it automatically for unmatched routes.\n- **SSR frameworks**: Handle 404s in the framework's routing (the adapter maps this to Netlify's function routing).\n\n### Environment Variables in Frameworks\n\nEach framework exposes environment variables to client-side code differently:\n\n| Framework | Client prefix | Access pattern |\n|---|---|---|\n| Vite \u002F React | `VITE_` | `import.meta.env.VITE_VAR` |\n| Astro | `PUBLIC_` | `import.meta.env.PUBLIC_VAR` |\n| Next.js | `NEXT_PUBLIC_` | `process.env.NEXT_PUBLIC_VAR` |\n| Nuxt | `NUXT_PUBLIC_` | `useRuntimeConfig().public.var` |\n\nServer-side code in all frameworks can access variables via `process.env.VAR` or `Netlify.env.get(\"VAR\")`.\n\n## Bundled References (Load As Needed)\n\n- [Vite + React guide](references\u002Fvite.md)\n- [Astro guide](references\u002Fastro.md)\n- [TanStack Start guide](references\u002Ftanstack.md)\n- [Next.js guide](references\u002Fnextjs.md)\n","# Frameworks on Netlify\n\nNetlify 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.\n\n## How It Works\n\nDuring build, the framework adapter writes files to `.netlify\u002Fv1\u002F` — 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.\n\n## Detecting Your Framework\n\nCheck these files to determine the framework:\n\n| File | Framework |\n|---|---|\n| `astro.config.*` | Astro |\n| `next.config.*` | Next.js |\n| `nuxt.config.*` | Nuxt |\n| `vite.config.*` + `react-router` | Vite + React (SPA or Remix) |\n| `app.config.*` + `@tanstack\u002Freact-start` | TanStack Start |\n| `svelte.config.*` | SvelteKit |\n\n## Framework Reference Guides\n\nEach framework has specific adapter\u002Fplugin requirements and local dev patterns:\n\n- **Vite + React (SPA or with server routes)**: See [references\u002Fvite.md](references\u002Fvite.md)\n- **Astro**: See [references\u002Fastro.md](references\u002Fastro.md)\n- **TanStack Start**: See [references\u002Ftanstack.md](references\u002Ftanstack.md)\n- **Next.js**: See [references\u002Fnextjs.md](references\u002Fnextjs.md)\n\n## General Patterns\n\n### Client-Side Routing (SPA)\n\nFor single-page apps with client-side routing, add a catch-all redirect:\n\n```toml\n# netlify.toml\n[[redirects]]\nfrom = \"\u002F*\"\nto = \"\u002Findex.html\"\nstatus = 200\n```\n\n### Custom 404 Pages\n\n- **Static sites**: Create a `404.html` in your publish directory. Netlify serves it automatically for unmatched routes.\n- **SSR frameworks**: Handle 404s in the framework's routing (the adapter maps this to Netlify's function routing).\n\n### Environment Variables in Frameworks\n\nEach framework exposes environment variables to client-side code differently:\n\n| Framework | Client prefix | Access pattern |\n|---|---|---|\n| Vite \u002F React | `VITE_` | `import.meta.env.VITE_VAR` |\n| Astro | `PUBLIC_` | `import.meta.env.PUBLIC_VAR` |\n| Next.js | `NEXT_PUBLIC_` | `process.env.NEXT_PUBLIC_VAR` |\n| Nuxt | `NUXT_PUBLIC_` | `useRuntimeConfig().public.var` |\n\nServer-side code in all frameworks can access variables via `process.env.VAR` or `Netlify.env.get(\"VAR\")`.\n\n## Bundled References (Load As Needed)\n\n- [Vite + React guide](references\u002Fvite.md)\n- [Astro guide](references\u002Fastro.md)\n- [TanStack Start guide](references\u002Ftanstack.md)\n- [Next.js guide](references\u002Fnextjs.md)\n",{"name":5,"description":7},"main","dd673a28ba66191245f0e384c525b1dcff1c427a","plugins\u002Fnetlify\u002Fskills\u002Fnetlify-frameworks","https:\u002F\u002Fgithub.com\u002FThamielis\u002F.agents","https:\u002F\u002Fgithub.com\u002FThamielis","2026-06-08 04:03:12",{"source":8,"skillName":5,"commands":51,"prompt":61,"zipAvailable":62},[52,55,58],{"tool":53,"command":54},"npx","npx skills add Thamielis\u002F.agents --skill netlify-frameworks",{"tool":56,"command":57},"bunx","bunx skills add Thamielis\u002F.agents --skill netlify-frameworks",{"tool":59,"command":60},"pnpm","pnpm dlx skills add Thamielis\u002F.agents --skill netlify-frameworks","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FThamielis\u002F.agents\u002Fblob\u002Fmain\u002Fplugins\u002Fnetlify\u002Fskills\u002Fnetlify-frameworks\u002FSKILL.md",true,[64,70,76,80,85,89,93,97],{"path":65,"resourceType":66,"resourceTypeDesc":67,"sizeBytes":68,"sourceHtmlUrl":69},"agents\u002Fopenai.yaml","REFERENCE","参考文档",353,"https:\u002F\u002Fgithub.com\u002FThamielis\u002F.agents\u002Fblob\u002Fmain\u002Fplugins\u002Fnetlify\u002Fskills\u002Fnetlify-frameworks\u002Fagents\u002Fopenai.yaml",{"path":71,"resourceType":72,"resourceTypeDesc":73,"sizeBytes":74,"sourceHtmlUrl":75},"assets\u002Fnetlify-small.svg","ASSET","资产文件",1291,"https:\u002F\u002Fgithub.com\u002FThamielis\u002F.agents\u002Fblob\u002Fmain\u002Fplugins\u002Fnetlify\u002Fskills\u002Fnetlify-frameworks\u002Fassets\u002Fnetlify-small.svg",{"path":77,"resourceType":72,"resourceTypeDesc":73,"sizeBytes":78,"sourceHtmlUrl":79},"assets\u002Fnetlify.png",2686,"https:\u002F\u002Fgithub.com\u002FThamielis\u002F.agents\u002Fblob\u002Fmain\u002Fplugins\u002Fnetlify\u002Fskills\u002Fnetlify-frameworks\u002Fassets\u002Fnetlify.png",{"path":81,"resourceType":82,"resourceTypeDesc":83,"sizeBytes":84,"sourceHtmlUrl":15},"LICENSE.txt","LICENSE","许可证",10776,{"path":86,"resourceType":66,"resourceTypeDesc":67,"sizeBytes":87,"sourceHtmlUrl":88},"references\u002Fastro.md",3066,"https:\u002F\u002Fgithub.com\u002FThamielis\u002F.agents\u002Fblob\u002Fmain\u002Fplugins\u002Fnetlify\u002Fskills\u002Fnetlify-frameworks\u002Freferences\u002Fastro.md",{"path":90,"resourceType":66,"resourceTypeDesc":67,"sizeBytes":91,"sourceHtmlUrl":92},"references\u002Fnextjs.md",2425,"https:\u002F\u002Fgithub.com\u002FThamielis\u002F.agents\u002Fblob\u002Fmain\u002Fplugins\u002Fnetlify\u002Fskills\u002Fnetlify-frameworks\u002Freferences\u002Fnextjs.md",{"path":94,"resourceType":66,"resourceTypeDesc":67,"sizeBytes":95,"sourceHtmlUrl":96},"references\u002Ftanstack.md",1449,"https:\u002F\u002Fgithub.com\u002FThamielis\u002F.agents\u002Fblob\u002Fmain\u002Fplugins\u002Fnetlify\u002Fskills\u002Fnetlify-frameworks\u002Freferences\u002Ftanstack.md",{"path":98,"resourceType":66,"resourceTypeDesc":67,"sizeBytes":99,"sourceHtmlUrl":100},"references\u002Fvite.md",2406,"https:\u002F\u002Fgithub.com\u002FThamielis\u002F.agents\u002Fblob\u002Fmain\u002Fplugins\u002Fnetlify\u002Fskills\u002Fnetlify-frameworks\u002Freferences\u002Fvite.md",[102,135,160,191,221,246],{"skillNo":103,"name":104,"nameZh":6,"description":105,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":106,"sourceHtmlUrl":107,"categories":108,"keywords":117,"publishedAt":134},"01M71QFD7835D0JG8MS43NRRVE","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.","https:\u002F\u002Fgithub.com\u002FThamielis\u002F.agents\u002Fblob\u002Fmain\u002Fskills\u002Fwebapp-testing\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002FThamielis\u002F.agents\u002Fblob\u002Fmain\u002Fskills\u002Fwebapp-testing\u002FSKILL.md",[109,114],{"categoryNo":110,"categoryName":111,"taxonomyType":112,"taxonomyTypeDesc":113},"01JBSEEDCAT000000000000008","测试与质量","SCENARIO","使用场景",{"categoryNo":115,"categoryName":116,"taxonomyType":112,"taxonomyTypeDesc":113},"01JBSEEDCAT000000000000009","前端开发",[118,119,120,121,122,123,124,125,126,127,22,128,129,130,131,132,133],"webapp","testing","webapp testing","local","frontend","debugging","logs","browser","ui","screenshots","applications","toolkit","with","playwright","web","behavior","2026-11-10 13:02:02",{"skillNo":136,"name":137,"nameZh":6,"description":138,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":139,"sourceHtmlUrl":140,"categories":141,"keywords":143,"publishedAt":134},"01M71QF1RVYQPZ2HPHXYWBC27K","web-artifacts-builder","Suite of tools for creating elaborate, multi-component Codex.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn\u002Fui). Use for complex artifacts requiring state management, routing, or shadcn\u002Fui components - not for simple single-file HTML\u002FJSX artifacts.","https:\u002F\u002Fgithub.com\u002FThamielis\u002F.agents\u002Fblob\u002Fmain\u002Fskills\u002Fweb-artifacts-builder\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002FThamielis\u002F.agents\u002Fblob\u002Fmain\u002Fskills\u002Fweb-artifacts-builder\u002FSKILL.md",[142],{"categoryNo":115,"categoryName":116,"taxonomyType":112,"taxonomyTypeDesc":113},[144,145,146,132,147,148,149,22,150,151,122,152,153,154,155,32,156,157,158,159],"builder","artifacts builder","artifacts","web artifacts builder","single-file","css","Tailwind","ui components","single","use","file","components","multi","state","routing","state management",{"skillNo":161,"name":162,"nameZh":6,"description":163,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":164,"licenseFileUrl":6,"sourceHtmlUrl":165,"categories":166,"keywords":173,"publishedAt":134},"01M71QEMXGG7MTTMSRVE3YFCXC","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.","MIT","https:\u002F\u002Fgithub.com\u002FThamielis\u002F.agents\u002Fblob\u002Fmain\u002Fskills\u002Fvisual-explainer\u002FSKILL.md",[167,168],{"categoryNo":115,"categoryName":116,"taxonomyType":112,"taxonomyTypeDesc":113},{"categoryNo":169,"categoryName":170,"taxonomyType":171,"taxonomyTypeDesc":172},"01JBSEEDCAT000000000000033","数据分析师","PROFESSION","适用职业",[174,175,176,38,177,178,179,180,181,182,183,184,185,186,187,22,188,189,190,153],"visual","visual explainer","explainer","files","image","you","architecture","plan","generate","present","concepts","table","as","view","ascii table","ascii","surf",{"skillNo":192,"name":193,"nameZh":6,"description":194,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":164,"licenseFileUrl":6,"sourceHtmlUrl":195,"categories":196,"keywords":203,"publishedAt":134},"01M71QDJVMVM82514TRK7VHXC5","transloadit-media-processing","Process media files (video, audio, images, documents) using Transloadit. Use when asked to encode video to HLS\u002FMP4, 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.","https:\u002F\u002Fgithub.com\u002FThamielis\u002F.agents\u002Fblob\u002Fmain\u002Fskills\u002Ftransloadit-media-processing\u002FSKILL.md",[197,200],{"categoryNo":198,"categoryName":199,"taxonomyType":112,"taxonomyTypeDesc":113},"01JBSEEDCAT000000000000016","图像与多媒体",{"categoryNo":201,"categoryName":202,"taxonomyType":112,"taxonomyTypeDesc":113},"01JBSEEDCAT000000000000023","Skill与智能体开发",[204,205,206,207,208,209,210,211,212,213,177,214,215,216,34,217,218,30,219,220],"Media","processing","transloadit media processing","media processing","transloadit","images","Video","ocr","Audio","pipeline","MCP","free","documents","mcp server","thumbnails","mcp-server","cli",{"skillNo":222,"name":223,"nameZh":6,"description":224,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":225,"sourceHtmlUrl":226,"categories":227,"keywords":231,"publishedAt":134},"01M71QDEJ4M9TP6VZRNK3J9NKX","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\u002Ffonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.","https:\u002F\u002Fgithub.com\u002FThamielis\u002F.agents\u002Fblob\u002Fmain\u002Fskills\u002Ftheme-factory\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002FThamielis\u002F.agents\u002Fblob\u002Fmain\u002Fskills\u002Ftheme-factory\u002FSKILL.md",[228],{"categoryNo":229,"categoryName":230,"taxonomyType":112,"taxonomyTypeDesc":113},"01JBSEEDCAT000000000000015","视觉设计",[232,233,234,235,236,22,237,238,239,240,179,146,241,129,242,243,130,244,182,245],"theme","theme factory","factory","SET","slides","landing","pages","new","themes","apply","can","fonts","artifact","fly",{"skillNo":247,"name":248,"nameZh":6,"description":249,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":164,"licenseFileUrl":6,"sourceHtmlUrl":250,"categories":251,"keywords":255,"publishedAt":134},"01M71QD9QXM9M9RWQX40E981D4","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.","https:\u002F\u002Fgithub.com\u002FThamielis\u002F.agents\u002Fblob\u002Fmain\u002Fskills\u002Fterraform-azurerm-set-diff-analyzer\u002FSKILL.md",[252],{"categoryNo":253,"categoryName":254,"taxonomyType":112,"taxonomyTypeDesc":113},"01JBSEEDCAT000000000000011","运维与部署",[235,256,257,258,259,260,261,262,263,22,264,265,266,267,268,269,270,271,153,272],"diff","terraform azurerm set diff analyzer","analyzer","terraform","gateway","firewall","resources","attributes","provider","resource changes","balancer","front","azure","diffs","load balancer","only","load"]