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.

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
skills	Skill[]	[]	The active skills to badge. Set as a JS property.

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