Agent Skills

io.github.TanStack/table/compose-with-tanstack-devtools

Wire up TanStack Devtools for TanStack Table in React. Mount `TanStackDevtools` with `tableDevtoolsPlugin()` once at the app root and call `useTanStackTableDevtools(table)` after each `useTable` so the table is registered as a devtools target. Live devtools are tree-shaken to no-ops in production unless you import from `@tanstack/react-table-devtools/production`.

io.github.TanStack/table/migrate-v8-to-v9

Mechanical breaking-change migration from `@tanstack/react-table` v8 to v9. Every v8-shaped option, type, or method an agent will reproduce from muscle memory has a v9 equivalent enumerated below: `useReactTable` → `useTable`, root `get*RowModel` options → row model factories on `tableFeatures({...})` alongside their *Fns registries, `createColumnHelper<TData>` → `createColumnHelper<typeof features, TData>`, `table.getState()` → `table.state` / `table.store.state` / `table.atoms.X.get()`, `sortingFn` → `sortFn`, `enablePinning` → split, `_`-prefixed APIs unprefixed, `ColumnSizing` split into `columnSizingFeature` + `columnResizingFeature`. For incremental migration, `useLegacyTable` from `@tanstack/react-table/legacy` accepts the v8 API on the v9 engine — deprecated, larger bundle, no `table.Subscribe`. Long-term you migrate every table off it.

io.github.TanStack/table/getting-started

End-to-end first-table journey for `@tanstack/react-table` v9. Install the React adapter, declare `features` via `tableFeatures()` (row model factories and *Fns registries live on the features object alongside feature flags), create a column helper with both `TFeatures` and `TData` generics, instantiate `useTable`, and render with `<table.FlexRender>`. New users land here, not on `useLegacyTable`.

io.github.TanStack/table/compose-with-tanstack-virtual

`@tanstack/react-table` v9 does NOT include virtualization — pair with `@tanstack/react-virtual`. Standard row-virtualization pattern: get the row array from `table.getRowModel().rows`, feed `rows.length` to `useVirtualizer({ count, estimateSize, getScrollElement, ... })` in the DEEPEST possible component (a `TableBody`, NOT `App`), iterate `rowVirtualizer.getVirtualItems()` instead of `rows.map`, absolute-position each row with `transform: translateY(virtualRow.start)px`, and render `<tbody>` as a CSS grid with a fixed total height. Column virtualization uses `horizontal: true` plus padding-left/right placeholder cells. An experimental ref-mutation variant skips React reconciliation for ~10% extra perf but the standard pattern is the default.

io.github.TanStack/table/compose-with-tanstack-store

`@tanstack/react-table` v9 is built on TanStack Store. Each state slice (sorting, pagination, rowSelection, columnFilters, …) is a separate atom. The table exposes three READ surfaces — `table.atoms.<slice>` (per-slice readonly), `table.store` (flat readonly view), `table.state` (selector output from `useTable`) — and two WRITE paths — internal `table.baseAtoms.<slice>` OR YOUR `options.atoms[slice]` if you opt to own the slice. Use `useCreateAtom` from `@tanstack/react-store` for stable identity, `useSelector` for fine-grained reads, and pass the atom in `options.atoms` so the table writes through it directly — no `on*Change` handler required.

io.github.TanStack/table/compose-with-tanstack-query

Server-side / async data flow for `@tanstack/react-table` v9 with `@tanstack/react-query`. Canonical pattern: external pagination atom via `useCreateAtom<PaginationState>` + `options.atoms` (NOT `state + on*Change`), pagination object as part of `queryKey`, `manualPagination: true`, `placeholderData: keepPreviousData` to avoid the 0-rows flash, and `defaultData = useMemo(() => [], [])` to keep `data` reference stable between fetches. `rowCount` from the API response so `getPageCount()` works.

io.github.affaan-m/ECC/frontend-patterns

Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.

io.github.affaan-m/ECC/frontend-a11y

Accessibility patterns for React and Next.js — semantic HTML, ARIA attributes, form labeling, keyboard navigation, focus management, and screen reader support. Use when building any interactive UI component or form.

io.github.affaan-m/ECC/react-patterns

React 18/19 patterns including hooks discipline, server/client component boundaries, Suspense + error boundaries, form actions, data fetching, state management decision trees, and accessibility-first composition. Use when writing or reviewing React components.

io.github.affaan-m/ECC/react-performance

React and Next.js performance optimization patterns adapted from Vercel Engineering's React Best Practices (https://github.com/vercel-labs/agent-skills). Organizes 70+ rules across 8 priority categories — waterfalls, bundle size, server-side, client fetching, re-render, rendering, JS micro-perf, advanced. Use when writing, reviewing, or refactoring React/Next.js code for performance.

io.github.affaan-m/ECC/react-testing

React component testing with React Testing Library, Vitest/Jest, MSW for network mocking, accessibility assertions with axe, and the decision boundary between component tests and Playwright/Cypress end-to-end runs. Use when writing or fixing tests for React components, hooks, or pages.

io.github.alirezarezvani/claude-skills/code-to-prd

Reverse-engineer any codebase into a complete Product Requirements Document (PRD). Analyzes routes, components, state management, API integrations, and user interactions to produce business-readable documentation detailed enough for engineers or AI agents to fully reconstruct every page and endpoint. Works with frontend frameworks (React, Vue, Angular, Svelte, Next.js, Nuxt), backend frameworks (NestJS, Django, Express, FastAPI), and fullstack applications. Use when users mention: generate PRD, reverse-engineer requirements, code to documentation, extract product specs from code, document page logic, analyze page fields and interactions, create a functional inventory, write requirements from an existing codebase, document API endpoints, or analyze backend routes.

io.github.vercel-labs/json-render/react

React renderer for json-render that turns JSON specs into React components. Use when working with @json-render/react, building React UIs from JSON, creating component catalogs, or rendering AI-generated specs.

io.github.first-fluke/fullstack-starter/oma-mobile

Mobile specialist for Flutter, React Native, and Swift native iOS development. Use for mobile app, Flutter, Dart, React Native, Swift, SwiftUI, iOS, Android, Riverpod, swift-openapi-generator, and widget work.

io.github.alirezarezvani/claude-skills/senior-frontend

Frontend development skill for React, Next.js, TypeScript, and Tailwind CSS applications. Use when building React components, optimizing Next.js performance, analyzing bundle sizes, scaffolding frontend projects, implementing accessibility, or reviewing frontend code quality.

io.github.petyosi/react-virtuoso/reactive-engine

Manage application state with the @virtuoso.dev/reactive-engine-* package family. Use this skill when (1) defining reactive state with Cell, Stream, Trigger, or Resource nodes, (2) wiring React components through EngineProvider, useCellValue, useCellValues, or usePublisher, (3) fetching data with Query and Mutation from reactive-engine-query, (4) routing with Route, Layout, and Guard from reactive-engine-router, (5) persisting cells with linkCellToStorage, (6) architecting a component or library on top of the engine, or (7) any task involving Engine, pub, sub, getValue, combine, pipe, link, changeWith, the e namespace, or the error "No active engine found".

io.github.petyosi/react-virtuoso/react-virtuoso

Build virtualized lists, grids, and tables with react-virtuoso. Use this skill when (1) rendering large or infinite lists, (2) building grouped lists with sticky headers, (3) virtualizing HTML tables, (4) laying out same-sized items in a responsive grid, (5) building feeds or logs that follow new items at the bottom, (6) diagnosing virtualization symptoms such as jumpy scrolling, a list that does not scroll to the bottom, items overlapping, blank items, or "zero-sized element" errors, or (7) any task involving Virtuoso, GroupedVirtuoso, VirtuosoGrid, TableVirtuoso, VirtuosoHandle, itemContent, followOutput, or firstItemIndex.

io.github.millionco/react-doctor/react-doctor

Use when finishing a feature, fixing a bug, before committing React code, or when the user types `/doctor`, asks to scan, triage, or clean up React diagnostics. Covers lint, accessibility, bundle size, architecture. Includes a regression check and a full local-triage workflow that fetches the canonical playbook.

io.github.langgenius/dify/frontend-code-review

Review Dify frontend code for correctness, accessibility, component design, dify-ui usage, data/query boundaries, performance, and tests. Trigger for `.tsx`, `.ts`, `.js`, UI, React, Next.js, pending-change, or focused frontend review requests.

io.github.keybase/client/react-effect-lints

Use when fixing React hook lint failures in the Keybase client: react-hooks/set-state-in-effect, derived-state effects, prop-change resets, event-hidden-in-effect, stale async results.

io.github.keybase/client/react-native-best-practices

Software Mansion's best practices for production React Native and Expo apps on the New Architecture. Trigger on: 'React Native', 'Expo', 'New Architecture', 'Reanimated', 'Gesture Handler', 'react-native-svg', 'ExecuTorch', 'react-native-audio-api', 'react-native-enriched', 'Worklet', 'Fabric', 'TurboModule', 'WebGPU', 'react-native-wgpu', 'TypeGPU', 'GPU shader', 'WGSL', 'svg', 'animation', 'gesture', 'audio', 'rich text', 'AI model', 'multithreading', 'chart', 'vector', 'image filter', 'shared value', 'useSharedValue', 'runOnJS', 'scheduleOnRN', 'thread', 'worklet', or any question involving UI, graphics, native modules, or React Native threading and animation behavior. Also use when a more specific sub-skill matches.

io.github.millionco/react-doctor/writing-guidelines

Review docs/prose for Writing Guidelines compliance. Use when asked to "review my docs", "check writing style", "audit prose", "review docs voice and tone", or "check this page against the writing handbook".

io.github.affaan-m/ECC/frontend-patterns

Patrones de desarrollo frontend para React, Next.js, gestión de estado, optimización de rendimiento y buenas prácticas de UI.

io.github.affaan-m/ECC/react-patterns

React 18/19 patterns including hooks discipline, server/client component boundaries, Suspense + error boundaries, form actions, data fetching, state management decision trees, and accessibility-first composition. Use when writing or reviewing React components.