skilld
All skills
medusajs avatar

/storefront-best-practices

@f08f937 official
by Medusamedusajs/medusa-agent-skills225 stars
29

ALWAYS use this skill when working on ecommerce storefronts, online stores, shopping sites. Use for ANY storefront component including checkout pages, cart, payment flows, product pages, product listings, navigation, homepage, or ANY page/component in a storefront. CRITICAL for adding checkout, implementing cart, integrating Medusa backend, or building any ecommerce functionality. Framework-agnostic (Next.js, SvelteKit, TanStack Start, React, Vue). Provides patterns, decision frameworks, backend integration guidance.

Ask your Agent

Use this Skill: https://skilld.dev/gh/medusajs/medusa-agent-skills/storefront-best-practices

This session only. Nothing lands on disk.

referencecomponentsfooter.md

≈942 tokens on demand. Your agent reads this file only when SKILL.md points to it.

Footer Component

Contents

Overview

Footer provides supplementary navigation, company info, and trust signals. Appears on every page.

Assumed knowledge: AI agents know how to build multi-column layouts and navigation lists. This guide focuses on ecommerce footer patterns.

Key Requirements

  • Navigation links (categories, pages)
  • Dynamic category fetching from backend
  • Legal links (Privacy, Terms)
  • Newsletter signup
  • Payment method badges
  • Social media links
  • Responsive (multi-column desktop, single-column mobile)

Essential Footer Elements

Must-Have Content

Required:

  • Navigation links (categories from backend)
  • Contact information (email, phone)
  • Legal links (Privacy Policy, Terms of Service)
  • Copyright notice with current year

Strongly recommended:

  • Newsletter signup form
  • Payment method badges
  • Social media links
  • Trust signals

Multi-Column Layout (Desktop)

Standard pattern: 4-5 columns

  • Column 1: Shop/Categories (dynamic from backend)
  • Column 2: Customer Service (Contact, FAQ, Shipping)
  • Column 3: Company (About, Careers)
  • Column 4: Newsletter signup
  • Bottom: Legal links, payment badges, copyright

Dynamic Category Links (Ecommerce-Specific)

CRITICAL: Fetch categories from backend dynamically - never hardcode. Fetch from ecommerce backend API (for Medusa: sdk.store.category.list()).

Benefits:

  • Stays in sync with main navigation
  • Categories added/removed automatically
  • No manual footer updates

Guidelines:

  • Show top-level categories only (5-8 max)
  • Match labels from main navigation
  • Cache category data (rarely changes)

Newsletter Signup

Essential elements:

  • Email input + submit button ("Subscribe")
  • Value proposition (CRITICAL): State clear benefit ("Get 10% off your first order", "Exclusive deals + early access"). Don't just say "Subscribe to newsletter".
  • Privacy note: "We respect your privacy" + link to privacy policy

Layout: Input + button inline (desktop), stacked (mobile). Full width on mobile.

Payment and Trust Badges

Payment method icons: Display accepted payments (Visa, Mastercard, PayPal, Apple Pay, Google Pay). 40-50px icons, horizontal row, bottom of footer.

Trust badges (optional): Max 3-4 legitimate certifications (SSL, BBB, money-back guarantee). Only use real badges with verification links.

Mobile Footer

Single column, stacked: Logo → Navigation → Newsletter → Social → Legal/copyright.

Collapsible sections (optional): Accordion pattern for navigation to reduce height. Keep newsletter/social always visible.

Touch-friendly: 44px minimum links, 8-12px spacing, 14-16px text, 48px newsletter input height.

Checklist

Essential features:

  • Navigation links (categories, pages)
  • Categories fetched dynamically from backend
  • Contact information (email, phone)
  • Legal links (Privacy Policy, Terms of Service)
  • Copyright notice with current year
  • Newsletter signup form with value proposition
  • Payment method icons
  • Social media links
  • Responsive (4-5 columns desktop, single-column mobile)
  • Mobile: 44px touch targets
  • Mobile: Collapsible sections (optional)
  • Semantic HTML (<footer>, <nav> sections)
  • ARIA labels on navigation ("Footer navigation")
  • Keyboard accessible
  • Visible focus indicators
  • Color contrast 4.5:1 minimum
  • Consistent across all pages

Source: SKILL.md on GitHub

Third-party checks

1 warning16d5 checks · Risk SAFE
  • Gen Agent Trust Hub16d

    This skill consists entirely of comprehensive reference documentation and design patterns for building ecommerce storefronts with a focus on Medusa backend integration. It contains no executable scripts, code, or security risks.

  • Socket16d

    No alerts

  • Snyk16d

    Risk: LOW · No issues

  • Runlayer7mo

    25/28 files flagged

  • ZeroLeaks5mo

    Score: 93/100 · 2 sections analyzed

Provenance

Signed by skilld at f08f937. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub 2 days ago.

Activeupdated 8 months ago

README badge

README badge for medusajs/medusa-agent-skills/storefront-best-practices