# AgentSkillTag

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

## Facts

- **Product**: Crew OS
- **Family**: Agents
- **Global**: `window.DigitalCrew.AgentSkillTag`
- **Source**: `digitalcrew-orchestrator: components/dc/index.ts`
- **Import in the app**: `import { AgentSkillTag } from "@/components/dc";`
- **Live preview**: /design/components/agent-skill-tag/preview.html
- **Page**: /design/components/agent-skill-tag

## 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`](/design/components/brand-badge.md)), or show more than three or four per card.

## API

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

## Example

```html
<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>
```

## More in Agents

- [AgentAvatar](/design/components/agent-avatar.md): A Digital Worker's face as a muted, looping video in a rounded square, framed and glowing in the agent's brand colour, with an optional live dot.
- [AskMaxAction](/design/components/ask-max-action.md): A contextual "Ask Max" button.
- [CrewAgents](/design/components/crew-agents.md): The Digital Crew's eight agents, each one colour broken out of the ink: the palette ramp, the gradient, the role and the skills the public site gives them.
- [EquipmentBadge](/design/components/equipment-badge.md): A small chip showing one piece of a Digital Worker's desk equipment as an emoji, with or without its label.
- [MaxRoster](/design/components/max-roster.md): Max's 24 Digital Workers in their seven teams, each with its face (**AgentFace**) and accent dot.
- [OAuthRequestCard](/design/components/oauth-request-card.md): A "Connect HubSpot" or "Connect Notion" card that an agent drops into the chat.
- [ThinkingBox](/design/components/thinking-box.md): Max's thinking box: the running account of what he thought, which tools he called, what he sent and what came back.
- [ToolStatusIndicator](/design/components/tool-status-indicator.md): Compact dot, label and state rows that report tool activity in the onboarding and meetings chats.