openeuler-frontend-tools
openEuler Portal 前端开发工具
本 skill 提供了 openEuler Portal 项目中所有通用开发工具的完整指南，包括 Vue Composables、SCSS Mixins 和工具函数。
工具分类
1. Composables（组合式函数）
位于 openEuler-portal/app/.vitepress/src-new/composables/ 目录，提供可复用的 Vue 3 Composition API 功能：
- useScreen - 响应式屏幕尺寸检测和适配
- useLocale - 国际化语言切换
- useClipboard - 剪贴板操作
- useDebounceSearch - 防抖搜索
- useCheckbox - 复选框状态管理
- useScrollBottom - 滚动到底部检测
- useInViewDuration - 元素可见时长统计
详细使用方法请参考 Composables 参考文档
More from finch-poi/opendesign-skills
opendesign-tokens
OpenDesign 设计 Token 指南。当需要使用 @opensig/opendesign-token 包中的 CSS 变量时使用此 skill。包含六套主题（openEuler/Ascend/Kunpeng/Mindspore/openGauss/openUBMC）的完整 token 体系，支持颜色、间距、圆角、字体、阴影、响应式排版、栅格系统等所有设计令牌。使用场景：(1) 查找颜色值对应的语义 token，(2) 获取间距/圆角/字体的 token 名称，(3) 了解六套主题的差异，(4) 代码中使用 CSS 变量替代硬编码值，(5) 使用响应式 token 实现多断点适配
19opendesign-components
OpenDesign 组件库使用指南。当需要使用 OpenDesign Vue 组件库快速搭建页面时使用此 skill。支持所有 OpenDesign 组件（46 个），包括按钮、表单、表格、对话框、卡片、图标、滑块、步骤条、轻提示等常用 UI 组件。使用场景：(1) 使用 OpenDesign 组件构建 Vue 页面，(2) 查找组件使用方法和属性说明，(3) 获取组件代码示例
19opendesign-scripts
OpenDesign 构建脚本工具使用指南。当需要使用 @opensig/open-scripts CLI 工具进行图标生成、SVG 清理、组件构建、样式编译、设计令牌生成时使用此 skill。支持 5 个命令：gen:icon（SVG 转 Vue 图标组件）、clean:svg（SVG 清理优化）、build:component（Vue 组件库构建）、build:style（SCSS 样式编译）、gen:token（设计令牌 CSS 变量生成）。使用场景：(1) 配置和执行构建脚本，(2) 编写图标/令牌配置文件，(3) 了解构建流程和命令用法
17