关于 astro
这项技能为 Astro 项目开发者提供组件编写规范，涵盖精简属性、组件选择、渲染返回值和字体加载方式。
主要功能
- 01精简组件属性定义
- 02剔除未使用的输入字段
- 03避免水合组件返回 null
- 04使用 Astro fontProviders
- 05优先采用静态 .astro 组件
适用场景
- 01定义专注的组件接口
- 02防止多余字段进入 HTML
- 03避免误报 Hook 警告
- 04通过 Astro 加载字体
- 05为静态界面选择组件
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/astro确认已加载。
详细介绍
Astro 指南
精简 Props
组件应定义精简的 Props 接口，只包含组件所需的数据。不要预先考虑未来的需求；如果组件当前不使用某个属性，就不应将其加入 Props。
传入组件的数据不应包含 Props 中未指定的属性。应剔除多余字段，否则它们最终会出现在生产环境的 html 中。
示例
如果 Button 组件有
interface Props {
user: { name: string };
}
而父组件有以下数据
const aUser = {
name: "Any Thing",
id: "123abc",
};
请先在组件脚本中剔除 'id'，得到
const propUser = {
name: "Any Thing",
};
并且在模板中只使用 propUser
---
import Button from './Button.astro';
const propUser = {
name: 'Any Thing',
}
---
<Button user={propUser} />
避免返回 null
如果同时使用 @astro/react 和 @astro/mdx，通过 client:* 指令渲染的组件不应返回 null。否则会触发误报的“Invalid hook call.”警告。
为避免这种情况，请返回 <></>（即空片段），而不是 null。
字体
不要使用 @import url(...) 或 @font-face{} 向样式表添加字体。请改用 Astro 的 fontProviders，它会优化字体加载。指南。
优先使用 .astro 组件
即使应用支持其他 UI 框架（React、Vue 等），也应谨慎使用。如果组件不需要交互，请使用 .astro 组件。 这样可以明确表明无法进行水合，并可使用强大的 .astro 专属功能，例如脚本指令和构建时 JavaScript 执行。
创建新组件时，只有在以下任一情况成立时才使用 UI 框架组件：该组件本身具有交互性，或需要由 UI 框架组件导入。如果静态组件可以通过 <slot> 传入 UI 组件，则静态组件应来自 .astro 文件。
评论
支持 Markdown