techsiocz/techsio-ui-kit-ai

Use after component-usage-ux when an app needs @techsio/ui-kit Accordion for collapsible sections using the Zag.js-backed compound anatomy, supported variant, shadow, size, value, multiple, and collapsible props.

Use when an app needs the @techsio/ui-kit ActionIcon atom — an icon-only, square action button (toolbar/inline actions). Covers variant, size, disabled state, accessible labelling, and token-first styling.

Use when adopting @techsio/ui-kit in a new or existing apps/* project and setting up app semantic, typography, spacing, layout, radius, state, and minimal component token override files after a focused design-token interview.

Use when changing app-specific @techsio/ui-kit visuals through semantic, typography, spacing, layout, radius, or component CSS token overrides while avoiding redundant token chains, duplicated JSX className styling, and permanent local API-gap workarounds.

Use when reviewing an apps/* UI for correct @techsio/ui-kit adoption: existing component usage, native HTML replacement, nonexistent props, duplicate className styling, token-first violations, framework adapter mistakes, unnecessary wrappers, and UI-kit API gaps.

Use after component-usage-ux when an app needs @techsio/ui-kit Badge for compact status, category, discount, or metadata labels without duplicating token-backed color and spacing classes in JSX.

Use after component-usage-ux when an app needs @techsio/ui-kit Breadcrumb for page hierarchy navigation with Link/NextLink adapters, current page state, separators, ellipsis, icons, size, and underline variant.

Use after component-usage-ux when an app needs @techsio/ui-kit Button for actions, including correct variant, theme, size, loading state, icon props, and token-first styling rules.

Use after component-usage-ux when an app needs @techsio/ui-kit Carousel for Zag.js-backed slides, images, controls, indicators, autoplay, sizing, aspect ratio, object fit, and framework image adapters.

Use after component-usage-ux when an app needs @techsio/ui-kit CascadeSelect for choosing a value from hierarchical data with Zag.js path values, compound parts, parent or multiple selection, validation, and keyboard navigation.

Use after component-usage-ux when an app needs the @techsio/ui-kit Chart — a declarative data-visualization molecule built on TanStack Charts (@tanstack/charts + @tanstack/react-charts). One type prop covers line, area, bar, horizontal bar, scatter, pie and donut charts from the same data/x/y/series channels, with token-driven series colors, legend, tooltip, value formatting and selection callbacks.

Use after component-usage-ux when an app needs the low-level @techsio/ui-kit Checkbox atom, including invalid and indeterminate states, while preferring form molecules for labeled form rows.

Use after component-usage-ux when an app needs @techsio/ui-kit ColorSelect for choosing color swatches with supported layout, size, radius, disabled state, selected state, labels, counts, and single/multiple roles.

Use after component-usage-ux when an app needs @techsio/ui-kit Combobox for searchable selection with Zag.js collection behavior, controlled value/input, multiple mode, validation status, clear trigger, and token styling.

Use after component-usage-ux when an app needs @techsio/ui-kit Command for a searchable action list or a Dialog-based command palette with compound parts, grouped results, disabled actions, and optional shortcut hints.

Use when creating or refactoring @techsio/ui-kit React components in libs/ui, including atoms, molecules, organisms, tv() variants, React 19 ref props, component token CSS, Storybook stories, package subpath exports, and Figma handoff reminders.

Use after changing @techsio/ui-kit component TSX, token CSS, Storybook stories, Figma Code Connect files, package exports, or validation scripts. Checks prop/variant/token/story/Figma consistency and recommends focused commands before maintainer handoff.

Use as the apps/* UI-kit usage orchestrator. Chooses which @techsio/ui-kit component and per-component *-usage skill to load before selecting props, variants, themes, sizes, slots, framework adapters, and token overrides.

Use after component-usage-ux when an app needs the @techsio/ui-kit DataTable — a headless, data-driven grid built on @tanstack/react-table v9 that renders into the presentational Table organism. Covers column defs, sorting, conditional column filters, global search, row selection, column visibility/pinning/reorder, row reorder, tree/expanding rows, inline edit, colSpan/rowSpan, virtualization / infinite scroll and pagination — every feature behind a flag with a callback.

Use after component-usage-ux when an app needs @techsio/ui-kit DatePicker for locale-aware segmented date entry, calendar selection, optional transactional time entry, single or range typed values, and canonical form serialization through one integrated field.

Use after component-usage-ux when an app needs @techsio/ui-kit Dialog for modal dialogs, alert dialogs, drawers, actions, focus management, placement, size, and close behavior backed by Zag.js.

Use after component-usage-ux when an app needs @techsio/ui-kit Drawer for transient edge panels, modal or non-modal behavior, snap points, swipe gestures, multiple triggers, custom portals, controlled state, and stacks.

Use for controlled catalog facet presentation with generic option and range groups, active filters, overflow, and an inline panel or Dialog drawer.

Use when @techsio/ui-kit component work should flag a Figma library or Figma Code Connect follow-up. Prepares a reminder and points to the component-to-figma skill; never edits Figma or runs Figma MCP tools automatically.

Use after component-usage-ux when an app needs @techsio/ui-kit FileUpload to select, validate, preview, and manage local File objects through the Zag.js compound API, including accepted/rejected files and native form behavior.

Use after component-usage-ux when an app needs @techsio/ui-kit Footer for site footer composition with container, section, title, list, link, text, divider, bottom area, size, layout, direction, section flow, and framework link adapters.

Use after component-usage-ux when an app needs @techsio/ui-kit FormCheckbox for labeled checkbox fields with Zag.js checked/indeterminate state, help text, validation status, required, disabled, and read-only props.

Use after component-usage-ux when an app needs @techsio/ui-kit FormErrorSummary for a focusable error summary that links to invalid fields, without depending on a specific form library.

Use after component-usage-ux when an app needs @techsio/ui-kit FormInput for labeled single-line fields with Label, Input, StatusText, validation status, help text, required, disabled, and size props.

Use after component-usage-ux when an app needs @techsio/ui-kit FormNumericInput for labeled numeric fields using NumericInput compound children, validation status, help text, and number-specific constraints.

Use after component-usage-ux when an app needs @techsio/ui-kit FormTextarea for labeled multi-line text fields with Textarea, Label, StatusText, validation status, help text, size, resize, required, and disabled props.

Use when consuming @techsio/ui-kit in framework apps, especially Next.js 16+ with React Compiler, NextLink, NextImage, token CSS imports, polymorphic as props, adapter prop forwarding, and wrapper-avoidance checks.

Use after component-usage-ux when an app needs @techsio/ui-kit Gallery for product or media image galleries with Carousel integration, thumbnails, controlled page, orientation, thumbnail image adapters, thumbnail aria labels, empty state, and NextImage support.

Use after component-usage-ux when an app needs @techsio/ui-kit Header for responsive site header composition with desktop/mobile sections, containers, nav, nav items, actions, hamburger, active state, size, direction, and token styling.

Use after component-usage-ux when an app needs shortcut hints or explicit-store Zag keyboard registrations with @techsio/ui-kit Hotkeys. Covers compound keycaps, current callbacks, store ownership, scopes and optional registry readback.

Use after component-usage-ux when an app needs @techsio/ui-kit Icon tokens or Iconify classes with the library's supported size and semantic color props.

Use after component-usage-ux when an app needs @techsio/ui-kit Image or a framework image adapter such as NextImage through the Image atom's as prop.

Use after component-usage-ux when an app needs the low-level @techsio/ui-kit Input atom, including valid size, variant, embedded button spacing, and token-first validation styling.

Use when @techsio/ui-kit component APIs, token rules, Storybook rules, app usage patterns, Figma handoff practices, validation commands, or generated skills change and the TanStack Intent skill artifacts or SKILL.md files need review or regeneration.

Use after component-usage-ux when an app needs @techsio/ui-kit Label for form-control labels with valid size, disabled, required, and htmlFor usage.

Use after component-usage-ux when navigation should look like a Button using @techsio/ui-kit LinkButton, including framework link adapters, href, disabled state, icons, and Button-compatible variants/themes/sizes.

Use after component-usage-ux when an app needs the low-level @techsio/ui-kit Link atom for inline or unstyled navigation, including external links and framework adapter usage.

Use after component-usage-ux when an app needs @techsio/ui-kit Menu for action, radio, checkbox, separator, or submenu items using the Zag.js menu wrapper, Button trigger, icons, and supported open/highlight/select props.

Use after component-usage-ux when an app needs @techsio/ui-kit NumericInput for accessible number entry with Zag.js spinbutton behavior, compound parts, numeric public values, locale formatting, min/max/step, and token-first styling.

Use after component-usage-ux when an app needs @techsio/ui-kit Pagination for link-based paginated navigation with Zag.js pagination, getPageUrl, LinkButton, NextLink adapters, compact mode, variants, and sizes.

Use after component-usage-ux when an app needs @techsio/ui-kit PhoneInput for international phone entry with country selection, libphonenumber details, hidden E.164 form value, native validation, validation status, and compound country picker slots.

Use after component-usage-ux when an app needs @techsio/ui-kit Popover for anchored non-blocking content using Zag.js compound parts, placement, portalling, close behavior, arrow, title, description, and close trigger.

Use after component-usage-ux when an app needs @techsio/ui-kit ProductCard for product summaries with image adapter, name, price, stock, badges, rating, actions, and card button variants.

Use after component-usage-ux when an app needs @techsio/ui-kit RadioCard for prominent single-choice cards with Zag.js radio behavior, label, item, hidden input, control, text, description, addon, indicator, and status text.

Use after component-usage-ux when an app needs @techsio/ui-kit RadioGroup for simple exclusive choices with Zag.js radio behavior, label, item group, hidden inputs, controls, text, descriptions, validation status, variants, and sizes.

Use after component-usage-ux when an app needs @techsio/ui-kit Rating for accessible rating capture or display using the Zag.js rating-group wrapper, supported value/count/allowHalf/readOnly/disabled props, and token styling.

Use after component-usage-ux when an app needs @techsio/ui-kit SearchForm for search landmarks, controlled or uncontrolled search text, label, control, input, submit button, clear button, icon props, and token-backed field layout.

Use for grouped storefront search navigation with rich results and an all-results link, composed from the UI-kit Combobox.

Use after component-usage-ux when an app needs @techsio/ui-kit Select for non-search selection with Zag.js collection behavior, hidden form select, trigger, value text, clear trigger, item groups, item indicators, validation status, size, and multiple mode.

Use after component-usage-ux when an app needs responsive start/end navigation, icon collapse, two-pane navigation, or a sticky-header shell.

Use after component-usage-ux when an app needs @techsio/ui-kit Skeleton for loading placeholders using Root, Circle, Text, and Rectangle compound parts with token-backed variants, sizes, and animation speeds.

Use after component-usage-ux when an app needs @techsio/ui-kit Slider for single or range numeric adjustment with Zag.js slider behavior, label, markers, value text, orientation, min/max/step, validation status, and token styling.

Use after component-usage-ux when an app needs @techsio/ui-kit StatusText for inline validation, success, warning, or default status messages with optional token icons and size/alignment props.

Use after component-usage-ux when an app needs @techsio/ui-kit Steps for multi-step workflows using the Zag.js steps machine, compound list/items, panels, progress, navigation triggers, linear flow, controlled step, and variants.

Use when creating or editing Storybook CSF3 stories for @techsio/ui-kit in libs/ui, including Playground stories, argTypes controls, VariantContainer and VariantGroup matrices, fn() handlers, token-based story layout classes, and UI-kit components instead of native HTML.

Use after component-usage-ux when an app needs @techsio/ui-kit Switch for boolean settings using Zag.js switch behavior, hidden input, label children, checked/defaultChecked, validation status, help text, required, disabled, and read-only state.

Use after component-usage-ux when an app needs @techsio/ui-kit Table for semantic tabular data with caption, header, body, footer, rows, column headers, numeric cells, selected rows, variants, interactive rows, sticky header/first column, column borders, and size props.

Use after component-usage-ux when an app needs @techsio/ui-kit Tabs for switching peer content panels with Zag.js tabs behavior, compound list, triggers, content, indicator, orientation, activation mode, variants, fitted, and justify props.

Use when adding or changing Tailwind v4 tokens in @techsio/ui-kit, including @theme static, semantic aliases, two-layer component tokens, component CSS imports, Tailwind token utility class mapping, app override compatibility, and token validator commands.

Use after component-usage-ux when an app needs @techsio/ui-kit Textarea for multi-line text entry with valid variant, size, resize, readonly styling, and token-first validation.

Use after component-usage-ux when an app needs @techsio/ui-kit Toast for transient CRUD feedback using the global Zag.js toaster store, Toaster portal, useToast, toast types, title, description, close trigger, and token styling.

Use after component-usage-ux when an app needs @techsio/ui-kit Tooltip for supplemental hover/focus help using the Zag.js tooltip wrapper, supported timing, placement, interaction, controlled state, and token styling props.

Use after component-usage-ux for guided walkthroughs with @techsio/ui-kit Tour: tooltip/dialog/floating steps, target resolution, interactive wait effects, imperative control, shared action buttons, cleanup and app-owned onboarding policy.

Use after component-usage-ux when an app needs @techsio/ui-kit TreeView for hierarchical data with Zag.js tree-view behavior, node collection, branch and item parts, selection behavior, icons, indentation, expansion, selection, and keyboard/typeahead support.

Router for using @techsio/ui-kit components in apps (correct imports, variants, tokens, UX rules). Use when implementing app UI with the kit rather than developing the kit itself. Invoke explicitly with $ui-component-usage <component>.

Keep @techsio/ui-kit and Figma in sync: Code Connect (*.figma.ts) mappings, Figma variable naming/aliasing, and the token export pipeline. Use after a component's public API or visuals changed. Invoke explicitly with $ui-figma-sync.

Use before releasing or packaging @techsio/ui-kit. Checks RSLib build, package subpath exports, publint, token validators, Storybook build/a11y, component screenshots, files array, and semantic-release CI constraints.

Use first when a task could touch @techsio/ui-kit in libs/ui or an apps/* consumer. Routes component authoring, app usage, token work, Storybook, validation, framework adapters, Figma handoff, and Intent skill maintenance without crossing library/app scope accidentally.

Scaffold a new @techsio/ui-kit component in libs/ui. Use when asked to create a new atom, molecule, organism, or template — walks through component source with tv(), token CSS, story, and Figma follow-up. Invoke explicitly with $ui-new-component <name>.

Check @techsio/ui-kit publish readiness before merging: exports map, files whitelist, semantic-release commit types, build output, and breaking-change review. Invoke explicitly with $ui-release-check.

Write or update Storybook stories for a @techsio/ui-kit component (CSF3, Storybook 10, autodocs). Use when a component is added or its API changes. Invoke explicitly with $ui-story <component>.

Add or edit a brand theme (light/dark pair) for @techsio/ui-kit — either via the Figma variables pipeline or fully in code ("vibe" a theme). Use for brand colors, data-theme switching, or theme overrides. Invoke explicitly with $ui-theme-brand.

Work with @techsio/ui-kit design tokens: add or change component token CSS, understand the token cascade, shared form-control/icon-button utilities, and run token validation. Use for any change under libs/ui/src/tokens/. Invoke explicitly with $ui-tokens.

Run the full @techsio/ui-kit quality gate before commit/push: build, token validation, biome on changed files, tailwind lint, visual tests, consistency checklist. Use as the last step of any libs/ui change. Invoke explicitly with $ui-validate.

Use when designing, building or reviewing any screen with @techsio/ui-kit — the house UX/UI rules shared by every component: UX writing (button labels, save/edit/delete copy, toast and error messages), date and number formatting, numeric alignment in tables, disabled/read-only/loading/empty states, where CRUD actions and feedback appear (top-right vs bottom-right, toast placement), and which component to pick instead of another.

Use for nested page or category links with independently expandable and styled subgroups, standalone or inside Sidebar or Drawer.

Use when creating or refactoring @techsio/ui-kit interactive components with Zag.js machine/connect APIs, normalizeProps, React context, compound Component.Subcomponent assignments, slots, adapter props, and data attribute state styling.