Skills

kai-skills

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.

• Shadow DOM
• Property or declarative children
• Badges wrap automatically
• 2 composition paths

Preview

When to use

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:

<kai-skills id="skills"></kai-skills>
<script type="module">
  import '@kitn.ai/ui/elements';
  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.

Child element	Attributes	Text content	Notes
<kai-skill>	id	Yes	Parse a single light-DOM `<kai-skill>` element into a `Skill` descriptor. Attribute / content mapping: - `id` → Skill.id (falls back to `name` when absent) - `textContent` → Skill.name (the human-readable badge label) Example: `<kai-skill id="web-search">Web Search</kai-skill>`

Examples

Two Skills

Code

Multiple Skills

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

Code

Declarative Composition

Code

Props

Property	Type	Default	Notes
theme	"light" | "dark" | "auto"	'auto'	Color mode (`auto` follows prefers-color-scheme).
skills	Skill[]	[]	The active skills to badge. Set as a JS property. Omit to supply them as `<kai-skill>` light-DOM children instead; when both are present the property's skills come first. Nothing renders when there are none.

Composed from

This element wraps these SolidJS components — reach for them directly when you need finer control than the props expose.

MessageSkills

---

Need a hand? Report a bug Ask for help