Concierge demo

FitFirstParts

No vehicle selected

About this demo

What this is

FitFirst Parts is a scratch concierge demo built by the RampStack engine trinity: Basano critiqued the competitive field, Krine wrote the feature spec, Tholo planned the microsite, and an executor (Claude Code) wrote the code to that plan. The point of the demo is to validate the end-to-end loop on one brand before it scales to more.

The positioning the trinity arrived at is fitment-first. Competitor homepages in the audited field treat fitment as a sidebar widget. We make it the entire navigation, so a part of unknown fit is never surfaced.

What this is not

  • Not a live store. Forms do not submit, payments are not processed, and the catalog is a small fixed set chosen to exercise the fitment logic.
  • Not the public RampStack showcase. The demo lives under a clearly marked scratch path and is not linked from the showcase hub.
  • Not a polished marketing site. The prose is plain on purpose because the trinity is in validation, not in launch.

How the trinity built this

  1. Basano audited four major auto parts ecommerce homepages with a model-backed live audit. The cross-site pattern surfaced as a positioning bar: thin structured data, flat heading hierarchies, accessibility gaps on functional icons, and JS-heavy fitment selectors that bury the most important decision on the page.
  2. Krine took the human-supplied clarify answers (user problem, audience, success metric, why now) and produced a Format A feature spec for a fitment-first storefront. The proposal stayed at the capability level; estimated effort and priority remained human-owned.
  3. Tholo decomposed the build task, asked the substrate to pick verification and build skills per page, and prepared the build dispatch. Tholo stopped at the execute seam; it did not write any files.
  4. Executor (Claude Code) wrote the Next.js code to Tholo's plan and to the selected skills' methodologies. This is the step the engines deliberately do not take on themselves.
  5. Basano (again) audited the built microsite against a best-in-class ecommerce standard, closing the loop. The critic that set the bar is the one that judges whether the build cleared it.

Run log

A full run log lives at progress/concierge-demo-auto-parts.md in the rampstackco-app repo. It captures every stage's output, what was surprising, and where the engines were thin.

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