Astro (TypeScript)
一个基于TypeScript的现代化前端开发框架，用于构建高性能网站和应用。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：Astro (TypeScript)。 它的用途是：一个基于TypeScript的现代化前端开发框架，用于构建高性能网站和应用。 详细介绍见：https://321skill.com/skills/astro-typescript/ 请根据该页面的说明完成安装。
使用示例
“帮我用Astro框架创建一个简单的博客首页，包含文章列表和导航栏。”，它会生成一个基础的Astro项目结构，包含布局组件、页面文件和一篇示例文章的Markdown内容，并解释如何运行开发服务器和构建静态站点。
介绍
Astro是一个现代化的前端框架，主要解决构建内容驱动型网站时遇到的性能瓶颈和开发体验问题。它通过创新的“岛屿架构”（Islands Architecture），默认将大部分页面内容渲染为静态HTML，仅在需要交互的组件处注入JavaScript，从而大幅提升页面加载速度和用户体验。
使用Astro时，开发者可以用熟悉的组件语法（如React、Vue、Svelte）编写UI，框架会在构建时将它们高效地编译成静态HTML。对于需要交互的部分，开发者可以明确声明其为“岛屿”，Astro会按需加载对应的JavaScript。这种模式使得开发者可以轻松混合使用不同的UI框架。
Astro非常适合前端开发、全栈开发以及内容创作者，特别是那些需要构建博客、文档站、营销官网、电商落地页等对性能和SEO有高要求的静态或半静态网站。对于追求极致加载速度、希望减少客户端JavaScript体积的团队来说，Astro是一个理想选择。
使用建议是，充分利用其静态生成的优势，将尽可能多的页面预渲染为静态文件。对于复杂的单页应用（SPA）或需要大量客户端状态管理的应用，可能需要评估其“岛屿”模式是否满足需求。注意其服务端渲染（SSR）功能需要额外配置，适合有动态内容需求的场景。
核心特点
Astro的核心区别在于其“岛屿架构”，它并非一个传统意义上的SPA或SSR框架，而是优先生成静态HTML，并智能地、按需地为交互式组件注入JavaScript，从而在保持现代开发体验的同时，实现了接近纯静态站点的加载性能。
注意事项
不适合构建需要大量客户端状态管理和复杂路由交互的纯单页应用（SPA）。
常见问题
Astro和Next.js有什么区别？
Astro默认以静态生成为主，按需激活交互组件，追求极致的加载性能；Next.js更侧重于服务端渲染（SSR）和完整的React应用体验，适合构建复杂的动态Web应用。
Astro支持哪些UI框架？
Astro支持React、Vue、Svelte、Preact、SolidJS等多种流行框架，甚至可以在同一个项目中混合使用。