Website harness.

Vitrus Website Harness gives a coding agent the context, design guidance, and checks to build distinctive websites. It includes a static site compiler, a template library, media tools, and an optional Cloudflare backend for leads, analytics, and owner administration. Each website lives in its own repository.

The package is @tryvitris/website-harness. Bring your own coding agent and Node.js 24 or newer. Generation normally ends with a verified local preview; Cloudflare launch is a separate, explicit step.

Create a website

npx --package @tryvitris/website-harness@0.1.0-beta.8 vitris site create \
  --dir acme --slug acme --name "Acme Shop" \
  --from https://old-site.example --template "Still & Field" \
  --content-file ./acme-notes.md
cd acme
npm install
npx playwright install chromium

Replace the example values with your own. Use --blank instead of --from for a new site. --template accepts a catalog ID, name, or hosted preview URL; --content accepts supplied text directly. Both are optional. See the CLI guide for input and media policies.

Open the site directory in your coding agent and ask it to build the site. It follows the site's AGENTS.md and the prepare → agent/CURRENT.md → work → complete loop until the local preview is ready. To start or resume manually, use npm run go; for a later change, use npm run go -- --change "Describe the change".

To browse templates from a harness checkout, run npm ci, then npm run templates:gallery and open http://127.0.0.1:4390/. The gallery loads the hosted catalog. See the template library guide for creating and publishing templates.

Built-in skills

The harness loads stage-specific instructions from agent/refs/ automatically. These are not installed agent slash commands: describe the work to your agent, and the workflow selects the relevant guidance. The creative workflow also has the following named skills; their prerequisites are included when needed.

Skill	What it does
business-positioning	Ground the offer and distinguishing value in business evidence.
narrative	Organize the visitor journey, questions, and supporting proof.
visual-research	Adapt useful principles from visual references.
art-direction	Turn the central idea into a coherent visual direction.
typography	Establish readable, expressive type hierarchy.
composition	Shape page layout, rhythm, and visual priority.
media-direction	Select authentic imagery and identify media gaps.
copy-layout	Develop page copy and layout together.
purposeful-interaction	Choose interactions that help visitors act or decide.
responsive-design	Preserve hierarchy and usable controls across screen sizes.
visual-critique	Identify consequential visual weaknesses in rendered pages.
visitor-journey	Test whether visitors can complete intended tasks.
motion-direction	Plan useful movement and quiet intervals.
motion-page	Compose motion across each page's journey.
motion-statistics	Present supplied numbers accessibly, with motion where useful.
motion-phrases	Pace text without hiding essential copy.
motion-choreography	Coordinate imagery, captions, and process accents.

For example, ask your agent to “improve the mobile layout,” “review the visitor journey,” or “adapt this template to the business.” The workflow includes additional guidance for template adaptation, copy, accessibility, SEO, browser checks, and launch. See the workflow guide and creative skill registry.

Develop the harness

npm ci
npx playwright install chromium
npm run typecheck
npm test
npm run verify:package

For a local checkout, run npm run build:cli and create a sibling site with --harness file:../vitris-harness. See distribution for package and upgrade details, and official testing for frozen baselines.

More information

• Active-agent quickstart and workflow guide
• Cloudflare setup, contact forms, and credential safety
• Stock and customer media and icon guide
• Evaluation protocol and CLI reference

MIT licensed. Hosted demonstrations and third-party media have their own license records; see NOTICE.