# Team Builder

> A hackathon squad builder in a light terminal skin — drag engineers from a shared pool into three track squads (frontend, backend, ml) with prompt headers, bracketed capacity counters, segmented meters, shorthand skill tokens, and a dashed diff-style insertion slot while dragging.

- Category: Drag & Drop
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Sienna
- Dark mode: yes
- Access: free (sign in to copy the code)
- Tags: terminal
- Page: https://builder.atheros.ai/components/team-builder
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_team_builder/preview-64bdef663858.webp

## Features

- Native HTML5 drag-and-drop from a shared pool into three squad wells, with a dashed phosphor insertion slot that keeps the card's own 6-dot grip lit and previews the drop position live
- Per-squad capacity of four, enforced during dragover so a full squad refuses further drops
- Full-width segmented capacity meter per squad that fills phosphor green as engineers are assigned, flipping to caret amber when the squad is full
- Bracketed mono counters — `[n/4]` per squad, `[n/13] assigned` in the footer — with tabular numerals
- Prompt-flavored copy: `> squad/*` column headers, `$ pool/unassigned` pool label, `//` comment hints, and a blinking amber caret on the `~/hackathon-2026` title
- Stacked square avatar face row that reveals once a squad has members
- Shuffle randomly distributes engineers across squads within capacity; reset returns everyone to the pool — both with a staggered slide-in
- Shorthand lowercase skill tokens (`ts`, `rs`, `torch`, `k8s`) right-aligned on each card and tinted per language with an editor syntax palette (magenta, blue, green, teal, amber, coral), full names in a hover tooltip
- Per-squad tinted header icons — frontend, backend and ml each carry their own role hue
- Photo avatars (external images) with an automatic mono initials fallback on load error
- Skeleton loading — shimmer placeholder cards matching the engineer-card geometry pixel for pixel, revealed via a staggered slide-in once the roster resolves
- Stable pool — dragging never reorders the pool grid (append-only), so cards do not jump around mid-drag
- Responsive: three squad columns on desktop collapse to a single column below 800px

## Accessibility

- **Draggable cards** — Each engineer card is `draggable` with a visible grip handle affordance
- **Capacity feedback** — Squad counters and segmented meters reflect assignment live
- **Focus indicators** — `:focus-visible` outlines on engineer cards and buttons
- **Button labels** — Shuffle and reset buttons carry descriptive `aria-label`s
- **Skill tooltips** — Shorthand skill tokens expose their full name via `title`
- **Reduced motion** — `prefers-reduced-motion: reduce` disables all animations

## Keyboard shortcuts

- `Tab` — Move focus between engineer cards and controls

## Common questions

**Which frameworks is Team Builder available in?**

Team Builder ships as Vanilla, React + CSS and React + Tailwind — HTML, CSS, JS and React source you can copy, download or clone into Atheros AI Builder.

**Is the Team Builder drag & drop component free?**

Yes. Team Builder is a free component: preview it without an account, and sign in with a free Atheros account to copy or download the full source and customise it with AI.

**Does Team Builder support dark mode?**

Yes. Team Builder ships light and dark themes, both drawn from the Sienna design system's tokens. Switch the preview to dark mode to compare them.

## Get the code

Preview Team Builder live, then sign in to copy or download the source, apply another design system, or ask the AI assistant to change it: https://builder.atheros.ai/components/team-builder

Every component on https://builder.atheros.ai is also reachable from Claude Code, Cursor and Codex through the Atheros MCP server (paid plans). Component index: https://builder.atheros.ai/llms-components.txt