From medusa-dev
Load when adding product reviews to a storefront — covers review display, submission form, star ratings, image uploads, feature gate, and pagination. Self-contained skill; does not require building-storefronts.
npx claudepluginhub adaptive-machines/medusa-agent-skills --plugin medusa-devThis skill uses the workspace's default tool permissions.
Guide for adding product reviews to a Medusa storefront. Covers the review API, React components (list, form, star ratings), image uploads, feature gate, and pagination.
Creates isolated Git worktrees for feature branches with prioritized directory selection, gitignore safety checks, auto project setup for Node/Python/Rust/Go, and baseline verification.
Executes implementation plans in current session by dispatching fresh subagents per independent task, with two-stage reviews: spec compliance then code quality.
Dispatches parallel agents to independently tackle 2+ tasks like separate test failures or subsystems without shared state or dependencies.
Guide for adding product reviews to a Medusa storefront. Covers the review API, React components (list, form, star ratings), image uploads, feature gate, and pagination.
Load this skill when:
The quick reference below is NOT sufficient for implementation. You MUST load the reference files before writing code.
Load these references when implementing review features:
references/review-api.md firstreferences/review-api.md firstreferences/review-components.md firstreferences/review-api.md AND references/review-components.md| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | Feature Gate | CRITICAL | gate- |
| 2 | API Integration | HIGH | api- |
| 3 | Component Structure | HIGH | comp- |
| 4 | Image Uploads | MEDIUM | img- |
gate-check-first - ALWAYS check reviews_enabled via global settings before rendering any review componentsgate-silent-disable - Return null (render nothing) if reviews are disabled or settings are loading — never show broken/empty review UIapi-use-send-request - Use the project's sendRequest helper (wraps sdk.client.fetch) for all review API calls — NEVER use raw fetch()api-store-reviews - List reviews: GET /store/reviews?product_id={id}&limit=10&offset=0api-post-review - Submit review: POST /store/reviews with product_id, rating, content, first_name, emailapi-approved-only - Store endpoint returns only approved reviews; no status filtering needed on frontendapi-average-in-response - average_rating and total_count are returned in the list response — no separate endpoint neededcomp-hierarchy - Component tree: ProductReviews (gate) → ReviewList + ReviewForm, ReviewList → ReviewCard (uses StarRating)comp-product-page - Place <ProductReviews productId={product.id} /> on product page after description, before related productscomp-infinite-query - Use useInfiniteQuery for review list pagination (10 per page, "Load more" button)comp-invalidate - Invalidate review queries after successful submissioncomp-query-keys - Add reviews domain to the project's queryKeys utilityimg-upload-first - Upload images to /store/uploads FIRST, then pass returned URLs in the review payloadimg-max-five - Maximum 5 images per reviewimg-use-fetch - Image upload is the ONE exception to the no-fetch rule — use fetch() with FormData and x-publishable-api-key header (SDK cannot handle FormData)Before implementing, verify you're NOT doing these:
Feature Gate:
reviews_enabled before rendering review componentsAPI Integration:
fetch() instead of sendRequest for review API callsComponents:
useQuery with manual offset instead of useInfiniteQuery for paginationImage Uploads:
sendRequest for image uploads (needs FormData, which requires raw fetch())x-publishable-api-key header in upload fetch callFor detailed patterns and examples, load reference files:
references/review-api.md - API endpoints, request/response shapes, TypeScript types
references/review-components.md - React component implementation, query patterns, integration