agent-playground

Implement a new feature or component following the conventions of this monorepo. Use when the user asks to build something new in the staff/public UIs, shared packages, or api. Strongly prefer using Ant Design for UI work and the shared @repo/ui library.

Add a new Ant Design based component or page feature to the staff or public Vite apps, or extend the shared @repo/ui library. Use when the user wants to introduce new UI elements using antd as the primary library.

Scaffold a new Vite + React + TypeScript app in this Turborepo (e.g. a third UI besides staff and public). Use when the user wants to add another frontend that will also connect to the shared api backend.

Create a new reusable UI component or page feature in one of the Vite UIs (staff or public), or extend the shared @repo/ui library. Use when the user wants to add a new button, form, page section, or feature using Ant Design as the primary library.

Guide for building React applications with Apollo Client in the staff and public Vite apps. Use when: (1) setting up or configuring Apollo Client in apps/staff or apps/public, (2) writing GraphQL queries or mutations with hooks (useQuery, useMutation), (3) configuring caching, cache policies, or optimistic UI, (4) managing local state or error handling in the UIs that connect to the shared apps/api backend, (5) troubleshooting Apollo Client errors, performance, or integration with Ant Design components. Always coordinate with the backend schema in apps/api and use the shared @repo/ui + AntdProvider theming. Prefer patterns that work for both staff (internal) and public (customer-facing) experiences.

Guide for writing Apollo Connectors schemas to integrate REST APIs into GraphQL. Use this skill when: (1) connecting REST services to the GraphQL backend in apps/api, (2) using @source and @connect directives, (3) implementing entity resolvers with batching from external APIs. In this monorepo, use to extend the Hono/Apollo API without duplicating logic. The staff/public UIs can then query unified data. Coordinate with graphql-schema, update-graphql, apollo-server. Test via portless https://api.localhost/graphql.

Guide for authoring Apollo Federation subgraph schemas with entities, sharing, and cross-subgraph resolution. Use this skill when: (1) creating or evolving federated schemas for the backend (future split of apps/api or new subgraphs), (2) defining entities with @key, (3) using @shareable, @external, @requires, @provides, @override, (4) troubleshooting composition errors. In this monorepo, start with the single server in apps/api but prepare for federation. Coordinate with graphql-schema, update-graphql, rover. The UIs in staff/public would query the supergraph.

Guide for using Apollo MCP Server to connect AI agents with GraphQL APIs in this monorepo. Use this skill when: (1) setting up or configuring Apollo MCP Server to expose the shared backend (apps/api), (2) defining MCP tools from GraphQL operations in the schema, (3) using introspection tools (introspect, search, validate, execute) from agents, (4) troubleshooting MCP server connectivity or tool execution for the staff/public UIs or custom agents. Perfect for the agentPlayground theme - use to let agents query the GraphQL API at https://api.localhost/graphql (via portless) or deployed. Coordinate with custom skills like update-graphql, implement-feature, and the .grok/skills/ system.

Guide for configuring and running Apollo Router for federated GraphQL supergraphs in this monorepo. Use this skill when: (1) setting up Router to serve the composed supergraph (future use of federation in apps/api or new subgraphs), (2) configuring routing, headers, CORS for the UIs (staff/public), (3) custom plugins or telemetry, (4) troubleshooting Router with the Hono/Apollo subgraphs. Use with apollo-federation, rover, apollo-mcp-server. The UIs would point to the Router instead of direct api.

Guide for building and maintaining GraphQL servers with Apollo Server in this monorepo. Use when: (1) modifying the backend in apps/api (Hono + Apollo Server integration), (2) defining or updating schemas/resolvers in apps/api/src/graphql/, (3) handling context, auth, or plugins for the shared API used by staff and public UIs, (4) troubleshooting Apollo Server errors, performance, or Azure Functions compatibility. Strongly prefer patterns that keep the API clean for both UIs while following the existing Hono adapter setup.

Add or update portless configuration for local HTTPS development in this monorepo. Use when setting up new apps/services or changing routing for staff, public, api, web, or docs.

Create a new well-formed Grok skill (SKILL.md with frontmatter) inside .grok/skills/, and optionally a portable version in agents/skills/. Use when the user wants to capture a repeatable workflow as a reusable skill in this repo.

Guide for writing GraphQL operations (queries, mutations, fragments) in the staff and public UIs following best practices. Use when: (1) writing or reviewing GraphQL queries/mutations in apps/staff or apps/public (e.g. in App.tsx or lib/), (2) organizing operations with fragments for colocation with Ant Design components, (3) optimizing data fetching from the shared apps/api backend, (4) setting up type generation, linting, or reviewing for efficiency in the monorepo. Always coordinate with the schema in apps/api/src/graphql/schema.ts and the custom update-graphql skill. Use variables, name operations, request only needed fields, and ensure compatibility with both UIs and the shared @repo/ui + AntdProvider.

Guide for designing and evolving GraphQL schemas in this monorepo. Use when: (1) designing or reviewing the schema in apps/api/src/graphql/schema.ts, (2) adding new types, fields, pagination, errors, or security patterns, (3) ensuring the schema works well for both staff and public UIs, (4) following best practices for type design, naming, nullability, and evolution. Always coordinate with the existing in-memory demo, Hono setup, and client usage in the Vite apps. Prefer patterns that keep the API clean and maintainable across the Turborepo.

Review a UI component (especially Ant Design based) for the staff or public apps. Use when the user asks to review, audit, or improve a component in apps/staff or apps/public. Check for consistency with the shared @repo/ui, proper theming, accessibility, and TypeScript quality.

Guide for using Apollo Rover CLI to manage GraphQL schemas in this monorepo. Use this skill when: (1) publishing or fetching the schema for the shared backend (apps/api), (2) composing or validating schemas, (3) running local supergraph development with rover dev (useful even for single subgraph), (4) validating schema changes with check and lint, (5) exploring the schema for agent-driven discovery. Coordinate with update-graphql, graphql-schema, and the agent skills system. Use portless local endpoint https://api.localhost/graphql for dev.

Guide for creating effective skills for Apollo GraphQL and GraphQL development in this agentPlayground repo. Use this skill when: (1) creating a new skill (e.g., for GraphQL, AntD UI, portless, Turborepo tasks), (2) updating existing skills like the custom update-graphql or the Apollo ones, (3) learning best practices for SKILL.md in .grok/skills/ or portable in agents/skills/. Follow the structure used in this monorepo: rich frontmatter for Grok, references to specific files (apps/api/src/graphql/, staff/public, packages/, portless), coordination with other skills, and portable .md versions.

Add or modify GraphQL types, queries, mutations, or resolvers in the shared backend (apps/api) and update the consuming UIs (staff/public) if needed. Use when changing the API contract between frontend and backend.