takeoff-v2

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.

Use the Skeleton component from @takeoff-ui/react-spar to reserve layout and represent content that is still loading. Use whenever building, importing, styling, or fixing skeleton loaders, shimmer placeholders, loading cards, avatar placeholders, text placeholders, or content-loading layouts in a Takeoff / Spar React app.

Build multi-step workflow navigation with the compound Stepper component from @takeoff-ui/react-spar. Use whenever building, importing, styling, or fixing a stepper, wizard, checkout flow, onboarding flow, progress steps, numbered steps, vertical steps, linear flow, or step navigation in a Takeoff / Spar React app.

Builds a breadcrumb navigation trail (location path, ancestor links back up the site hierarchy) — the Breadcrumb from @takeoff-ui/react-spar (Takeoff UI / Spar React). Trigger contexts a developer would type: breadcrumb, breadcrumbs, nav trail, page hierarchy path, current location links, crumb separator/chevron. Use this skill WHENEVER building, adding, importing, styling, or fixing a Breadcrumb (or related path/trail navigation UI) in a React app that uses @takeoff-ui/react-spar / Takeoff / Spar.

Floating click/hover panel for surfacing extra content, forms, or actions anchored to a trigger. This is the Popover from @takeoff-ui/react-spar (Takeoff UI / Spar React). Use WHENEVER building, adding, importing, styling, or fixing a popover, popup panel, anchored overlay, info bubble, dropdown panel, floating card, or trigger-attached menu in a React app that uses @takeoff-ui/react-spar / Takeoff / Spar. Triggers: popover, takeoff popover, Popover.Content, floating panel, anchored popup.

Build an accessible custom dropdown Select (combobox/listbox) — the Select from @takeoff-ui/react-spar (Takeoff UI / Spar React). Use WHENEVER building, adding, importing, styling, or fixing a Select, dropdown, picker, combobox, single-choice option list, or form field with selectable options (cabin/country/fare pickers, grouped option menus) in a React app that uses @takeoff-ui/react-spar / Takeoff / Spar. Covers Select.Trigger, Select.Content, Select.Item, groups, separators, sizes, controlled value, invalid state, and Field integration.

Floating hover/focus label that shows brief contextual info, with variant, header, description, and arrow slots. This is the Tooltip from @takeoff-ui/react-spar (Takeoff UI / Spar React). Use WHENEVER building, adding, importing, styling, or fixing a tooltip, hover hint, info bubble, hover tip, focus hint, or aria-describedby helper text in a React app that uses @takeoff-ui/react-spar / Takeoff / Spar. Covers variants, placement (side/align), provider delay groups, arrow, and controlled open state.

Setup, conventions, and component map for @takeoff-ui/react-spar (Takeoff UI / Takeoff Spar) — the React 19 component library of headless Spar primitives styled with Takeoff design tokens. Use this skill WHENEVER starting or wiring a project with @takeoff-ui/react-spar: installing packages, mounting TakeoffSparProvider, importing the token CSS, theming/color mode, the compound + slot (className/classNames/slotProps/data-slot) customization model, or when unsure which Takeoff component to reach for. Pair it with the per-component takeoff-<name> skills (takeoff-button, takeoff-input, takeoff-dialog, …) for component-specific APIs and examples.

Build collapsible expand/collapse sections with the Accordion from @takeoff-ui/react-spar (Takeoff UI / Spar React). Trigger contexts: accordion, collapsible panels, expandable sections, FAQ list, disclosure groups, show/hide content. Use this skill WHENEVER building, adding, importing, styling, or fixing an Accordion (or related collapsible/disclosure UI) in a React app that uses @takeoff-ui/react-spar / Takeoff / Spar.

Use for the Button component from @takeoff-ui/react-spar (Takeoff UI / Spar React) — a clickable element that triggers an action, with variant, appearance, size, loading spinner, icon slots, and toggle support. Triggers on tasks like add a button, CTA, submit button, primary/secondary/danger button, icon button, loading/disabled button, toggle button. Use this skill WHENEVER building, adding, importing, styling, or fixing a Button (or related clickable action UI) in a React app that uses @takeoff-ui/react-spar / Takeoff / Spar.

Compound, accessible checkbox toggle control — the Checkbox from @takeoff-ui/react-spar (Takeoff UI / Spar React). Use WHENEVER building, adding, importing, styling, or fixing a checkbox, tickbox, boolean toggle, accept-terms control, indeterminate/tri-state parent checkbox, select-all, or multi-select form option in a React app that uses @takeoff-ui/react-spar / Takeoff / Spar. Pair with Field for label, description, and error message wiring.

Compact inline label/tag with optional remove and clickable actions — the Chip from @takeoff-ui/react-spar (Takeoff UI / Spar React). Use WHENEVER building, adding, importing, styling, or fixing a chip, tag, pill, badge-label, filter chip, removable token, or selected-value chip in a React app that uses @takeoff-ui/react-spar / Takeoff / Spar. Triggers: 'add a chip', 'filter chips', 'removable tag', 'dismissible label', 'selectable pill'.

Build a modal Dialog (modal, popup, overlay, confirm/alert dialog, lightbox, sheet) — the Dialog from @takeoff-ui/react-spar (Takeoff UI / Spar React). Compound API with Trigger, Overlay, Panel, Header, Title, Description, Body, Footer, Close, plus intensity/blur backdrop, headerType/footerType styling, dismissible and controlled open state. Use this skill WHENEVER building, adding, importing, styling, or fixing a Dialog, modal, popup, confirmation, or overlay in a React app that uses @takeoff-ui/react-spar / Takeoff / Spar.

Slide-in side panel (modal) for navigation menus, detail views, filters, or contextual forms — the Drawer from @takeoff-ui/react-spar (Takeoff UI / Spar React). Trigger when building or fixing a drawer, side panel, slide-out, off-canvas menu, sidebar overlay, filter panel, or detail flyout. Use this skill WHENEVER building, adding, importing, styling, or fixing a Drawer (or related slide-in/overlay UI) in a React app that uses @takeoff-ui/react-spar / Takeoff / Spar.

Field form-field wrapper (label + description + error message + shared ARIA/invalid/required state) for a nested control, from @takeoff-ui/react-spar (Takeoff UI / Spar React). Use WHENEVER building, adding, importing, styling, validating, or fixing a Field, Field.Label, Field.Description, or Field.ErrorMessage in a React app using @takeoff-ui/react-spar / Takeoff / Spar — e.g. form field wrapper, form label, helper/hint text, validation/error message, required asterisk, aria-invalid, react-hook-form or tanstack-form field anatomy.

Accessible compound text Input from @takeoff-ui/react-spar (Takeoff UI / Spar React) — bordered field with prefix/suffix, icons, clear/reveal, spinner, password strength, number stepper/counter, and tag chips. Triggers: text input, text field, form input, search box, password field, number stepper, tag/chips, textarea. Use this skill WHENEVER building, adding, importing, styling, or fixing an Input/text field in a React app using @takeoff-ui/react-spar / Takeoff / Spar.

Build a Radio group (single-choice, mutually exclusive options) — the Radio from @takeoff-ui/react-spar (Takeoff UI / Spar React). Trigger when adding or styling radio buttons, radiogroup, single-select option lists, cabin/seat/plan pickers, exclusive choice forms, or controlled radio inputs. Use this skill WHENEVER building, adding, importing, styling, or fixing a Radio (or related single-choice UI) in a React app that uses @takeoff-ui/react-spar / Takeoff / Spar. Not for multi-select — use a checkbox group there.

Indeterminate loading indicator with built-in status semantics — the Spinner from @takeoff-ui/react-spar (Takeoff UI / Spar React). Trigger when you need a loading spinner, busy indicator, async/pending state, button or page loader, throbber, or activity indicator. Use this skill WHENEVER building, adding, importing, styling, or fixing a Spinner (or related loading UI) in a React app that uses @takeoff-ui/react-spar / Takeoff / Spar.

Build an on/off Switch (toggle) — the Switch from @takeoff-ui/react-spar (Takeoff UI / Spar React) for turning a single setting, preference, permission, or form option on or off. Trigger contexts: toggle switch, on/off toggle, settings toggle, enable/disable control, notifications toggle, feature flag UI. Use this skill WHENEVER building, adding, importing, styling, or fixing a Switch / toggle (or related Field-wrapped boolean control) in a React app that uses @takeoff-ui/react-spar / Takeoff / Spar.

Build a data Table (TanStack-backed grid) from @takeoff-ui/react-spar (Takeoff UI / Spar React). Use WHENEVER building, adding, importing, styling, or fixing a table, data grid, data table, rows/columns view, sortable/filterable/paginated list, selectable rows, expandable/tree rows, sticky columns, or server-paged table in a React app that uses @takeoff-ui/react-spar / Takeoff / Spar. Triggers: 'data table', 'add a grid', 'sortable columns', 'row selection', 'pagination', 'column filters', 'export rows to CSV'.

Build tabbed/segmented interfaces with the Tabs component from @takeoff-ui/react-spar (Takeoff UI / Spar React). Use WHENEVER building, adding, importing, styling, or fixing tabs, tab bars, tablists, tabbed panels, segmented controls, tab navigation, switchers, or panel switching in a React app that uses @takeoff-ui/react-spar / Takeoff / Spar. Covers Tabs.List, Tabs.Trigger, Tabs.Content, controlled value, sizes, variants, appearance, and vertical orientation.

Transient notification/toast system (queue, timers, pause-on-idle, promise toasts) — the Toaster + createToaster controller from @takeoff-ui/react-spar (Takeoff UI / Spar React). Use WHENEVER building, adding, importing, styling, or fixing a toast, toaster, snackbar, notification, flash message, 'show success/error message', undo toast, or async/promise feedback in a React app that uses @takeoff-ui/react-spar / Takeoff / Spar.

Add a new release entry to the react-spar docs changelog. Parses a version + date from the user, walks the git history for the matching tag range (or a fallback range when no tag exists yet), categorizes commits into sections (Highlights, Fixes, Docs, Infrastructure), flips long sections to collapsible, and writes the entry to apps/docs/src/data/changelog.ts. Use when the user asks to generate release notes, add a changelog entry, or invokes /generate-changelog.

Generate or update @takeoff-ui/react-spar component documentation pages in apps/docs/docs/components. Use when asked to create component docs, fix a component page intro/description, or produce docs text for a component. Enforces concise, purpose-first component descriptions instead of listing compound subcomponent names in the page description.

Source-backed workflow for designing, implementing, reviewing, and verifying components in @takeoff-ui/react-spar. Enforces upstream-first thinking — Spar fixes precede thin takeoff-spar wrappers — and rejects adapter hooks by default.