storefront-best-practices

The `storefront-best-practices` skill provides comprehensive guidance for developing modern ecommerce storefronts across any framework including Next.js, SvelteKit, TanStack Start, React, and Vue. It addresses critical challenges in building online stores, such as implementing checkout flows, shopping carts, product pages, and navigation components, ensuring consistent design and optimal user experience. By leveraging this skill, developers can align with best practices for usability, accessibility, mobile responsiveness, and SEO, while integrating with backends like Medusa seamlessly.

This skill offers a structured approach to designing and implementing storefront components. It includes recommended UI/UX patterns, layout structures, and design consistency strategies. Users are guided to load relevant reference files for specific tasks, such as checkout, product listings, or homepage layouts, to avoid inconsistencies and adhere to brand standards. The skill emphasizes planning workflows that incorporate reference files and patterns, helping developers prevent common mistakes and maintain high-quality ecommerce experiences. It is framework-agnostic and provides decision frameworks, backend integration guidance, and component design best practices.

Targeted primarily at frontend developers, ecommerce engineers, and UI/UX designers, this skill is ideal for those building new storefronts from scratch or improving existing ones. It supports tasks ranging from creating navigation menus and product grids to integrating backend APIs and optimizing SEO and mobile responsiveness. By consistently applying this skill, teams can streamline development, reduce errors, and enhance conversion rates across diverse online shopping environments.