AI Blocks › Build websites and web apps
Headless store builder
Describe the store you want. Get a fast custom Shopify storefront built on Hydrogen, with deploy steps.
Headless store builder is a free AI skill for the job "Build websites and web apps". Give the instructions to an AI assistant that supports the required files and tools, then review its output.
Free · No account · MIT licence · Made by dragnoir · Level: expert · Thinking: high
Made by dragnoir. See the original on GitHub; we copied it as it is, with its licence.
What it does
A custom online storefront that loads fast and looks exactly how you want, connected to your Shopify store behind the scenes. Instead of using a theme, you build the front end yourself with React and Shopify's Hydrogen framework, then host it free on Shopify's Oxygen. The skill walks through creating a Hydrogen app, understanding its folders and routes, and setting up environment values like your store domain and Storefront API token. It covers fetching products and collections with GraphQL, using ready-made commerce components for carts and product pages, and deploying to Oxygen. It also covers bringing your own stack. You need Node.js, React knowledge and a Shopify store.
You give it
- A Shopify store and its domain
- Your design idea and page list
- Whether you use JavaScript or TypeScript
- Your Node.js and React setup
- Storefront API token
- Codebase (optional)
You get
- A new Hydrogen project setup
- Pages for home, product and collection
- GraphQL queries for your products
- Deploy steps for Oxygen
Use it when
- A theme limits the design you want for your shop.
- Your store is slow and you want faster page loads.
- You want a custom React front end on top of Shopify.
- You plan to deploy a storefront to Shopify's own hosting.
How to use it
- Add it to your AI once: download it and add the folder to Claude, ChatGPT or Codex as a skill.
- Ask for the job in your own words. Your AI opens the skill when it fits.
- It works best when your AI can run code and open a browser.