tr-new-site — Build a New Site
Triggers on: “create a new site”, “bootstrap a site for…”, “build a site for [client name]“
What it does
Section titled “What it does”Claude runs through a complete site setup in one session:
- Reads the current site state
- Updates site settings (name, language, fonts, colour palette)
- Creates the header partial (logo + navigation)
- Creates the footer partial (contact info, social links, copyright)
- Creates the homepage (hero + sections)
- Creates inner pages (About, Services, Contact, etc.)
- Gets a preview link for review
- Deploys after your approval
Example prompt
Section titled “Example prompt”Create a site for Björk & Partners — a law firm in Gothenburg.Professional look: dark navy, gold accent, serif headings (Playfair Display),clean sans-serif body (Inter). Pages: Start, Om oss, Tjänster, Kontakt.Swedish. The contact page should have a form.Design conventions Claude follows
Section titled “Design conventions Claude follows”- One
<h1>per page — the page title. Sections use<h2>. - CSS variables for all colours and fonts —
var(--color-primary),var(--font-heading), etc. Never hardcoded hex values in content HTML. - Responsive layout — CSS grid with
auto-fillandminmax(). No fixed pixel widths. - Navigation in the header partial — not duplicated in page bodies.
- Footer in the footer partial — not in page bodies.
The 7 colour tokens
Section titled “The 7 colour tokens”| Token | Purpose |
|---|---|
--color-primary | Main brand colour. Buttons, links, key highlights. |
--color-secondary | Supporting colour. Section backgrounds, cards. |
--color-accent | Pop colour. CTAs, hover states, badges. |
--color-background | Page background (usually near-white or very light). |
--color-surface | Card/panel background — slightly different from background. |
--color-text | Main body text. |
--color-text-light | Muted text: captions, metadata, placeholders. |