可在AionClaw中复用现有UI组件库，需确保正确配置别名、验证版本与全局挂载、按需导入注册组件，并绕过Shadow DOM隔离以继承CSS变量。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
你想在AionClaw中复用当前前端项目已有的UI组件库（如Ant Design、Element Plus、Naive UI或自研Design System），而不是重写样式或强行套用AionClaw默认皮肤，避免视觉割裂、交互不一致和重复维护成本。
确认组件库已正确加载并可被全局访问
打开项目根目录下的 vite.config.ts 或 webpack.config.js，检查是否已在 resolve.alias 或 optimizeDeps.include 中显式声明该组件库——若未配置，AionClaw在运行时注入的JS沙箱环境将无法解析 import { Button } from 'ant-design-vue' 这类语句，直接报 Module not found 错误。
执行 npm list ant-design-vue（或对应库名）验证已安装且版本 ≥ 4.0.0；低于此版本可能缺少 Composition API 支持，导致 AionClaw 调用 defineComponent 时失败。
在浏览器开发者工具 Console 中输入 window.Antd（或库挂载的全局变量名），确认返回非 undefined 对象；若为 undefined，说明组件库未在 index.html 中通过 CDN 或 script 标签预加载，AionClaw 无法跨上下文桥接。
在AionClaw技能中按需导入并注册组件
进入 src/skills/ui-enhancer/（或你存放技能的目录），新建 CustomButton.tsx：
第一种写法：直接使用已注册的全局组件（适用于 Vue 项目且组件已通过 app.component() 全局注册）
在文件顶部添加：import { defineComponent, h } from 'vue';
导出组件时写：export default defineComponent({ name: 'CustomButton', render() { return h('a-button', { type: 'primary' }, () => '提交') } });
第二种写法：按需导入局部组件（推荐，避免污染全局）
写法：import { Button } from 'ant-design-vue';
然后在 components: { AButton: Button } 中注册别名，模板中用 ，否则 Vue 3 的自闭合标签解析会失败】。
menu.js是一款Material Design风格的jquery下拉菜单插件。通过menu.js插件，你可以非常轻松的制作出Material Design风格的下拉菜单或下拉列表。 使用方法 在页面中引入样式文件menu.css和jquery.min.js、menu.js文件。
第三种写法：React 项目对接（如使用 Ant Design React）
确保项目已安装 antd 和 @ant-design/icons；在技能组件内直接 import { Button } from 'antd';，但需确认 AionClaw 的 React 渲染器已启用 createRoot 模式——若仍用 legacy ReactDOM.render，将触发 Warning 并禁用 hooks。
绕过AionClaw默认样式隔离，继承项目CSS变量
AionClaw 默认启用 Shadow DOM 隔离技能样式，这会导致项目中定义的 :root { --primary-color: #1677ff; } 在技能组件内不可见。
在技能组件的 style 标签上添加 scoped 属性后，手动注入变量：
<style scoped><br>:deep(.ant-btn-primary) { background-color: var(--primary-color) !important; }<br></style>
更彻底的解法：修改 AionClaw 技能运行时配置，在技能目录下创建 claw.config.json，写入：{"shadowMode": "open", "cssInjection": "none"}。【该配置仅对当前技能生效，不会影响其他技能，但会暴露组件内部结构给外部样式污染风险】。
若项目使用 CSS-in-JS（如 styled-components 或 Emotion），需额外在 vite.config.ts 中配置 css.preprocessorOptions 并确保 AionClaw 的构建流程能识别 .module.less 后缀——否则 import styles from './index.module.less' 将返回空对象。
