openfront-uikit-custom-storefront

Plans and builds custom Openfront UIKit storefronts by inspecting source code and GraphQL contracts.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Customizing an Openfront UIKit storefront without understanding the actual source architecture leads to broken checkout flows, unauthorized GraphQL calls, and duplicated backend logic. This Skill guides a structured process of source orientation, user interviews, and contract inspection before any code changes. ## Core Features & Use Cases - Source Architecture Orientation: Maps where behavior lives across features/storefront, app/** routes, Keystone models, and schema.graphql before proposing changes. - Structured Requirements Interview: Asks targeted questions about checkout revision, built-in versus separate client mode, customer journeys, and deployment constraints. - Capability Matrix & Contract Validation: Traces data loaders, GraphQL operations, access rules, and provider adapters to classify each feature as verified, presentation-only, backend-blocked, or absent. - Use Case: A team wants to rebrand the kit catalog and checkout experience. The Skill inspects the actual routes and named operations, identifies which changes are presentation-only versus requiring new backend mutations, and produces a safe implementation plan. ## Quick Start Ask the assistant to plan a custom storefront for the Openfront UIKit product by first inspecting the current source checkout and GraphQL schema.

Frequently Asked Questions about openfront-uikit-custom-storefront

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

FAQPage Schema
How do I customize an Openfront UIKit storefront safely?

Start by inspecting the actual source: enumerate app routes, trace screen components and their data loaders, and read schema.graphql with model access rules. Then classify each change as presentation-only or backend-contract work before implementing anything.

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 never expose an arbitrary GraphQL proxy.

What source files define the Openfront storefront behavior?

The behavioral reference lives in features/storefront for screens, loaders, and sessions, with thin route entries in app/**. The server contract is defined in features/keystone/models, access.ts, mutations, and schema.graphql.

Can I reuse Ecommerce GraphQL operations in this storefront?

No, not without validation. The Skill explicitly forbids borrowing Ecommerce roots or renaming products and orders into this vertical; every operation must be verified to exist and be authorized in this product's schema.

What happens when a required backend operation does not exist?

The Skill requires one bounded server projection or command validating actor, scope, ownership, state transition, and idempotency for consequential actions. If it does not exist, you request the backend contract and show the feature as unavailable.