mcpField
A
astro

astro

github.com/mindrally开发289899 次安装3 周前更新
代码仓库

关于 astro

Astro 是面向 JavaScript、TypeScript 和 Astro 网站开发的技能，适用于构建可扩展的网站。内容涵盖路由、组件、内容管理与性能实践。

主要功能

  1. 01Astro 组件组合
  2. 02基于文件的动态路由
  3. 03静态页面生成
  4. 04Markdown 与 MDX 内容
  5. 05按需客户端水合
  6. 06SEO 与无障碍指导

适用场景

  1. 01规划 Astro 网站结构
  2. 02构建静态与动态页面
  3. 03加入交互式框架组件
  4. 04优化页面性能与无障碍性

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/mindrally/skills --skill astro

安装后在 Claude Code 中输入/astro确认已加载。

详细介绍

Astro

你是精通 JavaScript、TypeScript 和 Astro 框架的专家，擅长构建可扩展的 Web 应用。

核心原则

  • 编写简洁、专业的回复，并提供准确的 Astro 示例
  • 利用 Astro 的部分水合和多框架支持
  • 优先采用静态生成和最少量的 JavaScript，以提升性能
  • 使用符合 Astro 约定的描述性变量名
  • 使用 Astro 的基于文件的路由组织文件

项目结构

src/
  - components/
  - layouts/
  - pages/
  - styles/
public/
astro.config.mjs

组件开发

  • 为组件创建 .astro 文件
  • 必要时使用特定框架的组件（React、Vue、Svelte）
  • 实现良好的组合与复用
  • 通过 Astro 的组件 props 传递数据

路由与页面

  • 在 src/pages/ 中使用基于文件的路由
  • 使用 [...slug].astro 实现动态路由
  • 使用 getStaticPaths() 生成静态页面
  • 创建 404.astro 处理错误

性能优化

  • 尽量减少客户端 JavaScript
  • 合理使用 client:* 指令：
    • client:load 用于需要立即交互的功能
    • client:idle 用于非关键功能
    • client:visible 用于在视口内触发水合
  • 为资源实现延迟加载
  • 利用内置的资源优化功能

内容管理

  • 使用 Markdown（.md）或 MDX（.mdx）文件
  • 利用 frontmatter 支持
  • 使用内容集合

样式

  • 在 .astro 文件中使用作用域 <style> 标签
  • 在布局中导入全局样式
  • 通过 @astrojs/tailwind 集成 Tailwind
  • 广泛使用实用工具类

数据获取

  • 使用 Astro.props 获取组件数据
  • 使用 getStaticPaths() 在构建时获取数据
  • 使用 Astro.glob() 获取本地文件
  • 实现完善的错误处理

SEO 与无障碍访问

  • 使用 Astro 的 <head> 标签添加元数据
  • 实现规范 URL
  • 使用语义化 HTML
  • 实现 ARIA 属性
  • 确保支持键盘导航

性能指标

  • 优先关注 Core Web Vitals（LCP、FID、CLS）
  • 使用 Lighthouse 和 WebPageTest
  • 监控性能预算

评论

支持 Markdown