weaverse/pilot
Reviewed against Rams quality heuristics: accessibility, color, typography, spacing, components, motion, UX, and craft.
30 files reviewed·August 1, 2026
More findings
Verdict
A well-componentized card quietly assumes everything renders in the happy path. The biggest risk is that silent failures and unbounded badge stacks turn a polished layout into a broken one under real data.
Files Rams reviewed
app/routes/pages/regular-page.tsx
app/components/layout/footer/index.tsx
app/components/layout/predictive-search/index.tsx
app/components/product-card/index.tsx
app/components/product-media/index.tsx
app/components/background-image.tsx
app/components/button.tsx
app/components/cart/cart-best-sellers.tsx
app/components/cart/cart-drawer.tsx
app/components/cart/cart-line-item.tsx
app/components/cart/cart-line-qty-adjust.tsx
app/components/cart/cart-main.tsx
app/components/cart/cart-summary-actions.tsx
app/components/cart/cart-summary.tsx
app/components/heading.tsx
app/components/image.tsx
app/components/layout/country-selector/footer-country-selector.tsx
app/components/layout/country-selector/header-country-selector.tsx
app/components/layout/footer/newsletter-form.tsx
app/components/layout/footer/payment-methods.tsx
app/components/layout/footer/social-links.tsx
app/components/layout/header.tsx
app/components/layout/logo.tsx
app/components/layout/menu/desktop-menu.tsx
app/components/layout/menu/dropdown-menu.tsx
app/components/layout/menu/footer-menu.tsx
app/components/layout/menu/mobile-menu.tsx
app/components/layout/predictive-search/popular-keywords.tsx
app/components/layout/predictive-search/predictive-search-result.tsx
app/components/layout/predictive-search/search-form.tsx
Spacing
app/components/product-card/index.tsx:171
Badge stack has no wrap rule and can overflow narrow card columns
The badge container at line 171, `<div className="absolute top-2.5 right-2.5 flex gap-1">`, can host up to five badges simultaneously: BundleBadge, SaleBadge, BestSellerBadge, NewBadge, and SoldOutBadge (lines 172-211). The flex row has no flex-wrap and no max-width constraint, so on narrow product-grid columns the combined badge widths push past the card's right edge.
Why it matters
Badges that overflow the card boundary get clipped or overlap the image edge, which makes sale and best-seller signals, the exact content meant to drive clicks, unreadable on mobile grid layouts.
Fix
Add flex-wrap and a max-width constraint to the badge container so multiple simultaneous badges stack instead of overflowing.
<div className="absolute top-2.5 right-2.5 flex gap-1"><div className="absolute top-2.5 right-2.5 flex flex-wrap justify-end gap-1 max-w-[calc(100%-1.25rem)]">UX
app/components/product-card/index.tsx:239
Failed review fetch shows nothing instead of an error state
The JudgemeStarsRating component at line 239 is rendered with errorText="". When pcardShowReviews is true and the reviews fetch fails, this component has no fallback copy to render, so the star rating slot silently disappears with no indication to the shopper that reviews failed to load.
Why it matters
A blank space where a rating should be reads as 'no reviews' rather than 'reviews unavailable,' which can undercut purchase confidence for products that actually have strong ratings.
Fix
Supply a non-empty errorText fallback so a fetch failure communicates state instead of rendering nothing.
<JudgemeStarsRating
productHandle={product.handle}
ratingText="{{rating}} ({{total_reviews}} reviews)"
errorText=""
/><JudgemeStarsRating
productHandle={product.handle}
ratingText="{{rating}} ({{total_reviews}} reviews)"
errorText="Reviews unavailable"
/>Accessibility
Typography
Color
Components
Motion
Craft
Working well
- aboveTheFold correctly drives loading="eager" vs "lazy" on the primary product image, which is exactly how above-the-fold LCP images should be prioritized, and the eager branch also pairs fetchPriority="high" with sizes="100vw" only when eager, a documented tradeoff that keeps a future refactor from silently regressing image performance.
- Conditionally showing the compare-at price only through VariantPrices/showCompareAtPrice keeps sale pricing visually distinct without bolting on a separate ad-hoc component, which is the right way to reuse a single price primitive across sale and non-sale states.
Scored August 1, 2026 with Rams Engine v0.0.3 · Engine changelog
First scored July 31, 2026: 59/100. This rescore on v0.0.3: 96/100.
This page is an automated design review of weaverse/pilot’s UI code: 30 files read against 291 versioned rules covering accessibility, color, typography, spacing, components, UX, motion, and craft. The score is out of 100; confirmed criticals cap it — one at 59, two at 49, three or more at 39.
More design scores
Score your own repo.
Free on public repos, no account. The same engine that scored this page reads your UI code and mints a score page like this one.
Public repos only. The full engine reviews the UI code and mints a public score page — we email you the link too. Already-scored repos open instantly.
