SuperAPI AI 工具集

astro-styling

前端与建站

查看项目

更新于 10-15 21:49

技能介绍

用途:在 Astro 项目中为 .astro 组件编写样式,覆盖组件作用域 CSS、CSS Modules、Tailwind CSS、UnoCSS、Sass/SCSS、全局基础样式、class:list 条件类名以及 CSS 变量(设计令牌与主题)。

主要能力:提供样式方案选择参考,包括 <style>(默认组件作用域)、<style is:global>(全局,用于重置与基础样式)、CSS Modules(框架组件如 React、Vue)、Tailwind CSS(工具类)、UnoCSS(原子 CSS)、Sass/SCSS(预处理器)。附带概念文档(scoped-css、css-modules、global-styles、tailwind、unocss、sass、css-variables)与模板(scoped-component、tailwind-setup、unocss-setup)。

使用方式:资料要求先执行代理工作流,用 TeamCreate 生成 3 个代理:fuse-ai-pilot:explore-codebase 分析现有样式与集成模式,fuse-ai-pilot:research-expert 通过 Context7/Exa 核对最新 Astro/Tailwind/UnoCSS 文档,mcp__context7__query-docs 检查与 Astro 6 的集成兼容性;实现后运行 fuse-ai-pilot:sniper 验证。

最佳实践:默认优先使用作用域样式;在根布局中应用重置与基础样式;用 CSS 变量定义设计令牌;避免在组件中使用 is:global(保留给布局与全局文件);用 class:list 替代三元表达式处理条件类名。禁止:为布局/主题写内联样式;在非布局组件中使用 is:global;未用 CSS Modules 就在多个组件中导入 CSS;混用 Tailwind 与自定义类命名而无明确约定。

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