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
Updated 4/6/2026
Stars
165
Forks
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:纯路由/配置修改、样式主题调整。

Installation
$ install --globalskills.sh
Usage

Once installed, you can use this skill by running the following command in your terminal:

skills use soybean-ui-component-development