# Skills

A compact badge strip that shows which skills or tools were active for a message.

<p class="kai-tag-sub">kai-skills</p>

A horizontal strip of skill badges — set a JS array or compose declarative `<kai-skill>` children to annotate a message with the tools it used.

## Preview

> **tip:** 
Place `<kai-skills>` beneath an assistant message row to annotate which tools were active. Use the `skills` property when skill data comes from app state; use declarative `<kai-skill>` children for server-rendered HTML with no JS wiring.

## Usage

Assign the `skills` property after the element upgrades — arrays can't be HTML attributes:

```html
<kai-skills id="skills"></kai-skills>
<script type="module">

  document.getElementById('skills').skills = [
    { id: 'web-search', name: 'Web Search' },
    { id: 'code',       name: 'Code' },
  ];
</script>
```

- **Declarative path** — nest `<kai-skill id="…">Label</kai-skill>` children directly; useful for server-rendered HTML with no JS wiring.
- **Mixed** — when both are provided, prop items render first and declarative children are appended after.
- **SolidJS** — import `MessageSkills` from `@kitn.ai/ui` and pass a `skills` prop instead.

## Examples

### Two Skills

### Multiple Skills

Badges wrap horizontally when they overflow — no extra layout work needed.

### Declarative Composition

## Props

## Composed from