Design
llms.txt digitalcrew.tech

Agents

AgentSkillTag

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

Crew OSAgentsDigitalCrew.AgentSkillTag
AgentSkillTag · liveOpen

Guidelines#

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#

GroupAgents
ProductCrew OS
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 (the module also exports AgentAvatar, AgentSkillTag, BrandBadge, BrandStatCard, EquipmentBadge).

/**
 * Digital Crew Component Library
 * Reusable branded components for the admin dashboard
 */
export { BrandStatCard } from './BrandStatCard';
export { AgentAvatar } from './AgentAvatar';
export { EquipmentBadge } from './EquipmentBadge';
export { BrandBadge } from './BrandBadge';
export { AgentSkillTag } from './AgentSkillTag';

Example#

The code of the preview above: plain React.createElement against window.DigitalCrew, with realistic data.

<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>
AgentAvatarAskMaxActionCrewAgentsEquipmentBadgeMaxRosterOAuthRequestCardThinkingBoxToolStatusIndicator