Engine workup
FitFirst Parts
Fitment-first auto parts. Pick your vehicle once, see only what fits.
What the trinity produced before the build, and what Basano found after. Generalized and pattern-level; no named competitors.
Stage 01
Basano · competitor review
The bar Stage 1 set, generalized to pattern-level.
- 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
The gap to exploit, plus aesthetic register and voice.
- 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
Pages and the skills selected per page.
| Page | Skills selected |
|---|---|
| home |
|
| parts (listing) |
|
| parts/[slug] (detail) |
|
| cart |
|
| about |
|
Stage 04
Basano · verification
What holds, what fails (present and unsparing), what could not be assessed.
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.
Built pages
What the executor built
The pages Tholo planned, written by the executor (Claude Code) to that plan. Tholo did not build; the execute seam is preserved.
- Home
- /
- Fitment selector owns the hero as the dominant above-the-fold element. Two-row header with primary search and persistent fitment context. Category surface band (icon-plus-text, 5 entries). Inverted trust band (confirmed fitment, shipping, returns, honest stock). Featured-parts rail with image, brand, price, and fitment confirmation. Rebuilt to the ecommerce-catalog conventions; the first-run airy hero is gone.
- Parts (listing)
- /parts
- Listing filtered to the active vehicle; client-side search, sort, and category facets; honest empty states.
- Parts (detail)
- /parts/[slug]
- One part with fitment confirmation badge, specs, and an add-to-cart action that puts the item into a real client-side cart.
- Cart
- /cart
- Real client-side cart with quantity controls and a clearly labeled demo checkout modal that processes no payment.
- About
- /about
- What the demo is and is not, plus a five-stage explainer of how the trinity built it.