Gatsby legacy framework skill covering GraphQL data layer, source plugins, image optimization, and migration paths. Use when maintaining or migrating Gatsby sites.
Installs into .claude/skills of the current project.
Are you the author of Gatsby?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/skeletorflet-gatsby)
---
name: gatsby
description: Gatsby legacy framework skill covering GraphQL data layer, source plugins, image optimization, and migration paths. Use when maintaining or migrating Gatsby sites.
---
## gatsby
Static site generator with React. GraphQL data layer unifies all content sources at build time.
### Core Concepts
- GraphQL data layer: pull from any source, query at build time, shape per page
- Source plugins: gatsby-source-filesystem for local, gatsby-source-wordpress for CMS
- createPages API: gatsby-node.js programmatic page generation from queried nodes
- Schema customization: define types explicitly for content meshing across sources
### Queries & Pages
- Page queries in page components only, useStaticQuery in non-page components
- File system routes: src/pages/ for automatic route creation like Next.js pages/
- Template pages: createPages with template component and query context variables
- gatsby-plugin-image: StaticImage and GatsbyImage for optimized responsive images
### Best Practices
- useStaticQuery for shared data like site metadata, nav, and footer
- Prefer gatsby-plugin-image over raw img tags for automatic format/size optimization
- Keep gatsby-node.js lean, delegate logic to separate helper modules
- For new projects, choose Next.js or Astro instead of Gatsby
### Common Code Patterns
- createPages loops over GraphQL results, calls createPage per node with slug context
- StaticQuery hook in layout component for site title and SEO defaults
