Crystal Seeds for Hydrogen: Code Skeletons for Developers

Introduction

Hydrogen is flexible but complex. New developers often reinvent the wheel or fall into anti-patterns. The solution? Crystal Seeds — ready-to-use code skeletons and Copilot prompts that accelerate development while keeping projects inside Shopify’s best practices.

This post shares example skeletons and seed phrases that act as a foundation for Hydrogen builds.

What Are Crystal Seeds?

• 🧩 Code skeletons → reusable building blocks (loaders, queries, middleware).
• 🤖 Copilot prompts → short instruction sets that guide AI coding assistants.
• 🛡️ Guardrails → enforce quotas, caching, and SEO discipline.

Think of them as “developer starter packs” for Hydrogen.

Example Skeletons

1. Route Loader with Streaming

import { defer } from "@shopify/remix-oxygen"; export async function loader({ params, context }) { const product = await context.storefront.query(PRODUCT_QUERY, { variables: { handle: params.handle }, }); const reviewsPromise = fetch(`/api/reviews?product=${params.handle}`); return defer({ product, reviews: reviewsPromise, // stream later }); }

👉 Streams non-critical data (reviews) without blocking PDP render.

2. Firebase Auth + Customer Account Hybrid

import { getAuth } from "firebase/auth"; export async function verifyHybridAuth(req) { const token = req.headers.get("Authorization")?.split(" ")[1]; const firebaseUser = await getAuth().verifyIdToken(token); const shopifyUser = await fetchShopifyCustomer(firebaseUser.email); return { firebaseUser, shopifyUser }; }

👉 Supports Shopify checkout + Google/Apple logins.

3. Subrequest Budget Middleware

export function enforceSubrequestBudget(count) { if (count > 40) throw new Error("Exceeded Oxygen subrequest limit"); }

👉 Keeps routes within Oxygen quotas.

Copilot Crystal Seeds

• “Generate a batched GraphQL query for Shopify product variants.”
• “Write a Remix loader using defer() that streams CMS data after product data.”
• “Scaffold Firebase HTTPS Function with JWT auth + Zod validation.”
• “Create middleware to count subrequests and fail on >40.”
• “Build a Postgres schema for a loyalty points ledger.”

👉 Drop these into .github/copilot-instructions.md for team-wide consistency.

Case Study: Agency Adoption

• Agency onboarded 5 new Hydrogen devs.
• Provided Crystal Seeds repo with loaders, queries, middleware.
• Developers used Copilot prompts for schema design + testing.
• Result: Faster ramp-up, fewer SEO and quota mistakes, happier clients.

Conclusion

Crystal Seeds bring speed and safety to Hydrogen projects. By combining skeleton code with AI-friendly prompts, teams can scale development without sacrificing guardrails.

Don’t start from scratch — seed your Hydrogen builds with proven patterns.