---
name: website-production
description: "Umbrella for building maintainable marketing, company, local-business, and trades websites with Astro/static stacks, content inventories, design tokens, SEO, performance, and Git-based content workflows."
version: 1.1.0
author: Hermes Agent
license: MIT
metadata:
  hermes:
    tags: [website, astro, marketing, local-business, seo, content, design-system, performance]
---

# Website Production

Use when the user wants a maintainable website rather than a throwaway visual mockup: marketing/company sites, local-business/trades redesigns, landing pages that need real content architecture, SEO, content collections, performance checks, or editable Git-managed content.

## Class workflow

1. Inventory existing content/assets and preserve SEO-critical facts, addresses, services, and proof points.
2. Choose an implementation shape: Astro/static content collections by default; keep heavier frameworks only when there is real app behavior.
3. Build a small design system first: tokens, typography, spacing, components, responsive breakpoints, and motion policy.
4. Implement real pages and content schema, not placeholder-only sections.
5. Verify with actual commands: build, typecheck/lint if available, page rendering/screenshot, link checks, and bundle/performance checks where practical. For mobile navigation or iPhone complaints, use `references/mobile-navigation-vercel-qa.md`: treat mobile nav as a hamburger interaction, verify `aria-expanded`/visibility/pointer-events at an iPhone viewport, and repeat the smoke on the deployed Vercel URL after polling for a deterministic marker. For homepage topic/teaser cards that need functionality and stronger hover affordance, use `references/homepage-topic-card-ux.md`: convert inert cards into semantic links to relevant pages, add visible CTAs, restrained hover/focus animation, reduced-motion handling, and verify all links locally and live. For process/Ablauf sections where the user flags poor readability or static layout, use `references/process-section-ux.md`: prioritize high-contrast practical cards, semantic links per step, visible CTAs/hover/focus affordances, and reduced-motion-safe interaction.
6. Report changed files, verification output, and remaining content gaps.

## Subsections

### Astro marketing/company websites

Use the preserved Astro playbook for content collections, component structure, design tokens, lightweight animation, image optimization, and deployment-safe static output.

### Local business / trades redesigns

Use the preserved local-business playbook for service-area SEO, conversion sections, trust signals, contact flows, opening hours, maps, before/after content migration, and copywriting grounded in the existing business.

For comprehensive redesigns that must preserve verified facts while adding an honest inquiry fallback, responsive drawer/sticky contact flow, asset-provenance discipline, Playwright viewport coverage, Lighthouse gates, sitemap/robots, and Git push verification, follow `references/local-business-conversion-redesign-qa.md`.

For read-only customer-perspective audits of regional trades sites, follow `references/regional-trades-readonly-ux-conversion-audit.md`: freeze the commit baseline, exercise desktop and real mobile viewports, measure fixed-bar occlusion and page length, verify actual inquiry transport and photo/share fallbacks, cross-check trust claims against project-specific evidence, and report Blocker/High/Medium findings without touching concurrent edits.

For lightweight branded logo intros, edge-safe drawing-to-real hero interactions, deterministic mobile image registration, client-routed intro replay, legacy reference/image migration with provenance, and container/title alignment fixes, follow `references/performant-brand-motion-and-hero-comparison.md`: prefer CSS transforms and logo alpha masks over unnecessary WebGL runtimes, bind pointer tracking to the full hero, use continuous non-blocking scroll morphs on mobile, preserve verified source mappings, and verify local plus deployed behavior.

## Preserved source packages

Full source packages, including references and templates, were copied under `references/absorbed-packages/astro-marketing-websites/` and `references/absorbed-packages/local-business-website-redesign/` before archiving the old skills.