---
name: indielayer/add-component
source: https://app.decimal.ai/s/indielayer-add-component@2/SKILL.md
source_sha256: 5eb762f48b95
---

# Add component

## Scaffold

Create `packages/ui/src/components/<name>/`:

- `<Name>.vue` — plain `<script lang="ts">` for props/types/`name: 'X<Name>'`, `<script setup>` for logic
- `index.ts` — `export { default as X<Name> }` and prop/theme types
- `theme/<Name>.base.theme.ts` and `theme/<Name>.carbon.theme.ts`
- `__tests__/<Name>.spec.ts`

## Register

1. `packages/ui/src/components/index.ts` (or `src/virtual/index.ts`)
2. `packages/ui/src/themes/base/components.ts`
3. `packages/ui/src/themes/carbon/components.ts`
4. `packages/ui/volar.d.ts` — add `X<Name>` to `GlobalComponents` (alphabetical):

```ts
XRadioButton: typeof import('@indielayer/ui')['XRadioButton']
```

## Docs (if user-facing)

Follow the `docs-page` skill: `docs/pages/component/<name>/`.

## Verify

From repo root:

```bash
pnpm lint:ui
pnpm typecheck
pnpm test:ci
```

Reference: `packages/ui/src/components/button/`