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

vean-ui

GitHub

为 Vue/Nuxt 应用提供 Vean UI 库的使用指南，包括包选择、样式配置、主题设置及组件 API 查询。

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

Trigger Scenarios

询问 Vean 组件用法配置 Vean 主题或样式查找组件 Props 和 Slots

Install

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

More Options

Non-standard path

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

Use without installing

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

指定 Agent (Claude Code)

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

安装 repo 全部 skill

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

预览 repo 内 skill

npx skills add soybeanjs/vean-ui --list

SKILL.md

Frontmatter

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

Vean

Vue 3 UI library with styled and aria packages.

Quick start

Prefer @vean/ui for ready-to-use S* components.
Prefer @vean/aria when you want Vean logic and accessibility without bundled styles.
Load REFERENCE.md for setup, docs routes, and which deeper reference to open next.
Load references/aria-vs-styled.md when deciding between @vean/ui and @vean/aria.
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/aria-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/aria-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://veanui.com/llms.txt and https://veanui.com/llms-full.txt as broader context.

Key concepts

Concept	Description
Styled package	`@vean/ui` exposes `SButton`, `SDialog`, and other pre-styled `S*` components
Aria package	`@vean/aria` 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 '@vean/ui/styles.css';

import Components from 'unplugin-vue-components/vite';
import UiResolver from '@vean/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 Vean source changes, use the vean-ui-develop skill instead.
Regenerate the component reference files with pnpm sui gen skills after docs or generated API data changes.