opsiforce

Charts and data visualization with Recharts — bar, line, area, pie/donut, scatter, and composed/radar/radial variants. Plus reference lines/areas (targets, thresholds), brush (zoom), synced charts, click drill-down, custom theme-aware tooltips, sparklines in stat cards, axis formatters (currency/percentages/dates), responsive sizing, accessibility. Use whenever the user wants graphs, charts, dashboards, analytics, KPIs, trends, or any visual representation of numeric or temporal data.

Design polished, visually distinctive frontend UIs that avoid generic "AI template" aesthetics. Use when starting a new app to establish visual identity, or when the UI needs to look more professional, creative, or distinctive. Load this skill at the beginning of every new app.

Build data tables with @tanstack/react-table — column definitions, sorting, filtering, pagination. Use when displaying tabular data, building admin panels, or showing lists.

Load for ANY frontend / UI / styling work — shadcn/ui components, react-hook-form + zod forms, multi-step wizards, responsive app shells (desktop sidebar ↔ mobile hamburger drawer), React Router routing & URL-synced lists (filter/search/sort/pagination), Lucide icons, Tailwind v4 theming, accessibility (focus, ARIA, prefers-reduced-motion, hydration), and styling / composition / forms / icons / patterns rules. Use whenever building or modifying any user interface, form, modal, drawer, bottom sheet, menu, searchable selector, toast notification, icon, status indicator, card, tabs, badge, toggle, theme color, dark-mode toggle, or any styled / interactive element.

Browser automation for testing and debugging — open pages, take snapshots, click/fill elements, inspect network requests, verify UI. Use when you need to visually test the app, verify a feature works, debug UI issues, or investigate what the user sees.

Animations and motion design with motion/react. Load whenever animating any UI element — entrance/exit, hover/tap, drag, swipe-to-dismiss, scroll reveal, layout/shared transition (layoutId, LayoutGroup), page change, staggered list, tab indicator, parallax, scroll progress, modal with backdrop, imperative sequencing (useAnimate), motion values + transforms (rotate-on-drag, opacity-on-scroll), or prefers-reduced-motion.

Export data as CSV, JSON, or printable views. Use when the user wants to download data, export to Excel/CSV, generate reports, or create print-friendly pages. No extra packages needed.

Data fetching and server state for the frontend — TanStack Query v5, plus raw HTTP (fetch, axios, FormData uploads) for external APIs called from the backend. Load this whenever you need to make any API request, call /api, mutate server state, upload a file, or call a third-party API. This is the standard data layer — never use raw fetch directly in components.

date-fns v4 with native @date-fns/tz — parsing/formatting, calculations, timezone-safe patterns, calendar pickers (react-day-picker), and common pitfalls. Use whenever working with dates, timestamps, durations, calendar pickers, due dates, schedule windows, time zones, DST, or any timezone-sensitive computation.

Add drag-and-drop functionality with @dnd-kit. Use whenever the user wants to reorder items, sort a list, build a kanban board, or any drag-to-rearrange interaction. For reordering/sorting use dnd-kit; for free-drag/swipe gestures (drag a card around, swipe-to-dismiss) use the animations skill.

Call the LLM gateway (APP_LLM_API_KEY) for AI capabilities — chat/text completions, structured output, streaming, vision (image analysis), image generation, and audio/video transcription. Routes to OpenAI (GPT) and Anthropic (Claude) through Bifrost via one OpenAI-compatible key, with reasoning-effort control. Use whenever a task needs AI — adding a feature to an app being built, or doing a one-off job directly with no app. This is the only sanctioned path for transcription; a local speech model or browser speech API must not be used.

Create NestJS API endpoints with controllers, services, and modules. Use when adding API routes, backend features, validation, or any backend code change. This is the backend framework — every API change should follow NestJS patterns.

Handle file uploads with drag-and-drop using react-dropzone. Use when users need to upload files, images, documents, or any binary data. Covers the drop zone UI, file preview, and error handling inline; backend receive-and-store is covered in a reference.

Scheduled/cron background tasks — use when the user asks for recurring tasks, cron jobs, periodic checks, or "run X every Y" — any background work that needs to run on a schedule.

The platform does NOT currently support sending emails. Use when the user asks for email features (notifications, reports, welcome emails, password resets, etc.) to explain this limitation.

SQLite database via Node 24's built-in node:sqlite — migrations, DatabaseService API, full-text search (FTS5). Use for any data model change, schema work, or SQL query. Every data model change starts here with a migration file.

Client-side state management with Zustand v5 — global stores, selectors, useShallow, persist (localStorage), devtools, immer middleware, slices pattern. Use for shared UI state across components — filters, selections, sidebar/modal state, shopping cart, undo history, drag state, multi-step wizard state, anything read or written by more than one component. Do NOT use for server data (use data-fetching) or URL-synced state (use useSearchParams from react-router). Load whenever a component needs state that isn't local to it.

Render large lists efficiently with @tanstack/react-virtual (pre-installed). Use when displaying 100+ items in a list, table, or grid — virtualizes rendering so only visible items are in the DOM.