graphql-development — Claude Code skill: GraphQL rules
A skill that gives the agent GraphQL guidelines: schema design, type-safe clients, React and Next.js integration. Useful when it writes resolvers and queries.
npx skills add Mindrally/skills --skill graphql-development -a claude-codeWhat graphql-development does
The skill sets boundaries for how the agent handles GraphQL work. It covers schema design: PascalCase type names, camelCase fields, input types for mutations, enums for fixed value sets, interfaces and union types for polymorphic returns. Pagination by cursor or offset gets its own section, along with connection patterns between types.
Query performance is handled through fetching only required fields, fragments, DataLoader batching and avoiding N+1 in resolvers. Among clients it names Genql for generating TypeScript types from the schema, Apollo Client with cache policies and optimistic updates, and urql with document caching and exchanges. React gets hooks for queries and mutations; Next.js gets Server Components for initial data and hydration patterns.
Separate blocks cover errors, security and testing: structured errors from resolvers, query depth limiting, complexity analysis, field-level authorization, schema validation in CI/CD. Everything here is prose. The skill changes how the agent reasons about your codebase rather than running anything itself, so on a project without GraphQL it does nothing for you.
What it helps with
- design a schema with consistent type and field naming
- kill N+1 queries with DataLoader in resolvers
- set Apollo Client cache policies for a specific screen
- wire Next.js Server Components to a GraphQL query
- cap query depth and complexity on incoming requests
Example prompts for the agent
- Design a GraphQL schema for orders: types, mutation input types, an enum for statuses
- Find why resolvers produce N+1 queries and fix it with DataLoader
- Configure Apollo Client cache policies and an optimistic update after a mutation
How to install graphql-development
1Skills CLI (Vercel)
npx skills add Mindrally/skills --skill graphql-development -a claude-code2Manually: put the files in place
~/.claude/skills/graphql-development/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/graphql-development/
1Skills CLI (Vercel)
npx skills add Mindrally/skills --skill graphql-development -a codex2Manually: put the files in place
.agents/skills/graphql-development/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add Mindrally/skills --skill graphql-development -a cursor2Manually: put the files in place
.cursor/skills/graphql-development/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install Mindrally/skills graphql-development2Manually: put the files in place
.github/skills/graphql-development/SKILL.md1Skills CLI (Vercel)
npx skills add Mindrally/skills --skill graphql-development -a gemini-cli2Platform CLI
gemini skills install https://github.com/Mindrally/skills --path graphql-developmentManually: put the files in place
.devin/skills/graphql-development/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add Mindrally/skills --skill graphql-development -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about graphql-development
How do I install graphql-development in Claude?
Run npx skills add Mindrally/skills --skill graphql-development -a claude-code. The skill file lands at ~/.claude/skills/graphql-development/SKILL.md.
What does graphql-development do?
It hands the agent GraphQL development guidelines: schema design, query optimization, type-safe clients, and React and Next.js integration patterns.
Does the skill add code or dependencies to my project?
No. It is written guidance only, so it shapes how the agent writes resolvers and queries without installing or running anything.
Source text
SKILL.md · Apache-2.0
--- name: graphql-development description: GraphQL development guidelines with type-safe clients, schema design, and integration with React and Next.js. metadata: maintainer: Mindrally source: https://github.com/Mindrally/skills --- # GraphQL Development You are an expert in GraphQL development with type-safe clients and modern web frameworks. ## Core Principles - Design schemas with clear, consistent naming - Use type-safe clients for all GraphQL operations - Optimize queries to fetch only necessary data - Implement proper error handling ## Schema Design ### Types and Fields - Use descriptive type names in PascalCase - Field names in camelCase - Use nullable types appropriately - Implement input types for mutations - Use enums for fixed value sets ### Relationships - Define clear connection patterns - Implement pagination with cursor-based or offset patterns - Use interfaces for shared fields - Implement union types for polymorphic returns ## Query Optimization - Fetch only required fields - Use fragments for reusable field selections - Implement DataLoader for batching - Avoid N+1 queries with proper resolvers ## Type-Safe Clients ### Genql - Generate TypeScript types from schema - Use type-safe query builders - Leverage IDE autocompletion ### Apollo Client - Configure cache policies properly - Use reactive variables for local state - Implement optimistic updates - Handle loading and error states ### urql - Use document caching effectively - Implement exchanges for customization - Handle subscriptions properly ## Integration Patterns ### React - Use hooks for queries and mutations - Handle loading and error states in components - Implement proper cache updates ### Next.js - Use Server Components for initial data - Implement proper hydration patterns - Handle auth in GraphQL context ## Error Handling - Define clear error types in schema - Return structured errors from resolvers - Handle errors gracefully in clients - Log errors appropriately ## Security - Implement query depth limiting - Use query complexity analysis - Validate and sanitize inputs - Implement proper authentication - Use field-level authorization ## Testing - Test resolvers independently - Mock GraphQL responses in client tests - Use schema validation in CI/CD - Test error scenarios
© Mindrally · Apache-2.0 · Mindrally/skills