openfront-custom-storefront

Plans and builds custom Openfront storefronts against verified GraphQL contracts and access rules.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building a custom storefront on top of an Openfront product is risky: the built-in cart and checkout roots have known ownership, idempotency, and transaction-safety gaps, and schemas differ across verticals like Ecommerce, Restaurant, and Hotel. This Skill guides discovery, contract verification, and safe implementation planning so a custom storefront never fabricates data or bypasses backend authority. ## Core Features & Use Cases - Structured discovery interview: Collects the target product, revision, routes, brand direction, countries, payments, and test hosts before proposing any plan. - Schema-first contract verification: Exports or introspects the target GraphQL schema, builds a capability matrix, and requires negative access tests (cross-customer, wrong-cart, expired-session) before enabling features. - Safety gating for cart and checkout: Documents the canonical Ecommerce blocker register (sudo-based cart reads, unbound payment sessions, non-atomic completion) and blocks external checkout until the host is repaired. - Use Case: A developer wants an independently deployed Next.js storefront for an Openfront Ecommerce host. The Skill walks them through schema pinning, a BFF with httpOnly cookies, named GraphQL operations with codegen, runtime JSON validation, and a phased rollout starting with a read-only catalog. ## Quick Start Ask the assistant to help plan a custom storefront for your Openfront product and answer its discovery questions about your repository, target routes, and test environment.

Frequently Asked Questions about openfront-custom-storefront

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

FAQPage Schema
How do I build a custom storefront for an Openfront product?

Start by exporting or introspecting the target product's GraphQL schema, then validate anonymous catalog reads and run negative access tests before building pages. Use named operations with code generation, a same-origin BFF with httpOnly cookies, and implement routes in phases starting with a read-only catalog.

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

Adapting the built-in storefront reuses existing routes, modules, and server data layers within the product's repository. A separate client must use only the configured GraphQL endpoint and verified external contracts, never importing Keystone models, Prisma, or backend environment variables.

Can I build an external checkout against the canonical Openfront Ecommerce schema?

Not safely at canonical commit 6662469. The activeCart, updateActiveCart, payment session, and completeActiveCart roots use sudo without caller binding, idempotency, or atomic transactions, so the host must add bounded, ownership-checked commands first.

Does the Ecommerce GraphQL contract apply to Restaurant or Hotel verticals?

No. Each Openfront vertical has its own schema, resolvers, and access rules, so every operation must be derived from the target product's current schema and built-in call sites. Never reuse Ecommerce roots by analogy for another vertical.

Why must cart and order JSON responses be validated at runtime?

Roots like activeCart, getCustomerOrders, and completeActiveCart return the GraphQL JSON scalar, which generated TypeScript types cannot validate. Parse them with Zod or Valibot schemas and fail closed when required IDs, amounts, or ownership evidence are missing.

How should customer sessions and cart credentials be handled in a browser storefront?

Keep session tokens, cart IDs, and guest order secrets server-side or in host-only httpOnly cookies behind task-specific BFF routes. Never store them in localStorage, expose them to browser JavaScript, or put them in analytics, cache tags, or durable URLs.