Loading catalog...

Loading parts catalog. Please wait.
RampStack

Built by the RampStack trinity

How FitFirst Parts was built

The four-stage workup behind this ecommerce catalog demo, summarized. Generalized and pattern-level; no named competitors. The full Format A spec and the verification log live in the operated-side run record.

Stage 01

Basano · competitor review

  • Primary-task prominence is the field-wide miss. The fitment selector, the visitor's actual primary job, is treated as a secondary widget on every audited storefront: small, low-prominence, often unlabeled, often in a sidebar or behind a modal. Rendered prominence scores measured below 1% of viewport area on the most-visited leaders. A storefront that makes fitment the dominant above-the-fold element owns the position the field leaves on the table.
  • Layout register reads catalog-dense, not marketing-airy, across the leaders. Above the fold the field carries a dense alphabetical or brand-grid surface, sometimes 100+ entries, treated as the page's primary navigation. The register is a working-surface storefront, not a SaaS-style landing page; a build defaulting to the airy hero-and-three-cards pattern reads off-vertical immediately.
  • Merchandising surfaces are persistent, not modal. Featured collections, promotional bands, and deal-of-the-week strips appear above or near the top fold across the field as fixtures; the leaders that bury merchandising in a dismissible welcome modal forfeit the storefront-density convention.
  • Trust signals appear as a chrome-level fixture, not a one-off marketing flourish. Reviews, guarantees, fitment confirmation, and shipping promises are visible to a first-time visitor without scroll; absent persistent trust signals, even sites with strong inventory read provisional.
  • Navigation paths are dual: the field expects both a known-part path (search input, primary in the header) and a browse path (by category, by brand, by vehicle). Sites that offer only one read as half-finished; sites that bury the vehicle-selector funnel under a brand grid surface the fitment problem the audit names.
  • Structured data is the field-wide miss on the technical axis. Most catalog homepages ship no JSON-LD at all, or ship Organization without Product, Offer, BreadcrumbList. Rich-result eligibility is forfeited.
  • Accessibility on functional iconography is brittle across the field: empty alt on link images, JS onclick handlers on images without keyboard equivalents, layout tables used for the header. Honest accessibility defects, not edge cases.

Stage 02

Krine · positioning

Position
Fitment-first storefront. Every page leads with the vehicle selector as the dominant element; parts of unknown fit are never shown.
Archetype
edge-devtools
Voice
Direct, technical, honest, plain, unsparing

Stage 03

Tholo · build plan

home

  • vertical-site-conventions
  • competitor-experience-audit
  • information-architecture
  • frontend-component-build
  • design-standards
  • seo-technical

parts (listing)

  • vertical-site-conventions
  • programmatic-seo
  • information-architecture
  • frontend-component-build

parts/[slug] (detail)

  • frontend-component-build
  • seo-technical
  • programmatic-seo

cart

  • frontend-component-build
  • information-architecture

about

  • landing-page-copy
  • frontend-component-build

Stage 04

Basano · verification

Holds(13)

  • Convention 1 - Persistent header with logo, search, cart, and account: all visible above the fold at 1280x800.
  • Convention 2 (density-bearing) - Fitment selector as primary above-fold action: the dominant above-fold element with a year/make/model dropdown and 'Show parts that fit' CTA. Fitment-first promise held.
  • Convention 3 - Promotional / announcement bar: dark strip below the header carries 'This week - Seasonal brake-and-fluid maintenance picks | Free shipping over $50' above the fold.
  • Convention 4 - Category browse grid with imagery: 5-tile grid with photographic category tiles (Brakes, Filters, Ignition, Fluids, Belts and hoses), visible below the fitment section at 1280x800.
  • Convention 5 - Common parts / featured-rail merchandising block: 'Common maintenance parts' heading present with the 4-SKU rail showing image, brand, price, and fitment confirmation badge per card.
  • Convention 6 - Heading hierarchy: exactly one H1, then H2 / H3 in correct sequence with no skipped levels.
  • Convention 7 - Image alt coverage: 9 of 9 images carry alt text.
  • Convention 8 - Skip-link and landmark structure: skip-to-content link, header, nav with aria-label, main with id=main-content, aside with aria-label all present.
  • Convention 9 (density-bearing) - Catalog scope and density signal above the fold: the announcement bar exposes the parts-count badge ('6 fitment-confirmed parts / 5 categories') directly above the fold as a chrome-level fixture. Demo-honest about scope; the signal is visible immediately.
  • Convention 10 (density-bearing) - Promotional / deal surface near the top: held by the same announcement strip's 'This week' label and seasonal promo callout.
  • Working client-side cart, real interaction throughout, demo-only checkout modal clearly labeled. Cart count surfaces via a screen-reader-only label in the header link.
  • Title tag and meta description within the conventional length window. JSON-LD CreativeWork, Organization, and WebSite types present.
  • Robots meta noindex/nofollow recognized as intentional for the demo, not a defect.

Fails(6)

  • Button contrast - Fork A sampler artefact (flagged at high). The rendered-capture sampler reports two buttons as white-on-white at 1:1 ratio; the model honestly notes the rendered screenshot shows white text on dark buttons and the sampler measurement is wrong. PR #6 fixed the tsx serialization and one class-styled case but a residual edge case remains; the contrast is fine in reality.
  • H1 keyword relevance: 'Tell us what you drive' is a UX prompt rather than a keyword-bearing headline. Stronger for the primary task; weaker for topical relevance. Judgment item, surfaced for human.
  • Structured data type appropriateness: schema uses CreativeWork rather than AutoPartsStore or Store. For a parts storefront a commerce-oriented schema type would match better; the demo's record is a worked-example artifact, so CreativeWork is defensible.
  • Primary above-fold candidate prominence: the layout engine identifies the showcase meta-layer's 'How this was built' overlay pill (0.69% prominence) as the most prominent above-fold button rather than the fitment CTA. The meta-layer is intercepting the prominence measurement; the fitment CTA visually dominates the actual layout. Worth surfacing as a meta-layer prominence consideration, not a build defect.
  • Duplicate fitment-explanation copy in the hero left column and inside the fitment card. Small redundancy worth trimming in a polish pass.
  • Intentional noindex and nofollow (correct for the demo, flagged against a production-ready standard; the model marks this as not-a-defect-in-context).

Not assessable(5)

  • Reflow at 320 CSS px (WCAG 1.4.10). Viewport capture is at 1280x800; narrow-viewport evidence requires a second capture run.
  • Content depth beyond the visible HTML excerpt. The model sees a partial rendered DOM; lower-page modules are partial.
  • Per-product review counts. The home does not surface reviews on the featured rail; whether reviews live on the detail pages is not visible from the home audit alone.
  • Body-text contrast. The rendered sampler covers only buttons and class-styled CTAs; body text contrast is not sampled.
  • Motion / animation prefers-reduced-motion compliance and runtime form-error patterns; both require runtime evidence the static-plus-screenshot capture does not carry.
See the full workupAll business demos