gatsby

Gatsby legacy framework skill covering GraphQL data layer, source plugins, image optimization, and migration paths. Use when maintaining or migrating Gatsby sites.

Jump to install

Repository: skeletorflet/opencode-supreme-setup
Last source activity: May 15, 2026 at 01:09
Detected SKILL.md language: English
Stars: 47
Forks: 2

Install options

The review-first prompt is selected by default. You can switch to a direct command or download a local copy.

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

A direct command skips the review prompt. Inspect the source before running it.

npx skills add https://github.com/skeletorflet/opencode-supreme-setup --skill gatsby

The command stays on one line. Scroll horizontally to inspect it before copying.

Prefer a local copy? Download the files currently available to SkillsMP.

Review the source files

Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.

SKILL.md

Source instructions · Read-only preview

Back to search Back to installation

8-bit-orbit-video-template

Hyperframes-based video template for retro pixel deck motion design. Use when users want a high-fidelity, multi-scene HTML-to-video composition with advanced transitions, interactive preview controls, and ready-to-render default style.

2026-05-19

ad-creative

Generate and iterate ad creative including headlines, descriptions, and primary text. Useful for paid social and search ad iteration.

2026-05-19

agent-browser

Browser automation CLI for AI agents. Use when the user needs to inspect, test, or automate browser behavior: navigating pages, filling forms, clicking buttons, taking screenshots, extracting page data, testing web apps, dogfooding Open Design previews, QA, bug hunts, or reviewing app quality. Prefer local Open Design preview URLs unless the user explicitly asks for external browsing.

2026-05-19

View all from this repository

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

gatsby

Source facts

Install options

Review the source files

More from this repository

More from this repository

gatsby

Core Concepts

Queries & Pages

Best Practices

Common Code Patterns

gatsby

Core Concepts

Queries & Pages

Best Practices

Common Code Patterns