Turn a mock-data React+Relay feature into properly componentized code backed by colocated GraphQL fragments and a clean schema contract for the backend team. Use when the user wants to convert a mocked UI into a backend contract, walk the component hierarchy of a feature, replace mock/hardcoded data with fragments, componentize a page for Relay, fragmentize a feature, spec a feature for the backend team, or build a schema contract from the UI. Triggers on "mock to contract", "turn this mock into a contract", "walk the component hierarchy", "componentize this page", "fragmentize", "spec this feature for the backend", or "schema-ify this feature".
Take a user's plain-English feature description and stand up a working UI prototype with realistic mock data — no GraphQL, no backend, just React + Tailwind + local state — that slots into the existing app design system and is hand-off-ready for the `mock-to-contract` skill later. Use when the user wants to mock up a new feature, prototype a page, wireframe a section, build a UI for something without backend yet, sketch out a new view, or explicitly says "do not write any GraphQL yet" / "let's just build the UI" / "no backend yet". Triggers on "prototype X", "mock up X", "build a UI for X", "wireframe X", "sketch out X", "add a new section for X", "let's just build the UI", "no graphql yet".
Best practices for writing idiomatic Relay code. ALWAYS use this skill when writing or modifying React components that use Relay for data fetching. Covers fragments, queries, mutations, pagination, and common anti-patterns. Use when you see `useFragment`, `useLazyLoadQuery`, `usePreloadedQuery`, `useMutation`, `usePaginationFragment`, `graphql` template literals, `react-relay` imports, or `__generated__/*.graphql` files. Also use when asked to explain Relay concepts, debug Relay issues, or review Relay code.
Turn a mock-data React+Relay feature into properly componentized code backed by colocated GraphQL fragments and a clean schema-extension contract for the backend team. Use when the user wants to convert a mocked UI into a backend contract, walk the component hierarchy of a feature, replace mock/hardcoded data with fragments, componentize a page for Relay, fragmentize a feature, spec a feature for the backend team, or build a schema contract from the UI. Triggers on "mock to contract", "turn this mock into a contract", "walk the component hierarchy", "componentize this page", "fragmentize", "spec this feature for the backend", or "schema-ify this feature".
Author Mocha mediator command handlers in the application layer, wire them through HotChocolate mutations using mutation conventions, and write the matching command tests. Fire whenever the user says "add a command", "Mocha command", "ICommand", "command handler", "mutation handler", "write a mutation", "add a mutation", or asks to add a write/create/update/delete operation to an entity. Fire automatically when editing any file under `*/Application/**/Commands/*` or any file named `*Mutations.cs`. Bias toward firing — under-firing this skill yields hand-rolled input types, missing existence-leak guards, and tests that skip the mandatory authorization cases.
Author Green Donut DataLoaders using the source generator ([DataLoader] attribute, partial methods). Fire whenever the user mentions "DataLoader", "[DataLoader]", "batched loading", "Green Donut", "GraphQL batching", "Dictionary<TKey, TValue> DataLoader", "ToBatchPageAsync", "ILookup<", "DataLoaderGroup", or "BatchingContext", whenever a new GraphQL field needs to resolve a related entity, and whenever editing or creating any file matching `*DataLoaders.cs`. Bias toward firing — this is the only correct shape for batched reads.
HotChocolate v15/v16 best practices for a GraphQL backend — queries, mutations, types, node resolvers, error unions, mutation conventions, Mocha mediator integration. Fire whenever the user mentions HotChocolate, "[QueryType]", "[MutationType]", "[ObjectType<T>]", "[NodeResolver]", "[ID<", "[Error<", "[Lookup]", "[UsePaging]", "GraphQL backend", "GraphQL API", "Relay node", "mutation conventions", or "Banana Cake Pop", and whenever editing any file under `**/GraphQL/<Entity>/Types/*.cs`, `**/GraphQL/<Entity>/Operations/*.cs`, `**/GraphQL/<Entity>/Extensions/*.cs`, or any file matching `*Type.cs`, `*Queries.cs`, `*Mutations.cs` in a HotChocolate project. Bias toward firing on any GraphQL-layer edit.
GraphQL schema design and review. Use when designing new GraphQL schema changes (types, mutations, queries, connections, enums, errors), reviewing schema diffs, planning schema evolution, or auditing nullability and naming. Triggers on 'graphql schema design', 'design a mutation', 'design a query', 'design a type', 'new type', 'new mutation', 'review schema', 'review schema diff', 'schema review', 'schema evolution', 'audit the schema', '/graphql-schema-design'.