SoybeanUI Component Development

This skill is the single, self-contained source of truth for SoybeanUI component work. It owns pattern classification, phase order, layer rules, delivery surfaces, generation workflow, and the finish-stage checklist. Load it for any task that creates, migrates, extends, standardizes, fixes, or audits a SoybeanUI component.

For detailed rules, see layers.md (implementation layers), surfaces.md (delivery surfaces), e2e.md (browser e2e testing), process.md (finish checklist and commit convention), and audit.md (assessment methodology, seven check dimensions, and regression flows for already-shipped components). For request shapes that trigger this skill, see EXAMPLES.md. TypeScript functional style and Vue SFC structure are owned by the global typescript-functional-style and vue-sfc-structure skills — load them directly; this skill does not restate their content.

Repository context

• Monorepo: pnpm workspaces (private root + 9 child workspaces)
• Stack: Vue 3 + TypeScript (strict) + UnoCSS + @soybeanjs/cva
• Architecture: headless / styled separation. Compile-time dependency is packages/ui -> packages/headless; headless never imports UI.
• @soybeanjs/headless (packages/headless/): Logic, state, a11y, structure. Zero styles.
• @soybeanjs/ui (packages/ui/): Styled wrappers. UnoCSS + cv() / scv(). S-prefixed components.
• @soybeanjs/ui-docs (apps/docs/): Vite + vite-ssg + unplugin-vue-markdown + markdown-exit. NOT VitePress.

Quick start