building-storefronts

The `building-storefronts` skill is designed to streamline the development of storefronts using Medusa, providing a comprehensive set of best practices and guidelines for frontend integration. It addresses common challenges developers face when interacting with Medusa APIs, integrating the SDK, managing data fetching patterns with React Query, and ensuring proper error handling. By following this skill, developers can avoid typical pitfalls such as incorrect API request formats, missing headers, and improper state management, thereby accelerating storefront implementation and maintaining consistency across projects.

Key features of this skill include detailed guidance on SDK usage, ensuring that developers always use the Medusa JS SDK for API requests and avoid direct fetch calls that could omit critical headers. It provides React Query patterns for effective data fetching and mutations, including hierarchical query keys, handling loading and error states, and invalidating caches after mutations. The skill also emphasizes critical data display rules, such as correctly formatting prices, and error handling strategies that include optimistic updates with rollback mechanisms. These features are prioritized with clear categorization to highlight critical, high, and medium-impact rules.

This skill is particularly useful for frontend developers working on Medusa storefronts who need to implement reliable and maintainable features. It is suitable for all stages of development, including planning, research, implementation, and exploration. Typical use cases include calling custom API routes, integrating the SDK into frontend applications, implementing data fetching and mutation patterns with React Query, and ensuring proper error handling and UX consistency. By applying this skill, teams can ensure a robust storefront experience while adhering to Medusa's best practices and conventions.