Agent Skills › soybeanjs/soybean-ui › soybean-ui

soybean-ui

GitHub

辅助在 Vue/Nuxt 项目中集成 SoybeanUI，指导 styled 与 headless 包选型、主题配置及组件文档查阅。

skills/skills-source/soybean-ui/SKILL.md soybeanjs/soybean-ui

Trigger Scenarios

需要选择 @soybeanjs/ui 或 @soybeanjs/headless 包查询特定组件的 props、slots 或用法进行 UI 主题或 ConfigProvider 配置

Install

npx skills add soybeanjs/soybean-ui --skill soybean-ui -g -y

More Options

Non-standard path

npx skills add https://github.com/soybeanjs/soybean-ui/tree/main/skills/skills-source/soybean-ui -g -y

Use without installing

npx skills use soybeanjs/soybean-ui@soybean-ui

指定 Agent (Claude Code)

npx skills add soybeanjs/soybean-ui --skill soybean-ui -a claude-code -g -y

安装 repo 全部 skill

npx skills add soybeanjs/soybean-ui --all -g -y

预览 repo 内 skill

npx skills add soybeanjs/soybean-ui --list

SKILL.md

Frontmatter

{
    "name": "soybean-ui",
    "license": "MIT",
    "description": "Helps use SoybeanUI in Vue and Nuxt apps, including choosing styled vs headless packages, configuring styles and ConfigProvider, and looking up component docs and generated API summaries. Use when building with @soybeanjs\/ui or @soybeanjs\/headless, asking which SoybeanUI component to use, or needing props, slots, usage, and theming guidance for a specific component."
}

SoybeanUI

Vue 3 UI library with styled and headless packages.

Quick start

Prefer @soybeanjs/ui for ready-to-use S* components.
Prefer @soybeanjs/headless when you want SoybeanUI logic and accessibility without bundled styles.
Load REFERENCE.md for setup, docs routes, and which deeper reference to open next.
Load references/headless-vs-styled.md when deciding between @soybeanjs/ui and @soybeanjs/headless.
Load references/theming.md for SConfigProvider, theme vocabulary, locale, and direction.
Load references/components.md when you need component categories or are not sure which component fits.
Then load only the exact components/*.md files you need.

Available guidance

File	Topics
REFERENCE.md	Setup overview, docs routes, and reference map
references/headless-vs-styled.md	Package choice, architecture, component patterns
references/theming.md	`SConfigProvider`, theme tokens, locale, RTL, global config
references/components.md	Component index grouped by category
`components/*.md`	Per-component overview, features, docs summary, exported symbols, props, emits, slots

Loading files

REFERENCE.md first for setup and the right follow-up reference.
references/headless-vs-styled.md when the user is choosing packages or mixing both layers.
references/theming.md for theme, SConfigProvider, locale, nonce, or direction questions.
references/components.md if you need to browse the library or narrow down the right component family.
components/*.md only for the components directly involved in the task.
If the local skill files are insufficient, use the docs routes https://ui.soybeanjs.cn/llms.txt and https://ui.soybeanjs.cn/llms-full.txt as broader context.

Key concepts

Concept	Description
Styled package	`@soybeanjs/ui` exposes `SButton`, `SDialog`, and other pre-styled `S*` components
Headless package	`@soybeanjs/headless` exposes unstyled primitives, logic, a11y, and Compact aggregations
`SConfigProvider`	Global config for theme, size, locale, direction, nonce, and tooltip defaults
Compact components	Data-driven aggregated components such as `AccordionCompact` and `TableCompact`
Generated docs	This skill's component files are generated from `docs/src/docs/en/ui/components` and `docs/src/generated/api/ui`

Basic patterns

import '@soybeanjs/ui/styles.css';

import Components from 'unplugin-vue-components/vite';
import UiResolver from '@soybeanjs/ui/resolver';

Components({
  resolvers: [UiResolver()]
});

<template>
  <SConfigProvider :theme="{ theme: { primary: 'indigo' }, size: 'md' }" dir="rtl">
    <App />
  </SConfigProvider>
</template>

Notes

For repo-internal component authoring or SoybeanUI source changes, use the soybean-ui-develop skill instead.
Regenerate the component reference files with pnpm sui gen skills after docs or generated API data changes.