openfront-grocery-custom-storefront

Plan and build custom Openfront Grocery storefronts by inspecting source architecture and GraphQL contracts.

27|5|Updated Aug 10, 2022
One-click install
npx skills add https://github.com/openshiporg/docs --skill openfront-grocery-custom-storefront-openshiporg
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: openfront-grocery-custom-storefront
Source: https://github.com/openshiporg/docs/tree/main/public/skills/openfront-grocery-custom-storefront
Command: npx skills add https://github.com/openshiporg/docs --skill openfront-grocery-custom-storefront-openshiporg

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Customizing a grocery storefront without understanding the existing codebase leads to broken flows, unsafe backend calls, and mismatched schemas. This Skill guides you through inspecting the actual Openfront Grocery source, interviewing stakeholders, and safely adapting the built-in storefront or building a separate client. ## Core Features & Use Cases - Source-Grounded Planning: Explains where behavior lives in features/storefront, app/** routes, Keystone models, and schema.graphql before any code changes. - Structured Interview & Capability Matrix: Asks targeted questions about goals and constraints, then produces a capability matrix classifying each feature as verified, presentation-only, needs backend contract, blocked, or absent. - Safe Client Architecture: Distinguishes adapting the built-in client from building a separate client with pinned schemas, named operations, and server-side credential handling. - Use Case: A team wants to rebrand and restructure their grocery storefront's checkout and pickup flows. The Skill inspects the real routes, GraphQL operations, and access rules, then identifies which changes are presentation-only versus which require new backend mutations. ## Quick Start Ask the assistant to plan a custom Openfront Grocery storefront by inspecting the current source and interviewing you about the desired changes.

Frequently Asked Questions about openfront-grocery-custom-storefront

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I customize the Openfront Grocery storefront?

Start by inspecting the actual source: routes in `app/**`, screens and data loaders in `features/storefront`, and the contract in `schema.graphql` and Keystone models. Then decide whether to adapt the built-in client or build a separate one, and classify each change as presentation-only or backend work.

Should I adapt the built-in storefront or build a separate client?

Adapt the built-in client when you can reuse existing sessions, transport, design tokens, and named server operations. Build a separate client when you need independent deployment, but pin the schema, use checked named operations, and keep privileged credentials server-side behind a BFF.

Can I reuse Ecommerce GraphQL operations in the Grocery storefront?

No, not without validation. The Grocery vertical has its own workflow nouns and authority boundaries, so you must verify that each operation exists in this product's schema.graphql and is authorized before using it.

What is a capability matrix in storefront planning?

A capability matrix classifies each requested feature as verified, presentation-only, needs backend contract, blocked, or absent. It is produced after tracing routes, data loaders, GraphQL operations, and access rules, and prevents claiming a flow works based only on a schema or HTTP 200.

Why should a separate client avoid exposing a GraphQL proxy?

An arbitrary GraphQL proxy lets browsers select fields, operations, relationships, or provider IDs, which bypasses authorization boundaries. Instead, use a trusted pinned endpoint with checked named operations and keep privileged credentials server-side.