SuperAPI AI 工具集

astro

前端与建站

查看项目

更新于 10-15 21:47

技能介绍

用途:这是一份针对 Astro 项目的开发规范指南,当检测到项目包含一个或多个 .astro 文件,或以 astro 作为依赖时使用。

主要能力与规范要点:

  1. 最小化 Props:组件应只声明当前实际需要的数据接口,不要预设未来需求;未使用的属性不应出现在 Props 中。传入组件的数据若包含 Props 未声明的字段,应先剥离,否则多余字段会进入生产环境 HTML。示例中 Button 的 Props 只含 user.name,父组件数据里的 id 需在脚本中先剔除,模板只使用剔除后的对象。
  2. 避免返回 null:同时使用 @astro/react 与 @astro/mdx 时,带 client:* 指令渲染的组件不应返回 null,否则会触发虚假的 “Invalid hook call.” 警告;应返回空片段 <></> 代替 null。
  3. 字体:不要用 @import url(...) 或 @font-face{} 在样式表中添加字体,应改用 Astro 的 fontProviders 以优化字体加载。
  4. 优先使用 .astro 组件:即使项目支持 React、Vue 等其他 UI 框架,也应节制使用。不需要交互的组件应写成 .astro 组件,这样能明确其不可水合,并可使用 script 指令、构建时执行 JavaScript 等 .astro 专属能力。新建组件时,仅当组件本身具有交互性,或需要被 UI 框架组件导入时,才使用 UI 框架组件;若静态组件可通过 <slot> 传入 UI 组件,则该静态组件应来自 .astro 文件。

使用方式:作为开发时的参考规范,在编写或审查 Astro 项目代码时对照执行。

限制:资料未提供安装命令、版本要求、收费信息或具体平台支持范围,暂未提供。