gatsby

Gatsby React static site generator with GraphQL. Use for static sites.

7 stars

byG1Joshi

View on GitHub Installation ↓

Best use case

gatsby is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

Gatsby React static site generator with GraphQL. Use for static sites.

Teams using gatsby should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

You only need a quick one-off answer and do not need a reusable workflow.
You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/gatsby/SKILL.md --create-dirs "https://raw.githubusercontent.com/G1Joshi/Agent-Skills/main/skills/frameworks/gatsby/SKILL.md"

Manual Installation

Download SKILL.md from GitHub
Place it in .claude/skills/gatsby/SKILL.md inside your project
Restart your AI agent — it will auto-discover the skill

How gatsby Compares

Feature / Agent	gatsby	Standard Approach
Platform Support	Not specified	Limited / Varies
Context Awareness	High	Baseline
Installation Complexity	Unknown	N/A

Frequently Asked Questions

What does this skill do?

Gatsby React static site generator with GraphQL. Use for static sites.

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

# Gatsby

Gatsby v5 focuses on **Valhalla Content Hub** and improved build speeds (Slice API). While Next.js has overtaken it, Gatsby remains strong for complex CMS-driven sites.

## When to Use

- **Data Integration**: You have content in Contentful, Shopify, and WordPress and need to merge it.
- **Static Sites**: Extremely optimized static output (Image optimization).
- **Plugin Ecosystem**: Thousands of "drops-in" plugins.

## Core Concepts

### GraphQL Data Layer

Gatsby pulls all data into a local GraphQL schema.

### Source Plugins

`gatsby-source-filesystem`, `gatsby-source-contentful`.

### React Hydration

Generated HTML rehydrates into a SPA.

## Best Practices (2025)

**Do**:

- **Use Slice API**: Updating a navbar shouldn't rebuild 10,000 pages.
- **Use Gatsby Image**: Unmatched image optimization features.
- **Use Adapters**: For zero-config deployment to Netlify/Vercel.

**Don't**:

- **Don't use for Dynamic Apps**: Use Next.js or Remix for dashboard-style apps.

## References

- [Gatsby Documentation](https://www.gatsbyjs.com/)