home/categories/backend/soybeanjs-soybean-ui-agents-skills-soybean-ui-component-development-skill-md
backenddevelopment

soybean-ui-component-development

SoybeanUI 组件开发工作流。**在以下情况下使用**:新建组件(headless + UI 两层)、为现有组件添加功能、修复 bug、理解双层架构、添加 playground 示例、编写组件文档、实现无障碍(a11y)、适配 RTL 方向、编写单元测试。适用关键词:新建组件、添加 variant、headless、tailwind-variants、tv()、UiSlot、UiClass、provideXUi、useUiContext、useOmitProps、usePickProps、mergeSlotVariants、cn、playground、DataTable、TypeTable、组件文档、aria、role、a11y、无障碍、rtl、dir、Direction、useDirection、单元测试、vitest、vue-test-utils、axe-core、getA11yViolations、spec.ts。DO NOT USE FOR:纯路由/配置修改、样式主题调整。

soybeanjs
maintainer
soybeanjs
更新於 4/6/2026
星標
165
分支
10
quick start

Installation and usage

SoybeanUI 组件开发工作流。**在以下情况下使用**:新建组件(headless + UI 两层)、为现有组件添加功能、修复 bug、理解双层架构、添加 playground 示例、编写组件文档、实现无障碍(a11y)、适配 RTL 方向、编写单元测试。适用关键词:新建组件、添加 variant、headless、tailwind-variants、tv()、UiSlot、UiClass、provideXUi、useUiContext、useOmitProps、usePickProps、mergeSlotVariants、cn、playground、DataTable、TypeTable、组件文档、aria、role、a11y、无障碍、rtl、dir、Direction、useDirection、单元测试、vitest、vue-test-utils、axe-core、getA11yViolations、spec.ts。DO NOT USE FOR:纯路由/配置修改、样式主题调整。

安裝
$ install --globalskills.sh
使用

安裝後,您可以通過在終端運行以下命令來使用此技能:

skills use soybean-ui-component-development