ariessolutionsio/commercetools-frontend
skills/commercetools-frontend/SKILL.md
Production-tested patterns for commercetools storefronts — Next.js, React, PDP/PLP, cart, checkout, SEO, and performance from a Platinum partner with 50+ live implementations.
$ install --global
skillsauthnpx skillsauth add ariessolutionsio/composable-skills commercetools-frontendInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: May 15, 2026, 3:22 AM156.3s11 files scanned
SKILL.md
- name:
- commercetools-frontend
- description:
- Production-tested patterns for commercetools storefronts — Next.js, React, PDP/PLP, cart, checkout, SEO, and performance from a Platinum partner with 50+ live implementations.
commercetools Frontend & Storefront Development
Two Development Paths
This skill covers two distinct approaches to building storefronts on commercetools:
| Approach | When to Use | Key File | |----------|-------------|----------| | commercetools Frontend (hosted) | Using Studio for business users, extensions, components (tastics), data sources | references/ct-frontend-extensions.md | | Headless with Next.js/React | Custom storefront with full control, App Router, Server Components | references/storefront-architecture.md | | B2B Storefront | Business units, permissions, approval workflows, quotes, purchase lists | references/b2b-frontend.md |
Both approaches share patterns for product pages, cart/checkout UI, and performance/SEO. B2B patterns layer on top of either approach.
How to Use This Skill
- Identify which approach you are using (commercetools Frontend or headless Next.js)
- Load the relevant architecture file first
- Then load the page-type-specific reference for your current task
- Reference files contain correct/incorrect code pairs, checklists, and pitfall warnings
Progressive loading -- only load what you need:
- Using commercetools Frontend extensions, data sources, actions? Load
references/ct-frontend-extensions.md - Using commercetools Frontend components, Studio, renderer? Load
references/ct-frontend-components.md - Building a headless Next.js storefront? Load
references/storefront-architecture.md - Building product listing pages (PLP, filtering, pagination)? Load
references/product-listing-pages.md - Building product detail pages (PDP, variants, product cards)? Load
references/product-detail-pages.md - Building cart UI? Load
references/cart-ui.md - Building checkout flows? Load
references/checkout-ui.md - Optimizing frontend performance (images, LCP, code splitting)? Load
references/frontend-performance.md - Optimizing SEO (structured data, meta tags, sitemap)? Load
references/frontend-seo.md - Building a B2B storefront (business units, quotes, approvals)? Load
references/b2b-frontend.md
CRITICAL Priority
| Pattern | File | Impact | |---------|------|--------| | Data fetching strategy (SSR vs SSG vs ISR) | references/storefront-architecture.md | Wrong strategy causes stale prices, slow pages, or API quota exhaustion | | Cart state management & optimistic updates | references/cart-ui.md | Race conditions cause quantity bugs, lost items, broken checkout | | Extension timeout limits (8s max) | references/ct-frontend-extensions.md | Slow extensions fail silently, breaking pages for all users | | Image optimization & LCP | references/frontend-performance.md | Unoptimized product images destroy Core Web Vitals scores | | B2B permission-gated UI | references/b2b-frontend.md | Missing permission checks expose admin actions to unauthorized users |
HIGH Priority
| Pattern | File | Impact | |---------|------|--------| | Server Components for product data | references/storefront-architecture.md | Client-side fetching leaks API credentials and doubles load time | | PLP pagination & filtering | references/product-listing-pages.md | N+1 queries on listing pages cause 3-10s load times | | Checkout flow & payment integration | references/checkout-ui.md | Missing error states cause silent payment failures | | Component schema design (tastics) | references/ct-frontend-components.md | Bad schemas make components unusable for business users in Studio | | SEO structured data for products | references/frontend-seo.md | Missing structured data means no rich results in Google | | Locale routing & currency formatting | references/storefront-architecture.md | Wrong i18n setup breaks prices, URLs, and search indexing | | B2B quote lifecycle & approval flows | references/b2b-frontend.md | Quote cart consumption and approval rejection side effects break B2B checkout |
MEDIUM Priority
| Pattern | File | Impact | |---------|------|--------| | Product variant selection UI | references/product-detail-pages.md | Confusing variant selectors reduce conversion | | Faceted search UI patterns | references/product-listing-pages.md | Slow or broken filters frustrate shoppers | | commercetools Checkout integration | references/checkout-ui.md | Misconfigured Checkout SDK blocks payment completion | | Code splitting & bundle size | references/frontend-performance.md | Oversized bundles increase Time to Interactive | | Data source extension patterns | references/ct-frontend-extensions.md | Redundant API calls from multiple components on a page | | Studio page management & publishing | references/ct-frontend-components.md | Wrong page folder structure breaks dynamic routing | | B2B business unit & store scoping | references/b2b-frontend.md | Missing BU/store context causes cross-tenant data leaks | | B2B purchase lists & quick order | references/b2b-frontend.md | Wrong Wishlist API mapping breaks purchase list CRUD |
Common Frontend Anti-Patterns (Quick Reference)
| Anti-Pattern | File | Consequence |
|-------------|------|-------------|
| Fetching product data client-side | references/storefront-architecture.md | Exposes API credentials, no SSR benefits, poor SEO |
| Using getServerSideProps for static catalog pages | references/storefront-architecture.md | Every page visit hits the API, wastes quota, slow TTFB |
| Not implementing optimistic cart updates | references/cart-ui.md | UI freezes on every add-to-cart, feels broken |
| Loading all product images at full resolution | references/frontend-performance.md | 5-10MB page weight, failed Core Web Vitals |
| Fetching all product attributes when you need 3 | references/product-detail-pages.md | 5-10x response payload, slower rendering |
| Building search from scratch instead of using Product Search API | references/product-listing-pages.md | Poor relevance, no faceting, slow queries |
| Missing error boundaries around commerce data | references/storefront-architecture.md | One failed API call crashes the entire page |
| Hardcoding locale/currency instead of using routing | references/storefront-architecture.md | Broken multi-market support, wrong prices |
MCP Complement
Use this skill for storefront patterns, then use the Developer MCP to look up field names and schemas, and the Commerce MCP for CRUD operations.
Related Skills
ariessolutionsio/marketplacer
tools
VerifiedTrustedCommunity
Operator-side patterns for integrating Marketplacer into a composable commerce stack — GraphQL Operator API, per-seller order splits via Invoices, caller-shaped webhooks with HMAC, MPay deposit-and-reconcile payouts, Golden Product PIM sync, wholesale orders, additional charges, and Catalog Rules. Use when implementing or maintaining a Marketplacer marketplace behind any commerce platform (commercetools, Kibo, Scayle, etc.), any search engine, any PIM, OMS, or ERP. Triggers on Marketplacer, marketplace, multi-vendor, multi-seller, Advert, Seller, Invoice, Golden Product, MPay, Airwallex, Hyperwallet, Xero, RefundRequest, RemittanceAdvice, Remittance, Taxon, Prototype, Catalog Rule, marketplace commission, marketplace fees, marketplace operator, marketplace webhooks, paymentReferences. Consult this skill before writing code that talks to a Marketplacer instance, defines a Marketplacer webhook, or maps Marketplacer data into another system.
1SKILL.mdUpdated May 15, 2026
ariessolutionsio/kibo-subscriptions
tools
VerifiedTrustedCommunity
Use for Kibo Subscription Commerce work — implementing recurring billing, configuring plans (evergreen, fixed-term, subscribe-and-save), managing subscriptions (pause, skip, swap, cancel), setting up dunning / retry for failed payments, handling cycles and continuity orders, building customer self-service portals, and understanding the Subscription-to-Order relationship. Triggers on Kibo Subscription, Kibo Subscription Commerce, subscriptionCreate, subscriptionUpdate, subscription cycle, subscription pause / skip / swap, subscription dunning, recurring billing Kibo, evergreen subscription, fixed-term subscription, subscribe and save, continuity order, payment recycling, subscription churn, subscription retention. Invoke for any Kibo Subscription question — API integration, implementation, configuration, debugging, or projecting subscription state into reporting/ERP.
1SKILL.mdUpdated May 15, 2026
ariessolutionsio/kibo-oms
development
VerifiedTrustedCommunity
Use for Kibo Order Management (OMS) implementation — design order routing strategies (DC-to-store fallback, location-based), implement fulfillment workflows (BOPIS, curbside pickup, ship-from-store), build RMA and returns processing, integrate inventory APIs with WMS (Refresh vs Adjust semantics), set up standalone-OMS behind Shopify / SFCC / custom storefronts, or import orders from external platforms. Triggers on Kibo OMS, Kibo Order Management, Kibo fulfillment, order routing, BOPIS, ship-from-store, fulfiller, fulfillment task, RMA, Kibo returns, Kibo inventory location, Kibo dropship, Kibo carrier, agentic order routing, standalone OMS. Covers routing rules, allocation logic, carrier integration, location capabilities, and the OMS-behind-non-Kibo-storefront pattern.
1SKILL.mdUpdated May 15, 2026
ariessolutionsio/kibo-ecommerce
tools
VerifiedTrustedCommunity
Build, debug, and integrate Kibo Commerce eCommerce features — implement checkout/cart/catalog flows, troubleshoot cart and promotion issues, develop B2B portals, write API Extensions (Arc.js), configure Event Subscriptions, or connect to external PIMs/OMS/search. Covers OAuth, `x-vol-tenant`/`x-vol-site`/`x-vol-master-catalog` headers, tenant/site/catalog hierarchy, `@kibocommerce/rest-sdk`, REST vs GraphQL selection. Triggers on Kibo, Kibo Commerce, KiboCommerce, KiboSoftware, x-vol-tenant, x-vol-site, MasterCatalog, Kibo cart/checkout/catalog/storefront/B2B/promotions, API Extensions, Arc.js, Event Subscription, @kibocommerce/rest-sdk. Use whenever working with Kibo's commerce platform — implementing new features, debugging existing code, or integrating external systems.
1SKILL.mdUpdated May 15, 2026