Skill · Vertical site conventions
Vertical site conventions.
Make a storefront look like a storefront, not a generic landing page.
Compose pages and whole sites to the conventions that make a build read as its vertical: ecommerce-catalog storefronts that look like storefronts, hospitality-food sites that look like restaurants, b2b-manufacturer sites that look industrial. The skill owns vertical-level composition (which modules go where, how dense the page is, how much of the offering is surfaced) and routes the rest.
It is the build-side counterpart to a competitor-experience audit. The audit measures the field on seven dimensions; this skill builds to the same seven, so an experience bar maps one-to-one onto what gets built.
Audience: teams building a site in a new vertical, or fixing a build that is technically clean but reads generic because the composition, not the visual taste, is off.
The framework
Build to the seven dimensions, in order.
The framework mirrors the seven dimensions a competitor-experience audit measures, expressed here as build guidance. Run them in order; the seventh catches what the first six miss.
- 01Build the primary task as the dominant, earliest element: give the vertical's core job the largest, earliest treatment in the hero and demote competing CTAs.
- 02Build to the vertical's layout register and density: match the field's content-per-viewport rather than defaulting to a generic airy landing page.
- 03Build the merchandising and category surface the vertical uses: how much of the catalog or offering is surfaced at once, and in what shape.
- 04Build both the know-what-I-want and the browse paths the vertical expects, in the prominence the field gives each.
- 05Build the brand posture consistently across the page: carry the register from the hero into the nav, cards, empty states, and footer.
- 06Build the trust and conversion signals the vertical requires: reviews, certifications, service-area, hours, whatever a credible site in the category carries.
- 07Run the synthesis as a composition checklist: confirm every recurring convention is present, absent for a stated reason, or routed elsewhere.
What it owns
One job: vertical-level composition.
This skill owns vertical-level page and site composition: which modules go where, how dense the page is, how much of the catalog is surfaced, and which navigation paths the site serves. The most common failure it prevents is a technically clean build that defaults to a generic, airy landing page when the vertical wants a denser storefront.
It routes everything else and does not restate those standards. Visual tokens, color, type, and spacing go to design-standards; the aesthetic register goes to creative-direction; site structure and navigation hierarchy go to information-architecture; and component API, states, and accessibility go to frontend-component-build. That routing discipline is what keeps it useful.
It is the build side of a competitor-experience audit. When the audit has run for the vertical, its seven dimensions are the spec and its gaps section names the positioning wedge the build can exploit. When no audit exists, the skill falls back to the per-shape default conventions in the references, though the audit-fed path is the stronger one.
Reference files
The build checklist and the per-shape library.
A per-shape reference library covers the controlled list of site shapes. The ecommerce-catalog shape is filled out first; the others fill in as demos are built.
references/shape-conventions-checklist.md
The per-dimension build checklist applied as a pre-ship review, mirroring the audit's dimension checklist on the build side.
references/shape-ecommerce-catalog.md
Default conventions for the ecommerce-catalog shape (the first filled-out shape; dense storefronts such as auto parts and similar catalogs).
Bridges to other skills
What it routes to, and what feeds it.
Composition is one lane. These are the skills it routes the other decisions to, and the audit that produces its spec.
Produces the spec
competitor-experience-auditMeasures the competitive field on the seven dimensions this skill builds to. Its experience bar is the input; its gaps section names the positioning wedge.
Visual decisions
design-standardsOwns the visual tokens, contrast, spacing, and the day-to-day component calls. This skill decides module count and density, not button radius.
Aesthetic register
creative-directionSets the register and the aesthetic. Composition carries that posture across the page; it does not coin new register names.
Site structure
information-architectureModels the nav tree and URL structure. This skill owns which paths are prominent on the page; that skill owns the structural model behind them.
Implementation
frontend-component-buildImplements the components the composition notes call for, with their states and accessibility. The notes are the spec; the build is the output.
Open source under MIT
Read the SKILL.md on GitHub.
The skill source lives in the rampstackco/claude-skills repository alongside dozens of other skills covering the full lifecycle of brand and product work. This page is a structured overview; the SKILL.md is the source. MIT licensed.
Frequently asked questions.
- What does this skill own?
- Vertical-level page and site composition: which modules go where, how dense the page is, how much of the catalog or offering is surfaced, and which navigation paths the site serves. It deliberately routes everything else: visual tokens to design-standards, the aesthetic register to creative-direction, site structure to information-architecture, and component implementation to frontend-component-build. That routing discipline is what keeps it useful and keeps the catalog from overlapping.
- What are the seven dimensions?
- Build the primary task as the dominant, earliest element; build to the vertical's layout register and density; build the merchandising and category surface the vertical uses; build both the know-what-I-want and the browse paths in the prominence the field gives each; hold the brand posture consistently across the page; build the trust and conversion signals the vertical requires; and run a synthesis composition checklist. They mirror the seven dimensions a competitor-experience audit measures.
- What does it mean for a site to read as its vertical?
- It carries the layout, density, and merchandising conventions a credible site in the category is expected to have. A catalog vertical surfaces more modules above the fold than a marketing page; a hospitality-food site leads with a menu and a reservation entry. The failure this prevents is a build whose SEO, accessibility, and component code are all correct but which reads generic because it defaulted to an airy landing page the vertical does not use.
- How does it use a competitor-experience audit?
- The audit measures the field on seven dimensions; this skill builds to the same seven, dimension by dimension, so the audit's output maps one-to-one onto the build. The audit's primary-task pattern names what to build in dimension one, its density pattern sets dimension two, and so on through the recurring conventions that become the dimension-seven checklist. The audit's gaps section names the positioning wedge the build can exploit. Without an audit, the skill falls back to the per-shape default conventions, but the audit-fed path is stronger.
- What site shapes does it support?
- A controlled list of ten: ecommerce-catalog, inventory-listing, directory-marketplace, local-service-booking, subscription-app, hospitality-food, institution-mission, b2b-manufacturer, ecommerce-standout, and hospitality-experience. The site shape is confirmed first, because building to the wrong shape's conventions produces a build that reads off-vertical, which is the exact failure the skill exists to prevent.
- What is the synthesis check for?
- It catches builds that pass dimensions one through six individually but compose into something off-vertical anyway. Run it as a pre-ship checklist: confirm each recurring convention for the vertical is present, absent for a stated reason, or routed elsewhere. If three or more are absent, the build is off-vertical and the earlier dimensions need rework, not a polish pass. If one or two are absent, name the reason: deliberate positioning, a real constraint, or an oversight to fix before ship.