Agents

AgentSkillTag

A tiny chip naming one of a Digital Worker's skills, tinted with that worker's colour.

Usage#

Use it for the skills row on worker cards (Crew OS shows the first three), and anywhere a worker's capabilities are listed in compact form.

What you provide: skill (the label; Crew OS uses the title-case names from AGENT_DETAILS, such as "Lead Generation") and color (required; a 6-digit hex, since alpha is appended to it: read --dc-<agent> or use AGENT_PALETTES[agent].primary).

Anatomy: inline-flex, px-2 py-0.5, rounded-md, 10px medium text, 1px border. Text is the colour itself; the background is the colour at alpha 08 (about 3%) and the border at alpha 25 (about 15%). Lay tags out in a flex flex-wrap gap-1 row.

Behaviour: static.

Don't pass rgb(), oklch() or CSS variables (the alpha suffix breaks them), use it for statuses (use BrandBadge), or show more than three or four per card.

Facts#

ProductCrew OS

FamilyAgents

Globalwindow.DigitalCrew.AgentSkillTag

Sourcedigitalcrew-orchestrator: components/dc/index.ts

Import in the appimport { AgentSkillTag } from "@/components/dc";

API#

TypeScript declarations emitted from components/dc/index.ts.

interface AgentSkillTagProps {
    skill: string;
    color: string;
}
export declare function AgentSkillTag({ skill, color }: AgentSkillTagProps): any;

Code#

The preview above, as plain React.createElement against window.DigitalCrew with realistic data. Copy it into a page that loads the bundle.

<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
  function tok(name) { return getComputedStyle(document.documentElement).getPropertyValue("--dc-" + name).trim(); }
  var agents = [
    ["max", "Max", ["Lead Generation", "Prospect Search", "List Building", "Outreach Strategy"]],
    ["sophie", "Sophie", ["Candidate Screening", "Interview Scheduling", "Resume Parsing"]],
    ["claire", "Claire", ["Market Analysis", "Trend Research", "Competitive Intel"]]
  ];
  function App() {
    return h("div", { className: "grid gap-3" }, agents.map(function (a) {
      return h("div", { key: a[0], className: "flex items-center gap-3" },
        h("span", { className: "w-14 text-sm font-medium" }, a[1]),
        h("div", { className: "flex flex-wrap gap-1" }, a[2].map(function (s) { return h(DC.AgentSkillTag, { key: s, skill: s, color: tok(a[0]) }); })));
    }));
  }
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>