Team Builder

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

Skill tooltips

Shorthand skill tokens expose their full name via title

Reduced motion

prefers-reduced-motion: reduce disables all animations

Customise it with AI

Open Team Builder in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the drag & drop is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.