SuperAPI AI 工具集

astro-best-practices

通用与其它

查看项目

更新于 10-15 22:37

技能介绍

用途:在设计、实现或审查 Astro 项目时作为基线,将 Astro 架构指导转化为可跨智能体应用的通用规则。

主要能力与默认做法:优先静态生成,仅在确需请求时渲染时才用服务端渲染;保持客户端 JavaScript 最小化;框架孤岛只用于真实交互,且保持小而叶状。优先使用 .astro 组件承载静态或基本静态 UI,仅在需要本地状态或客户端行为时引入 React、Vue 等。水合策略按需选择:client:visible 用于延迟 UI,client:idle 用于低优先级增强,client:load 仅用于关键即时交互,client:only 仅在有意跳过服务端渲染时使用;避免对宽泛布局区域进行水合。项目结构保持可预测,典型目录为 src/ 下的 components、layouts、pages、content、styles、assets 以及 public/,无明确理由不发明新结构。

内容与数据:使用内容集合管理结构化内容,定义 schema 而非接受松散 frontmatter;除非有明确理由,在 Astro frontmatter 中获取服务端数据,并让数据流靠近所属组件或页面。

可访问性:使用 header、nav、main、article、footer 等语义地标;确保所有交互控件可键盘访问;提供有意义的标签与可访问名称;保持正确标题层级;使用恰当的图片替代文本;保留可见焦点状态;将颜色对比度视为不可妥协的基线。

性能与样式:有意识地使用 astro:assets 或项目选定的图片管线;通过提供图片尺寸或稳定容器防止布局偏移;避免不必要的客户端水合;将 CSS 与 JavaScript 限定在需要的功能范围内;优先简单服务端渲染标记。样式默认使用组件作用域样式,除非项目已有既定样式系统;用 CSS 自定义属性管理可复用令牌;非工具优先项目优先可维护布局模式;响应式行为应有意且可测试。

审查清单:检查是否有不必要的水合代码、HTML 是否保持语义、路由与布局结构是否清晰、内容 schema 是否足够强、结果是否可被键盘与辅助技术访问、实现是否符合现有项目约定。

限制:资料未提供具体安装命令、收费、价格、平台或效果数据。