frontic

Build headless storefronts against the Commercetools API using the official TypeScript SDK (@commercetools/platform-sdk + @commercetools/ts-client). Use when working with Commercetools cart operations (create/update carts, line items, discount codes, shipping/billing addresses), checkout flow (order creation from cart, payment handling, shipping method selection), and customer account features (signup, login, profile management, addresses, password reset, email verification). Covers the stateful/write side of the API with full type safety, optimistic concurrency (versioned updates), SDK client builder patterns, and BFF security hardening (session signing, query injection prevention, input validation, rate limiting) — not product data fetching (use Frontic for that). Also use to audit existing Commercetools implementations for security pitfalls.

Build headless storefronts against the Shopify Storefront API (GraphQL). Use when working with Shopify cart mutations (create, add/update/remove lines, discount codes, gift cards), checkout flow (hosted checkout via checkoutUrl), and customer account operations (registration, login/logout via access tokens, profile management, addresses, password recovery, order history). Covers the stateful/write side of the Storefront API — not product data fetching (use Frontic for that).

Build headless storefronts against the Shopware 6 Store API (6.6+). Use when working with Shopware session/context management (sw-context-token), cart operations (add/update/remove line items, promotions), checkout flow (order creation, payment handling with sync/async redirects), and customer account features (registration, login, addresses, password recovery, order history, wishlists). Covers the stateful/write side of the Store API — not product data fetching (use Frontic for that).

Integrate with the Xentral ERP REST API for managing sales orders, products/articles, inventory/stock levels, customers, addresses, invoices, delivery notes, credit notes, purchase orders, and warehouses. Use when building ERP integrations that need to create or sync orders, manage product catalogs, track stock across warehouses/storage locations, or maintain customer records. Covers API versions V1, V2, and V3.

Create, configure, and use Frontic blocks, listings, and pages for e-commerce data. Use when working with Frontic configuration, building product/category pages, creating data sources, or integrating the Frontic client. Covers resource decision-making, block/listing creation guidelines, and client usage patterns.

Plan, capture, audit, and improve screenshots in a Mintlify docs repo using the mintlify-shots kit. The repo uses a custom <Screenshot> directive backed by Playwright tests that produce light+dark PNG pairs and rewrite <Frame> blocks via `pnpm shots`. Use this skill any time the user wants to: add a screenshot to a docs page, find places in a section that would benefit from a visual, review/resize/recapture an existing shot, or debug a flaky, empty, or wrongly-sized capture. Trigger even when the user doesn't say 'screenshot' — phrases like 'this needs a visual here', 'the image is too big', 'capture the dialog', 'find missing shots in <section>', 'recapture the playground', 'the dark version is broken', 'the dialog gets clipped before it animates' all qualify.