---
name: health-campaign-builder
description: Build visually appealing, accessible, multilingual health campaign pages and websites targeted at specific populations. Use this skill whenever a public health professional wants to create a health information page, campaign landing page, or multi-page health website for a defined audience — migrants, elderly people, young people, people with low health literacy, vulnerable groups, or any other population. Always use this skill for requests like "create a health page for [group]", "build a campaign website about [topic]", "make a health information site", "design a campaign targeting [population]", "build a multilingual health page", "create an accessible health website", "I need a webpage about [health topic] for [audience]", or any request to produce web-based health communication materials. Don't wait for the user to say "website" or "HTML" — if they want health content for a specific audience and it could live on a page or be shared digitally, use this skill.
---

# Health Campaign Builder

## Purpose

This skill helps public health professionals produce polished, self-contained HTML health information pages and campaign websites — targeted at specific populations, written at the right reading level, in one or more languages, and visually designed to communicate trust, clarity, and action. No design or coding knowledge is required.

## How to use this skill

Work through the questions below ONE AT A TIME. Wait for the user's answer before asking the next. Do not generate any output until the user confirms with "GO" or equivalent. This upfront investment consistently produces much better output than guessing.

---

## STEP 1: Questions (one at a time)

**Q1 — Health topic**
What health issue or campaign is this page about?
(Examples: vaccination uptake, TB screening, mental health awareness, heat safety, sexual health, cervical cancer screening)

**Q2 — Target population**
Who is this page for? Describe the specific group — their age range, background, language(s) spoken, health literacy level, and any cultural context that matters.
(Examples: "Maltese-speaking women aged 40–65", "undocumented migrants in urban areas", "secondary school students aged 14–18", "health workers in primary care")

**Q3 — Key message and call to action**
What is the one most important thing you want your audience to do or know after seeing this page?
(Examples: "Book a free screening at your local clinic", "Call this number if you have symptoms", "Talk to your GP this week")

**Q4 — Languages**
Which languages should the page be available in? If more than one, I'll build in a language switcher. Please list them — if you don't have translations yet, I can draft the content in all requested languages.

**Q5 — Format**
Single page or multi-page website?
- Single page: all content on one scrollable page — best for campaigns, awareness drives, and simple information
- Multi-page: separate sections linked via navigation — better for richer content hubs with multiple topics

**Q6 — Visual theme**
Which style fits this campaign best?
- Warm / community: Friendly, approachable — suited to community outreach and social care
- Calm / supportive: Gentle, reassuring — suited to mental health, bereavement, sensitive topics
- Clinical / trustworthy: Clean, professional — suited to screening programmes, vaccination, medical advice
- Urgent / action: Bold, high contrast — suited to outbreak response, time-sensitive campaigns
- Institutional: Formal and structured — suited to government health authorities and official guidance

**Q7 — Branding**
Does this page need to carry organisational branding? If so, please share:
- Organisation name
- Brand colours (hex codes if known)
- Logo (filename if you have a file you'd like referenced, or I'll use the organisation name as a text logo)

**Q8 — Confirm**
Please review your answers to Q1–Q7. When you're ready to generate, say "GO".

---

## STEP 2: Generate the output

Only after "GO".

### Language and reading level

Match the reading level to the stated population. The goal is that a real person from that group could read this page without effort:

- Low health literacy / general public: Grade 6 reading level or below. Short sentences. Active voice. No jargon. Define any medical term the moment it appears.
- Migrants / refugees: Avoid idioms entirely. Use visuals to reinforce text. Multiple languages. Clearly label each language with its name in that language (e.g. "العربية" not "Arabic").
- Elderly (65+): Patient, reassuring tone. No rushed or urgent framing unless clinically necessary.
- Young people (14–24): Conversational. Peer-framed. Direct, not preachy.
- Health professionals: Clinical language is appropriate. Evidence-based framing. Dense information layout is fine.

For multilingual pages: produce ALL language versions in the same HTML file. Use JavaScript to show/hide content sections by language — no page reload. Do not produce separate files per language. Label the language switcher with names in each language.

**Minority language quality warning:** AI translation quality varies significantly by language. For major languages (French, Spanish, German, Arabic, Italian, Portuguese), output is generally reliable. For minority or regional languages — including Maltese, Welsh, Basque, Catalan, and others with limited training data — translation quality is lower and errors are more likely. When generating content in a minority language, include a visible note on the page recommending that the translation is reviewed by a native speaker before publication. Flag this explicitly to the user as well.

**Maltese specifically:** Maltese uses several characters not found in standard Latin: ħ (h-bar), ġ (g with dot), ċ (c with dot), and ie as a vowel cluster. Use Noto Sans (Google Fonts) rather than Inter or Open Sans — Noto Sans provides full coverage of these characters and renders them correctly. Set the html lang attribute to "mt" for Maltese sections.

### Visual design

Apply the chosen theme consistently. If branding colours are provided, use them in place of theme defaults. The organisation name should appear in the header.

Theme reference:
- Warm / community: background #fdf6f0, primary #c0392b or #d35400, font Lato or Georgia, rounded cards, soft shadows. Use warm reds and burnt orange sparingly as accents — avoid bright orange (#e67e22 or similar) as a dominant colour.
- Calm / supportive: background #f0f7f4 or #f4f4f8, primary #2a9d8f (teal) or #6b8cae (soft blue) or #7a9e7e (sage green), font Lato or Georgia, generous whitespace, soft rounded corners, no sharp contrasts. This theme is for mental health, bereavement, and sensitive topics — do NOT use bright orange, red, or high-contrast urgent palettes. The palette should feel gentle and reassuring.
- Clinical / trustworthy: background #f5f9fc, primary #1a5f7a or #2980b9, font Inter or Open Sans, clean grid
- Urgent / action: white or #1a1a2e background, primary #e74c3c or #f39c12, bold typography, high contrast
- Institutional: white background, primary #2c3e50, font Arial or Helvetica, formal spacing

Accessibility is non-negotiable regardless of theme:
- Minimum 4.5:1 contrast ratio for body text
- Body font size minimum 16px (18px+ for elderly-targeted pages)
- Semantic HTML throughout (main, nav, section, h1–h3, footer)
- lang attribute on html element set to the primary language

### Content structure

Default structure for single-page campaigns:

1. Hero section: Key message in large type + call to action button (prominent, above the fold)
2. Why this matters: 2–3 short reasons the audience should care — written for them, not about the disease
3. What to do: Clear numbered steps — the simpler the better
4. Key facts: 3–5 evidence-based facts, presented accessibly
5. Where to get help: Local services, contact info, or a hotline
6. Footer: Organisation name, last updated date, any required disclaimers

For multi-page: create a simple navigation bar and distribute the above across logical pages (Home, About, What to do, Get help, Contact).

### Technical requirements

- Produce a single self-contained HTML file with all CSS and JS inline
- Google Fonts via CDN is fine; no other external dependencies
- The file must open correctly from the filesystem without a server
- Language switcher must work without page reload
- Mobile-responsive layout (readable on a 375px screen)
- For Maltese content: use Noto Sans (available via Google Fonts CDN) to ensure correct rendering of ħ, ġ, ċ characters

### After generating

Ask: "Would you like to adjust anything — the tone, a specific section, the visual style, or the language content?"

---

## Population reference

| Population | Reading level | Design notes |
|---|---|---|
| Low health literacy | Grade 6 or below | Short sentences, icons alongside text, large font, no acronyms |
| Elderly (65+) | Plain, patient | 18px+ font, high contrast, simple navigation, no auto-playing media |
| Migrants / refugees | Simple, culturally neutral | No idioms, visuals reinforce text, label languages in their own script |
| Young people (14–24) | Conversational | Informal tone fine, mobile-first layout, bold visuals, peer framing. Use Calm/Supportive theme for mental health topics — not Warm/Community. |
| Health professionals | Clinical | Full terminology fine, evidence framing, dense layout acceptable |
| General public | Grade 8 | Clear structure, jargon defined inline, accessible but not patronising |