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

soybean-headless

GitHub

辅助在Vue应用中集成SoybeanUI无样式组件库，指导选择基础原语或紧凑组件、组合自定义样式包装器及使用子路径导出，适用于构建可访问的定制化UI。

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

Trigger Scenarios

使用 @soybeanjs/headless 构建 Vue 应用询问 Root/Trigger/Content 等原语用法配置 Compact 聚合组件实现自定义样式包装器

Install

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

More Options

Non-standard path

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

Use without installing

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

指定 Agent (Claude Code)

npx skills add soybeanjs/soybean-ui --skill soybean-headless -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-headless",
    "license": "MIT",
    "description": "Helps use @soybeanjs\/headless in Vue apps, including choosing base primitives vs Compact components, composing custom-styled wrappers, using sub-path exports, and looking up headless component API summaries. Use when building custom-styled accessible components with @soybeanjs\/headless or asking about Root\/Trigger\/Content primitives, Compact aggregations, locale registration, or accessibility behavior."
}

SoybeanHeadless

Accessible, unstyled Vue 3 primitives from SoybeanUI.

Quick start

Use this skill when the user wants SoybeanUI logic and accessibility without the default styled layer.
Load REFERENCE.md for installation, sub-path exports, locale support, and styling boundaries.
Load references/composition.md for base primitives vs Compact components and how to style your own wrappers.
Load references/components.md to browse component families.
Then load the exact shared component reference files linked from that index.

Available guidance

File	Topics
REFERENCE.md	Installation, sub-path exports, locale, docs routes, headless boundaries
references/composition.md	Base primitives, Compact aggregations, custom styled wrappers, Ui injection
references/components.md	Shared component index for headless consumers

Loading files

REFERENCE.md first for setup or package-surface questions.
references/composition.md when the task is about composition patterns, provide{Name}Ui, or custom styling.
references/components.md if you need to browse the available component families.
Then load only the exact shared component reference files you need.

Key concepts

Concept	Description
Base primitives	Fine-grained parts such as `DialogRoot`, `DialogTrigger`, `DialogContent`
Compact components	Data-driven aggregates such as `AccordionCompact` and `TableCompact`
Sub-path exports	`@soybeanjs/headless/composables`, `shared`, `date`, `locale`, `types`, `namespaced`
Ui injection	Multi-slot wrappers can inject classes with `provide{Name}Ui(ui)`
Zero styles	Headless exports do not ship CSS; you bring your own styles

Basic patterns

<script setup>
import { AccordionRoot, AccordionItem, AccordionTrigger, AccordionContent } from '@soybeanjs/headless';
</script>

<template>
  <AccordionRoot>
    <AccordionItem value="item-1">
      <AccordionTrigger>Title</AccordionTrigger>
      <AccordionContent>Content</AccordionContent>
    </AccordionItem>
  </AccordionRoot>
</template>

<script setup>
import { AccordionCompact } from '@soybeanjs/headless';

const items = [{ value: 'item-1', title: 'Title', description: 'Content' }];
</script>

<template>
  <AccordionCompact :items="items" />
</template>

Notes

Shared component reference files live under the soybean-ui skill because generated API summaries already include headless exports like Root, Trigger, Content, and Compact symbols.
For ready-to-use styled components, use the soybean-ui skill instead.