vertical-site-conventions

Files (13)

• SKILL.md
• _claude-frontmatter-extras.yaml · references/
• shape-b2b-manufacturer.md · references/
• shape-conventions-checklist.md · references/
• shape-directory-marketplace.md · references/
• shape-ecommerce-catalog.md · references/
• shape-ecommerce-standout.md · references/
• shape-hospitality-experience.md · references/
• shape-hospitality-food.md · references/
• shape-institution-mission.md · references/
• shape-inventory-listing.md · references/
• shape-local-service-booking.md · references/
• shape-subscription-app.md · references/

SKILL.md (first lines)

# Vertical Site Conventions

Compose pages and whole sites to the layout, density, and merchandising conventions that make a build read as a credible member of its vertical. Stack-agnostic. Works on any framework that can express server-rendered pages and component composition.

This skill owns vertical-level composition: which modules go where, how dense the page is, how much of the catalog or offering is surfaced, and which paths the navigation serves. It routes the day-to-day visual decisions to `design-standards`, the aesthetic register to `creative-direction`, the site-structure modeling to `information-architecture`, and the component implementation to `frontend-component-build`. It does not duplicate any of them; it composes their outputs into a vertical-correct site.

It is the build-side counterpart to `competitor-experience-audit`. The audit measures the field on seven dimensions; this skill builds to those same seven, dimension by dimension. The two are deliberately structured as two sides of one standard so an experience bar produced by the audit maps one-to-one onto what this skill builds.

---

## When to use

- Building a new site in a vertical you have not built in before
- Fixing a build that reads as generic or off-vertical even though it is technically clean (the SEO, accessibility, and component implementation are correct, but the page does not read like its category)
- Building to an experience bar produced by `competitor-experience-audit` (the audit-fed path is the intended use)
- Adding the merchandising, density, and navigation conventions a site in this category is expected to carry
- Building a showcase or demo where the build must read as its vertical, not as a generic SaaS landing page

## When NOT to use

- Day-to-day visual decisions on a known build (use `design-standards`)
- Defining the brand register or aesthetic from scratch (use `creative-direction`, `brand-archetype-system`, `brand-discovery`)
- Building one component well (use `frontend-component-build`)
- Modeling site structure and navigation hierarchy from scratch (use `information-architecture`)
- Building a formal design system or token system (use `design-system`)
- Auditing the competitive field for what conventions exist (use `competitor-experience-audit`; this skill consumes that audit's output, it does not produce it)

---

## Required inputs

- The site shape the build is for, from the controlled list: `ecommerce-catalog`, `inventory-listing`, `directory-marketplace`, `local-service-booking`, `subscription-app`, `hospitality-food`, `institution-mission`, `b2b-manufacturer`, `ecommerce-standout`, `hospitality-experience`.
- An experience bar from `competitor-experience-audit` (the cross-site patterns and gaps for the vertical). If absent, the skill falls back to the per-shape default conventions in the references; the audit-fed path is stronger and is the intended use.
- The brand register and aesthetic decisions (from `creative-direction` or already settled). This skill does not redefine them.
- The framework or technical context the build will use (the skill is stack-agnostic but the consumer needs to know).

If the site shape is unclear, ask. Building to the wrong shape's conventions produces a build that reads off-vertical, which is the exact failure this skill exists to prevent.

---

## The framework: build to the seven dimensions

The framework mirrors the seven dimensions `competitor-experience-audit` measures. Each is expressed here as build guidance (what to do) rather than audit questions (what to observe). Run them in order; the synthesis in dimension 7 is the composition checklist that catches what the earlier six missed.

### 1. Build the primary task as the dominant, earliest element

The visitor arrives with a primary job. The leaders in the vertical lead with that job; off-vertical builds bury it behind marketing copy or competing CTAs.

- Identify the vertical's primary task from the experience bar or the per-shape reference. (Ecommerce-catalog: a fitment, search, or category-entry interaction. Hospitality-food: a menu or reservation entry. Inventory-listing: a search-and-filter. Local-service-booking: a "book now" or service-picker.)
- Give that task the largest, earliest interactive treatment in the hero.
- Demote competing CTAs. The hero gets one primary action; secondary actions live below the fold or in the chrome.
- Reach the core task without scrolling on the device class the vertical's visitors use.
- For commercial pages, sticky a compact version of the primary task to the chrome so it stays reachable on scroll.

If the primary task cannot be the hero (a constraint from a stakeholder, a regulated vertical), surface the closest equivalent and document the compromise. Do not silently push the primary task below the fold.

### 2. Build to the vertical's layout register and density

Most off-vertical builds default to a generic SaaS-airy landing page. Retail and catalog verticals are denser; editorial verticals are calmer; hospitality is image-led. Build to the field's density, not to a default.

- Identify the register from the experience bar or the per-shape reference (storefront-dense, editorial-calm, marketing-airy, image-led).
- Match the field's content-per-viewport: a catalog vertical surfaces more modules above the fold than a SaaS landing page.
- Choose the module count above the fold deliberately. State the count in the build notes.
- Route the actual color, type, and aesthetic choice to `creative-direction` and `design-standards`. This skill owns the density and module-count decision, not the visual register itself.

Composition decision lives here. Visual register lives there. Do not redefine either; route to the right skill.

### 3. Build the merchandising and category surface the vertical uses

How much of the catalog or offering is surfaced at once, and in what shape, is a per-vertical decision the build must own.

- Surface the catalog the way the vertical does: how many category, collection, or entry-point modules appear before scroll.
- Signal depth the way the vertical signals it: mega-menu hover, grid of category cards, faceted-search side rail, breadcrumb-driven hierarchy. Pick one and commit; do not stack three.
- Choose flat (one tier visible) or hierarchical (parent plus child categories shown together) per the vertical's convention.
- Use icon / image / text / hybrid category presentation per the vertical.

Cross-reference `information-architecture` for the structural modeling of the nav tree. This skill owns the compositional surface; that skill owns the structural model.

### 4. Build both the know-what-I-want and the browse path the vertical expects

Verticals differ on which path is primary. A catalog vertical needs both search and category browse, with search often primary. A hospitality-food site rarely needs search but always needs a menu and a reservation entry. Build to the paths the field actually offers, in the prominence the field gives them.

- List the paths the experience bar names (by category, by brand, by attribute, by vehicle, by location, by occasion, by audience).
- Score each path as primary, secondary, or absent per the vertical.
- Build the primary paths into the hero or primary nav. Build the secondary paths into the chrome or below the fold. Drop the paths the field does not use.
- Search input prominence is a per-vertical decision: header-primary, secondary in a side rail, or absent. Match the field.

Route the structural nav modeling to `information-architecture`; route the search UX patterns to that skill or to the project's existing search component. This skill owns which paths exist and how prominent each is.

### 5. Build the brand posture consistently across the page

The brand register is set by `creative-direction` and `brand-archetype-system`. This skill does not redefine it. But composition decides whether the posture holds across the page or only in the hero.

- Carry the brand register from the hero into the nav, the cards, the empty states, the trust signals, and the footer. A premium-utilitarian register that disappears below the hero is a composition failure, not a brand failure.
- Apply the voice consistently in headings, microcopy, CTAs, and empty states. Do not let the empty states default to generic copy.
- Hold the imagery posture across the page: a vertical that uses studio product photography in the hero does not switch to abstract illustration in the trust section.

Route the actual register choice and the voice attributes to `creative-direction` and `brand-voice`. Own the consistency requirement here.

### 6. Build the trust and conversion signals the vertical requires

Each vertical has a different set of trust signals it is expected to carry. A build that ships without them reads as not-yet-credible. Build them in.

- Identify the required signals from the experience bar or the per-shape reference. (Ecommerce-catalog: reviews, guarantees, pricing transparency, stock signals, fitment confirmation, shipping promises. Hospitality-food: hours, location, reservation availability, menu price range. B2b-manufacturer: certifications, customer logos, spec sheets. Local-service-booking: licensing, insurance, service-area, response time.)
- Surface them where the field surfaces them. Reviews near the buying action; service-area in the hero; certifications in the chrome.
- Honor the functional-vs-demo line for showcase builds: real where touchable (real reviews if they exist, real cart state), honestly demo where it needs a backend (clearly labeled demo checkout modal, no fake payment).

### 7. Run the synthesis as a composition checklist

The seventh dimension is the synthesis: the specific conventions a credible build in this vertical must have, named explicitly. Run this as a pre-ship checklist before declaring the composition done.

- Pull the conventions from the experience bar's dimension 7, or from the per-shape reference's recurring-conventions section.
- For each, confirm the build does it. Mark each item present, absent, or routed elsewhere (with a link to the routing decision).
- If three or more conventions are absent, the build is off-vertical. Go back to the earlier dimensions; this is not a polish-pass fix.
- If one or two are absent, name the reason: deliberate positioning (the wedge the build is exploiting from the audit's gaps section), constraint (stakeholder, technical), or oversight (fix before ship).

The synthesis is what catches builds that pass dimensions 1 through 6 individually but compose into something off-vertical anyway. Run it.

---

From rampstackco/claude-skills, MIT.

More from rampstackco/claude-skills