Skip to main content

react skills

29 skills. Source of truth: skills/react/.

entity-audit (sub-skill)​

Slash command /entity-audit — run full codebase audit against @prometheus-ags/prometheus-entity-management CLAUDE.md rules: component/store boundaries, hook I/O, registerSchema coverage, JSDoc on public hooks, and realtime/list patterns. Produces a severitized report using references/audit-checklist.md.

v1.0.0 · react typescript entity-management · source

entity-crud-form (sub-skill)​

Build EntityFormSheet and EntityDetailSheet configurations from FieldDescriptor arrays: field types, enum options, readonly/create/edit flags, custom editControl/render, and wiring to useEntityCRUD buffers and actions.

v1.0.0 · react typescript entity-management · source

entity-crud-page (sub-skill)​

Scaffold a full CRUD page (list, create, edit, detail, delete) using useEntityCRUD with EntityTable, EntityDetailSheet, and EntityFormSheet. Enforces Components → Hooks → Stores: page composes only; useXxxCRUD hook wraps library CRUD; API module holds fetch/mutations.

v1.0.0 · react typescript entity-management · source

entity-crud-relations (sub-skill)​

Register EntitySchema graphs with registerSchema: belongsTo, hasMany, manyToMany, listKeyPrefix alignment, invalidateTargetLists, globalListKeys, and verification that cascadeInvalidation matches list query keys.

v1.0.0 · react typescript entity-management · source

entity-crud-table (sub-skill)​

Build EntityTable views with column helpers (textColumn, numberColumn, enumColumn, etc.), SortHeader, selectionColumn, and meta.entityMeta for filters; sync sorting and search with useEntityView via UseEntityViewResult.

v1.0.0 · react typescript entity-management · source

entity-gc (sub-skill)​

Slash command /entity-gc — design application-level eviction for @prometheus-ags/prometheus-entity-management: removeEntity for stale entities, clearPatch for UI overlays, list refresh after bulk delete, route-based cleanup, and policies for long-lived sessions. Notes library has no automatic GC yet.

v1.0.0 · react typescript entity-management · source

entity-gql-hooks (sub-skill)​

Slash command /entity-gql-hooks — produce typed useGQLEntity, useGQLList, useGQLMutation wrappers for concrete GraphQL documents; wire queryKey, getItems, getPagination, sideDescriptors, and invalidateLists for @prometheus-ags/prometheus-entity-management.

v1.0.0 · react typescript entity-management · source

entity-gql-setup (sub-skill)​

Slash command /entity-gql-setup — scaffold createGQLClient (GQLClientConfig), authentication headers, and EntityDescriptor sets from GraphQL SDL or introspection. Aligns paths and extractId with normalizeGQLResponse behavior in @prometheus-ags/prometheus-entity-management.

v1.0.0 · react typescript entity-management · source

entity-gql-subscription (sub-skill)​

Slash command /entity-gql-subscription — connect GraphQL subscriptions via graphql-ws (or compatible) to either GQLClient.subscribe/useGQLSubscription with EntityDescriptors, or createGraphQLSubscriptionAdapter + RealtimeManager for coalesced ChangeSet delivery.

v1.0.0 · react typescript entity-management · source

entity-graph-crud (sub-skill)​

Generate complete CRUD screens for any entity type using @prometheus-ags/prometheus-entity-management hooks and UI components. Analyzes entity shape, produces column definitions (TanStack Table + entityMeta), FieldDescriptor-based forms, EntityDetailSheet / EntityFormSheet wiring, and registerSchema + cascade invalidation—all strictly following Components → Hooks → Stores → APIs data flow.

v1.0.0 · react typescript entity-management · source

entity-graph-detect (sub-skill)​

Static analysis pass to infer EntityType definitions, id fields, and relation hints from TypeScript, Prisma, GraphQL SDL, OpenAPI, and API routes—outputs entity_manifest JSON aligned with shared schemas.

v1.0.0 · react typescript entity-management · source

entity-graph-graphql (sub-skill)​

Set up the GraphQL layer for @prometheus-ags/prometheus-entity-management: GQLClient, EntityDescriptor trees, response normalization into the Zustand entity graph, and typed hooks (useGQLEntity, useGQLList, useGQLMutation, useGQLSubscription). Supports schema-driven descriptor generation from .graphql files or introspection of a running endpoint. Sub-skills cover setup, hook codegen patterns, and wiring subscriptions through graphql-ws plus RealtimeManager.

v1.0.0 · react typescript entity-management · source

entity-graph-init (sub-skill)​

Bootstrap @prometheus-ags/prometheus-entity-management in a React app—install dependency, configureEngine, optional schema registration stubs, and a minimal useEntity/useEntityList proof while enforcing Components → Hooks → Graph layering.

v1.0.0 · react typescript entity-management · source

entity-graph-migrate (sub-skill)​

Phased migration from TanStack Query, Apollo, Redux, or SWR to @prometheus-ags/prometheus-entity-management—strangler patterns, query-key mapping, SSR hydration, and rollback-aware PR slices.

v1.0.0 · react typescript entity-management · source

entity-graph-optimize (sub-skill)​

Audit existing @prometheus-ags/prometheus-entity-management integrations for architectural violations (components→hooks→stores), performance issues (Zustand selectors, subscription churn), missing cascade/schema registration, and memory growth. Sub-skills: full CLAUDE.md audit, render/subscriber analysis, and eviction/GC strategies using graph APIs.

v1.0.0 · react typescript entity-management · source

entity-graph-prisma (sub-skill)​

Analyze schema.prisma and integrate Prisma-backed APIs with @prometheus-ags/prometheus-entity-management: TypeScript entity shapes, registerSchema relation graphs, createPrismaEntityConfig for REST list/detail/CRUD, toPrismaWhere/toPrismaOrderBy from FilterSpec, Next.js App Router CRUD routes, and migration from ad-hoc Prisma calls to the library’s adapter patterns. Optional prisma-entity-graph-generator for codegen.

v1.0.0 · react typescript entity-management · source

entity-graph-realtime (sub-skill)​

Add realtime synchronization to an existing @prometheus-ags/prometheus-entity-management setup: detect the push source (WebSocket, Supabase Realtime, Convex, GraphQL subscriptions, ElectricSQL+PGlite), configure RealtimeManager, normalize inbound traffic to ChangeSet/EntityChange, tune the 16ms coalescing window or flushInterval 0, and wire channel subscriptions with correct cleanup and list invalidation.

v1.0.0 · react typescript entity-management · source

entity-graph-setup (sub-skill)​

Analyze a React/Vite/Next.js codebase and introduce @prometheus-ags/prometheus-entity-management from scratch—detect legacy data layers, infer entity types, emit schema registrations, and produce phased migration plans without breaking architecture rules.

v1.0.0 · react typescript entity-management · source

entity-perf (sub-skill)​

Slash command /entity-perf — analyze re-render patterns, Zustand selector granularity, duplicate fetches (dedupe keys), realtime flush settings, and list virtualization opportunities for @prometheus-ags/prometheus-entity-management apps.

v1.0.0 · react typescript entity-management · source

entity-prisma-api (sub-skill)​

Slash command /entity-prisma-api — scaffold Next.js App Router API routes with Prisma Client for list/detail/create/update/delete, decoding where/orderBy JSON from createPrismaEntityConfig list fetchers with allowlisted filters.

v1.0.0 · react typescript entity-management · source

entity-prisma-generator (sub-skill)​

Slash command /entity-prisma-generator — add a Prisma generator package (prisma-entity-graph-generator pattern) to emit entity graph configs and registration from DMMF; configure prisma schema generator block, output path, and post-generate typecheck.

v1.0.0 · react typescript entity-management · source

entity-prisma-migrate (sub-skill)​

Slash command /entity-prisma-migrate — refactor existing manual Prisma + fetch + useState patterns to @prometheus-ags/prometheus-entity-management hooks driven by createPrismaEntityConfig, registerSchema, and useEntityView/useEntityCRUD while preserving API routes and auth.

v1.0.0 · react typescript entity-management · source

entity-prisma-setup (sub-skill)​

Slash command /entity-prisma-setup — analyze schema.prisma, generate TypeScript entity types, createPrismaEntityConfig modules, registerSchema bootstrap, and align REST list/detail shapes with @prometheus-ags/prometheus-entity-management adapters.

v1.0.0 · react typescript entity-management · source

entity-realtime-channel (sub-skill)​

Add or adjust RealtimeManager channel subscriptions: ChannelConfig per EntityType, optional normalize on register(), SubscriptionConfig label and replayOnConnect, and affectedListKeys in ChangeSet for list refresh.

v1.0.0 · react typescript entity-management · source

entity-realtime-local-first (sub-skill)​

Wire ElectricSQL shape streams and PGlite with createElectricAdapter (SyncAdapter): ElectricTableConfig, shapeStream subscription, PGlite listen path into ChangeSet, useLocalFirst and usePGliteQuery for reads, and sync-complete UX.

v1.0.0 · react typescript entity-management · source

entity-realtime-setup (sub-skill)​

Greenfield RealtimeManager wiring: getRealtimeManager options (flushInterval, onStatusChange, onChangeReceived), instantiate the chosen adapter factory, register ChannelConfig entries, store UnsubscribeFn for cleanup, and document SSR/client-only boundaries.

v1.0.0 · react typescript entity-management · source

entity-realtime-surreal-live (sub-skill)​

Wire SurrealDB LIVE SELECT subscriptions into a Prometheus entity graph via createSurrealLiveAdapter. Covers select-then-live seeding, CREATE/UPDATE/DELETE action mapping, reconnect with exponential backoff, and optional checkpoint-based replay on reconnect.

v1.0.0 · entity realtime surrealdb adapter prometheus · source

prometheus-entity-skills​

Full-stack entity management skill suite for React applications using @prometheus-ags/prometheus-entity-management. Covers setup, CRUD screens, GraphQL integration, Prisma backend, realtime sync, and performance optimization. Use when building entity-driven admin UIs, data management dashboards, or any React app with relational entity graphs.

v1.0.0 · react typescript entity-management · source

react-vite-stack​

Canonical React 19 + Vite 8 stack for Prometheus AGS frontend projects. Covers TanStack Router (file-based routing), TanStack Query (server state), TanStack React-Table (data grids), Zustand 5 (client state), shadcn/ui + Tailwind 4 (component system), and @prometheus-ags/prometheus-entity-management (normalized entity graph). Always use .tsx for React components. Use when scaffolding or extending any Prometheus AGS frontend application.

v1.0.0 · react typescript entity-management · source