mcpField
C
create-component

create-component

github.com/incluud开发14445 次安装27 周前更新
代码仓库

关于 create-component

根据功能需求、设计或静态标记搭建 Astro 组件、页面、布局和路由的技能。它强调类型化 props、语义化且易于访问的标记，并将客户端交互限制在必要范围内。

主要功能

  1. 01选择组件、页面、布局或路由
  2. 02明确精简的 props 与插槽约定
  3. 03使用类型化 props 和语义结构
  4. 04限制客户端交互与水合范围
  5. 05检查无障碍要求和项目规范

适用场景

  1. 01将静态 HTML 转为 Astro 组件
  2. 02搭建路由或共享布局
  3. 03拆分大型 Astro 文件
  4. 04根据设计编写易于访问的标记

安装

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

$npx skills add https://github.com/incluud/astro-agent-skills --skill create-component

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

详细介绍

创建 Astro 组件

在根据功能需求、设计稿或静态标记搭建新的 Astro 组件、页面、布局或路由时，使用此技能。

如果有 astro-best-practices，请结合此技能应用它，以遵循项目级约定和审查标准。

工作流

1. 选择合适的文件类型

选择满足需求的最简单构件：

  • 组件：src/components/ 中的可复用 UI
  • 页面：src/pages/ 中的路由入口
  • 布局：src/layouts/ 中的共享外壳
  • 框架岛：仅在需要交互时使用 React、Vue 或类似框架

除非确实需要客户端框架状态，否则从 .astro 开始。

2. 明确契约

搭建前，确定：

  • 文件接受哪些 props
  • 是否渲染子项或具名插槽
  • 是否会获取数据
  • 是否需要任何交互
  • 项目当前使用哪种样式方案

保持公开接口精简。如果某个 prop 不会实质性改变渲染结果，通常就不应该存在。

3. 采用稳健的默认设置进行搭建

使用类型化 props 和语义化结构：

---
interface Props {
  title: string
  variant?: 'primary' | 'secondary'
}

const { title, variant = 'primary' } = Astro.props
---

<section class:list={['card', variant]}>
  <h2>{title}</h2>
  <slot />
</section>

<style>
  .card {
    padding: 1rem;
  }
</style>

良好的默认做法：

  • 优先使用语义化元素，而不是通用的 div
  • 采用合理的标题结构
  • 为 props 设置恰当的默认值
  • 除非项目有意采用其他模式，否则使用作用域样式
  • 使用 class:list 添加条件类名，让标记更清晰
4. 仅在需要时添加交互

如果组件需要客户端行为：

  • 尽可能缩小交互部分
  • 如果项目采用此模式，将其隔离在框架组件中
  • 选择能满足需求的最轻量水合指令

示例：

---
import SearchBox from './SearchBox.tsx'
---

<SearchBox client:visible />

如果只需一个小型交互叶子组件即可满足需求，就不要把页面的大块区域变成框架岛。

5. 检查无障碍性和健壮性

在完成组件前，检查：

  • 语义化 HTML 是否恰当
  • 交互元素是否可通过键盘访问
  • 是否有可见标签和无障碍名称
  • 图片的 alt 行为是否正确
  • 标题级别在上下文中是否合理
  • 焦点状态是否仍然可见
6. 让组件符合项目规范

与现有代码库保持一致：

  • 遵循命名约定
  • 保持既有的布局和样式方案
  • 让导入路径保持相对且易读
  • 不要仅为模仿静态 HTML 而引入框架依赖

适用场景

  • 将静态 HTML 转换为 Astro 组件
  • 搭建新路由或布局
  • 将大型 Astro 文件拆分为更小的部分
  • 将设计稿转换为无障碍的 Astro 标记

评论

支持 Markdown