Skills

SkillCard

Single skill with icon, name, version, author, description, scopes preview, auth pill, and an enable toggle.

Preview

Google Calendar

v2.4.0Connected

Read events, schedule meetings, and check availability across calendars.

nyxis-skills

read:calendar
write:calendar
read:contacts

calendarmeetingsscheduling

Installation

pnpm add nyxis-ui

Usage

import { SkillCard, type Skill } from 'nyxis-ui';

const skill: Skill = {
  id: 'gcal',
  name: 'Google Calendar',
  description: 'Read events, schedule meetings, check availability.',
  version: '2.4.0',
  initials: 'GC',
  status: 'enabled',
  authState: 'connected',
  scopes: [
    { kind: 'read', resource: 'calendar' },
    { kind: 'write', resource: 'calendar' },
  ],
};

<SkillCard skill={skill} toggleable onToggle={(id, on) => save(id, on)} />;

Anatomy

Icon (or initials fallback) + name + version chip + auth pill on the title row.
Description (line-clamped to 2).
Author row with user icon.
Scopes preview via <SkillPermissions limit={5} />.
Tag chips below.
Optional enable toggle on the right via toggleable + onToggle.
Optional selection via onSelect (Enter/Space supported).

When to use this vs. `<SkillRegistry>`