// Add a new Vue component to @indielayer/ui with themes, tests, docs, and registry exports. Use when creating a new component, adding X-prefixed components, or scaffolding under packages/ui/src/components.
Prepare @indielayer/ui changes for release with changesets and conventional commits. Use when versioning, publishing, changelog, semver, or before merging user-facing library changes.
Edit or add component theme classes and styles for base and carbon variants. Use when changing component appearance, Tailwind classes, theme tokens, Divider/Button themes, or files matching *.theme.ts.
Create or update component documentation pages in packages/ui/docs. Use when adding docs, demos, DocumentPage, usage.vue, or component doc routes.
| name | add-component |
| description | Add a new Vue component to @indielayer/ui with themes, tests, docs, and registry exports. Use when creating a new component, adding X-prefixed components, or scaffolding under packages/ui/src/components. |
| disable-model-invocation | true |
Create packages/ui/src/components/<name>/:
<Name>.vue — plain <script lang="ts"> for props/types/name: 'X<Name>', <script setup> for logicindex.ts — export { default as X<Name> } and prop/theme typestheme/<Name>.base.theme.ts and theme/<Name>.carbon.theme.ts__tests__/<Name>.spec.tspackages/ui/src/components/index.tspackages/ui/src/themes/base/components.tspackages/ui/src/themes/carbon/components.tsFollow the docs-page skill: docs/pages/component/<name>/.
From repo root:
pnpm lint:ui
pnpm test:ci
Reference: packages/ui/src/components/button/