SuperAPI AI 工具集

astro-islands

前端与建站

查看项目

更新于 10-15 21:48

技能介绍

用途:为 Astro 页面添加交互性,采用部分水合(partial hydration)架构,默认零 JS,仅在需要时通过指令选择性加载交互组件。

主要能力:支持 client:load(页面加载即执行,用于关键交互 UI)、client:idle(requestIdleCallback 后加载,用于非关键 UI)、client:visible(进入视口时加载,用于首屏以下组件)、client:media="(query)"(媒体查询匹配时加载,用于响应式组件)、client:only="framework"(仅客户端渲染,用于依赖浏览器 API 的组件)。server:defer 可在页面加载后在服务端渲染组件,使用 slot="fallback" 提供占位内容,适合个性化或需鉴权的内容,不阻塞首屏渲染,但需要服务端适配器。transition:persist 可在 View Transitions 期间保留组件状态,如媒体播放器或表单。还涉及跨服务端/客户端边界的属性序列化规则。

使用方式:资料要求实现前并行启动三个 agent(explore-codebase、research-expert、mcp__context7__query-docs),实现后运行 fuse-ai-pilot:sniper 验证。参考文档包括 overview.md、client-directives.md、server-islands.md、transitions.md、view-transitions.md、prop-serialization.md 及两个模板。

适用场景:向 Astro 页面加入 React/Vue/Svelte/Solid 交互组件、延迟动态服务端内容、在视图过渡中保持状态、通过懒水合优化可交互时间。

限制:不涵盖安装底层 UI 框架(astro-integrations)或岛屿内 Server Actions(astro-actions),二者为独立技能。