cabinet-fe/veltra-utils
skills/veltra-utils/SKILL.md
@veltra/utils 工具函数与共享类型文档。 当涉及工具函数、BEM、类名、DOM 操作、滚动、高亮、z-index、表单校验、Validator、 补间 Tween、帧回调、浅计算、响应式 middleProxy、命名空间常量、ComponentSize、 FormComponentProps 等时使用。详细源码见 `generated/api/*.md` 与 generated/shared-types.md；BEM 用法见 references/bem-guide.md。
$ install --global
skillsauthnpx skillsauth add cabinet-fe/ultra-ui veltra-utilsInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 24, 2026, 10:22 AM55.5s13 files scanned
SKILL.md
- name:
- veltra-utils
- description:
- >
veltra-utils
生成物
| 文件 | 内容 |
| ------------------------------------------------------ | --------------------------------------------------------------------- |
| generated/api/ | 按域拆分：entry.md、dom.md、form.md、helper.md、reactive.md |
| generated/shared-types.md | shared/、types/ 下全部 .ts 源码 |
| generated/manifest.json | 同步时间与文件列表 |
| references/bem-guide.md | bem / makeBEM API 与组件内用法 |
根目录执行 bun run sync-veltra-utils 或 bun run sync-skills 可重新生成 generated/。
导入约定
import {
bem,
addClass,
removeClass,
getScrollParents,
scrollIntoContainerView,
withUnit,
setStyles,
removeStyles,
zIndex,
getHighlightChunks,
Validator,
makeBEM,
createIncrease,
createToggle,
Tween,
nextFrame,
shallowComputed,
isTextNode,
isFragment,
isComment,
isTemplate,
extractNormalVNodes,
middleProxy
} from '@veltra/utils'
import { NAME_SPACE, CLS_PREFIX, FORM_EMPTY_CONTENT } from '@veltra/utils/shared'
按需引入即可；无默认导出。共享常量与部分类型也可从 @veltra/utils/shared 引用。
按目录的函数速查
DOM
| 符号 | 用途 |
| ---------------------------- | ----------------------------------------------------------------------- |
| addClass / removeClass | 元素 class 增删 |
| getScrollParents | 可滚动祖先链 |
| scrollIntoContainerView | 在容器内滚入视区 |
| withUnit | 数值补单位 |
| setStyles / removeStyles | 行内样式批量设置/清理 |
| zIndex | 全局 z-index 栈 |
| getHighlightChunks | 文本高亮分片 |
| bem | 默认 u- 前缀的 BEM 工厂（见 bem-guide.md） |
表单校验
| 符号 | 用途 |
| ----------- | ---------- |
| Validator | 表单校验器 |
辅助
| 符号 | 用途 |
| --------------------------------- | ---------------------------- |
| makeBEM | 自定义前缀 BEM 工厂 |
| createIncrease / createToggle | 递增 id、布尔切换 |
| Tween | 补间 |
| nextFrame | requestAnimationFrame 封装 |
| shallowComputed | 浅层 computed 辅助 |
Vue 辅助
| 符号 | 用途 |
| -------------------------------------------------------- | ----------------- |
| isTextNode / isFragment / isComment / isTemplate | 节点类型判断 |
| extractNormalVNodes | 规范化 vnode 列表 |
响应式
| 符号 | 用途 |
| ------------- | -------------- |
| middleProxy | 中间层代理工具 |
常量（@veltra/utils/shared）
| 符号 | 用途 |
| --------------------------- | ---------------- |
| NAME_SPACE / CLS_PREFIX | 类名前缀 |
| FORM_EMPTY_CONTENT | 表单只读占位展示 |
共享类型速查
常用类型定义在 types/ 中镜像于 shared-types.md，例如：
ComponentSize、ColorType（见types/component-common.ts）FormComponentProps及表单上下文类型（见types/form-context.ts等）
具体字段以生成文件中的源码为准。
Related Skills
cabinet-fe/veltra-ui
tools
VerifiedTrustedCommunity
当使用 Vue 3 作为前端框架开发时必须使用；优先检索并使用 veltra-ui 提供的组件、样式、工具、组合式方法、指令、图标等能力。
5SKILL.mdUpdated Apr 28, 2026
cabinet-fe/veltra-vite
tools
VerifiedTrustedCommunity
面向 @veltra/vite 的 Vite 集成文档技能。用于在任意 Vite 项目中接入 VeltraDesktopUIResolver 与 unplugin-vue-components，排查 @veltra/desktop 组件自动导入、样式 sideEffects、development 和 import 条件导出差异，或确认消费项目里 @veltra/vite 安装产物与源码位置时使用。
5SKILL.mdUpdated Apr 17, 2026
cabinet-fe/veltra-styles
development
VerifiedTrustedCommunity
@veltra/styles 共享样式与主题系统：Theme 类型、UITheme、loadTheme/setTheme、 BEM SCSS（mixins）、CSS 变量函数、深色模式、SCSS pkg 导入、组件级 token。 当编写组件样式、定制主题、切换深色模式、使用 fn.use-var / fn.component-var、 或排查 CSS 变量注入与 html 文档尺寸 class 时使用。 完整源码镜像见 generated/；实操步骤见 references/theming-guide.md。
5SKILL.mdUpdated Apr 17, 2026
cabinet-fe/veltra-icons
content-media
VerifiedTrustedCommunity
面向 `@veltra/icons` 的图标库文档技能。用于选择或引用 normal/colorful 图标、理解自动生成的 Vue SFC 与 barrel 入口、维护 SVG 命名与格式化工作流，或新增图标后重新生成 `src/vue/*`、`src/normal.ts`、`src/colorful.ts` 时使用。
5SKILL.mdUpdated Apr 17, 2026