Build a Slider — the Slider from @takeoff-ui/react-spar (Takeoff UI / Spar React) for picking a number, or a [min, max] range, from a continuous scale by dragging or with the keyboard. Trigger contexts: range slider, price range, volume/brightness/temperature control, min-max filter, dual-handle / two-thumb slider, multi-handle slider, tick marks, vertical slider, slider synced with a number input. Use this skill WHENEVER building, adding, importing, styling, or fixing a Slider / range input (or a Field-wrapped numeric range control) in a React app that uses @takeoff-ui/react-spar / Takeoff / Spar.
Renders contextual feedback banners (success/warning/info/danger/neutral) with title, description, action buttons, and a dismiss control. This is the Alert from @takeoff-ui/react-spar (Takeoff UI / Spar React). Trigger when building an alert, callout, banner, notice, inline message, dismissible warning, or status message. Use this skill WHENEVER building, adding, importing, styling, or fixing an Alert or related feedback UI in a React app that uses @takeoff-ui/react-spar / Takeoff / Spar.
Build a Badge — the small status/count/category label from @takeoff-ui/react-spar (Takeoff UI / Spar React). Triggers when you need a status pill, count badge, notification dot, label/tag/chip, 'new'/'active'/'verified' indicator, or a number bubble on an icon. Use this skill WHENEVER building, adding, importing, styling, or fixing a Badge (or related status/count/label UI) in a React app that uses @takeoff-ui/react-spar / Takeoff / Spar.
Build a Card surface that groups related content and actions with consistent spacing, typography, and theming. This is the Card from @takeoff-ui/react-spar (Takeoff UI / Spar React), a compound component with Card.Header, Card.Title, Card.Description, Card.Body, and Card.Footer parts. Use this skill WHENEVER building, adding, importing, styling, or fixing a Card, content card, panel, tile, summary card, info box, or boxed/bordered content container in a React app that uses @takeoff-ui/react-spar / Takeoff / Spar. Trigger contexts: card layout, header/footer/body sections, card title, dashboard tiles, product/summary cards.
Lightweight text Label for section titles, metadata, and explicit control associations — the Label from @takeoff-ui/react-spar (Takeoff UI / Spar React). Trigger when you need a form label, htmlFor association, field caption, required/optional/disabled/invalid label styling, or a standalone label primitive. Use this skill WHENEVER building, adding, importing, styling, or fixing a Label (or related label/caption UI) in a React app that uses @takeoff-ui/react-spar / Takeoff / Spar.
Use the Divider component from @takeoff-ui/react-spar to separate content sections with horizontal or vertical lines and optional aligned labels. Use whenever building, importing, styling, or fixing a divider, separator, rule, section break, or labeled "OR" separator in a Takeoff / Spar React app.
Build keyboard-accessible action menus with the compound Dropdown component from @takeoff-ui/react-spar. Use whenever building, importing, styling, or fixing a dropdown menu, contextual action menu, overflow menu, grouped menu, menu item, or floating list of commands in a Takeoff / Spar React app.
Use the compound Progress component from @takeoff-ui/react-spar to show determinate or indeterminate task completion as a linear bar or circular ring. Use whenever building, importing, styling, or fixing progress bars, progress rings, upload/download completion, step completion, percentages, or loading progress in a Takeoff / Spar React app.