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.