메뉴
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.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| 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/
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.