Astro 框架技能是什么？

该技能为 AI 代理提供利用 Astro 框架构建现代 Web 网站的完整能力。Astro 是一款默认向客户端发送零 JavaScript 的 Web 框架，采用基于组件的架构，并支持在同一项目中混用 React、Vue、Svelte 等多种前端框架。该技能详细指导了从项目搭建（使用 `npm create astro@latest` 创建）、页面创建（基于文件的路由，支持动态路由 `[param]` 语法）、组件开发（可重用组件，支持框架间混用和 Nano Stores 状态共享）、数据与内容管理（使用 Content Collections 进行类型安全的 Markdown/MDX 处理，以及构建时数据获取）到部署（适配 Vercel、Netlify、Cloudflare Pages 等平台，支持静态生成与 SSR）的完整流程。此外，还提供了博客、落地页、文档及电商等多种场景的示例，并指出了其不适合高交互应用、状态管理受限以及 SSR 增加复杂性等局限性，帮助开发者与 AI 代理做出合理的技术选型。

兼容平台~Claude Code~Codex CLI~Cursor✓OpenCode

npx skills add https://github.com/Heldinhow/awesome-opencode-dev-skills/tree/HEAD/astro-framework

文档

Astro 框架

概述

Astro 是一个默认向客户端发送零 JavaScript 的 Web 框架。它采用基于组件的架构，并支持在同一项目中使用多种前端框架（React、Vue、Svelte 等）。

流程

1. 项目搭建

npm create astro@latest
# 选择模板（博客、文档、作品集等）
# 安装依赖

2. 创建页面

页面位于 src/pages/ 目录
基于文件的路由
支持使用 [param] 语法创建动态路由

3. 组件

在 src/components/ 中创建可重用组件
使用任意受支持的框架（--- astro/react/vue/svelte ---）
使用 Nano Stores 共享状态

4. 数据与内容

使用 Content Collections 进行类型安全的 Markdown/MDX 处理
通过 getStaticPaths 在构建时获取数据
连接数据库、API、CMS

5. 部署

部署到 Vercel、Netlify、Cloudflare Pages 或任何适配器
使用 npm run build 构建
需要时可通过 output: 'server' 启用 SSR

示例

博客：Content Collections + Markdown + RSS 订阅
落地页：静态生成 + 部分水合
文档：Starlight 主题集成
电商：SSR + 数据库 + 支付集成

局限性

不适合高度交互的应用（这种情况请使用 Next.js）
没有 Nano Stores 的情况下，客户端状态管理能力有限
SSR 会增加复杂性——仅在需要时使用
某些 React 库与孤岛架构配合不佳

Astro 框架技能