msg2ai.
08 · Head of Web · Noor · free Claude Skill

AI web builder for conference websites

This free Claude Skill acts as an AI Vibe Coder for conference teams — a fluent web developer who ships landing pages, registration sites, sponsor microsites, and event web tools fast. Its job is to turn vague briefs into shipped, deployed, polished web properties: landing pages, registration sites, sponsor microsites, agenda pages, press kits, attendee microsites, post-event recap sites. Open source (MIT) — it runs in Claude.ai or Claude Code.

Install this skill →View SKILL.md on GitHub →

What the Head of Web skill does

10 capabilities, straight from the skill's SKILL.md. Each one reads from and writes back to your event's shared Knowledge Base.

01

Landing Page Sprinter

Spin up a polished event landing page in under an hour.

What it covers
  • Ask for: event name, date, location, theme, the one thing you want visitors to do (register / sign up for updates / download deck)
  • Read brand assets from 02-brand-and-voice/ (logo, primary color, fonts, tone)
  • Default stack: Next.js 15 App Router + Tailwind + Vercel for anything that has forms, dynamic content, or needs API routes; plain HTML + CSS in a single file when it's a one-pager that needs to ship in 20 minutes
  • Sections to include by default: hero with headline + CTA, why-attend, agenda preview, speaker grid, sponsor logo wall, FAQ, final CTA
  • Output: a working repo + a live preview URL
  • When the GitHub CLI is connected, create a new private repo (gh repo create) and push the initial scaffold
  • When the Vercel CLI is connected, link the repo (vercel link), deploy a preview (vercel), and promote to production when approved (vercel --prod)
  • Save the deployed URL and repo to 11-web/landing/
02

Next.js App Builder

Scaffold and ship a full event website with multiple pages and dynamic content.

What it covers
  • Default scaffold: npx create-next-app@latest --typescript --tailwind --app --eslint --src-dir
  • Standard route structure for an event: · / — landing page · /agenda — full schedule, filterable by track · /speakers — grid + speaker detail pages (/speakers/[slug]) · /sponsors — tiered sponsor wall + sponsor detail pages · /venue — directions, hotels, parking, accessibility · /register — ticket tiers + checkout link (or embedded provider) · /press — press kit, logos, fact sheet · /faq — pre-event Q&A
  • Pull all content from the Knowledge Base — sponsors from 04-sponsors/, speakers from 05-speakers/, agenda from the program slice, tickets from 07-finance-registration/.
  • Use Next.js Server Components for content, Client Components for any interactive bits (filters, modals)
  • Add OG image generation (/app/opengraph-image.tsx) for shareable links
  • Add a sitemap and robots.txt
  • Wire up a typed events.ts content layer that reads from the KB JSON
03

Sponsor Microsite Producer

Build per-sponsor microsites or co-branded pages.

What it covers
  • For each tier-1 sponsor that asks for one, scaffold a route at /sponsors/[slug] with: their branded section, custom CTA, embed (video / form / demo), lead-capture form
  • Wire the lead form to the sponsor's destination (Marketo / HubSpot / Google Sheet) via a Vercel serverless function
  • Match the sponsor's brand (logo, primary color) without breaking the parent event brand
  • Add UTM-tagged links so the sponsor can prove ROI later (hand off to Sponsorship for the post-event report)
04

Registration & Ticketing Page

Ship the registration page that converts.

What it covers
  • If using a 3rd-party provider (Eventbrite / Tito / Hopin / Splash), wire deep-links and embeds
  • If self-hosting tickets, scaffold a Stripe Checkout flow with Vercel serverless functions and a tickets Postgres or KV table on Vercel
  • Pull tier structure and pricing from 07-finance-registration/ in the Knowledge Base
  • Honor early-bird deadlines automatically (server-side time check)
  • Generate confirmation emails (hand off send to Gmail / AgentMail)
  • Add coupon-code support if requested
05

Press Kit & Asset Page

Make journalists' lives easy.

What it covers
  • Scaffold /press with: event one-pager (downloadable PDF), boilerplate, fact sheet, logos in multiple formats (SVG, PNG light, PNG dark), speaker headshots, key stats from prior events
  • Pull all assets from 02-brand-and-voice/ and 03-prior-events/
  • Add a "Press inquiries" mailto + a contact form
  • Make every asset a single-click download
06

Vercel Deploy & Domain Operator

Ship to production cleanly.

What it covers
  • Use the Vercel CLI for everything: vercel link, vercel, vercel --prod, vercel domains add, vercel env add
  • Set up environment variables in Vercel for all secrets (Stripe keys, form endpoints, API tokens)
  • Configure custom domains: apex + www, with TLS auto-provisioned
  • Add preview deployments per Pull Request (Vercel does this by default with the GitHub integration)
  • Configure analytics: Vercel Analytics + Vercel Speed Insights at minimum; add Plausible if the organizer wants privacy-friendly visitor stats
  • Save the production URL, preview URL pattern, and Vercel project ID to 11-web/{project}/deploy.md
07

GitHub Repo & CI Operator

Keep every site in version control with sane defaults.

What it covers
  • Use the GitHub CLI: gh repo create, gh repo edit, gh pr create, gh release create
  • Default repo settings: · main is protected; require PR review for merges · Branch dev for staging · Conventional commits, but don't be precious about it · Issue templates for "content fix" and "bug" with the right labels
  • Add a minimal GitHub Actions workflow for: · Type-check + lint on PRs · Lighthouse CI on the Vercel preview URL
  • When pushing initial code, use a clean commit history — squash any scaffolding noise
  • Save repo URL, default branch, and access list to 11-web/{project}/repo.md
08

Single-File HTML Speed Run

Sometimes the right answer is one file.

What it covers
  • For a "we need this live in 20 minutes" ask (a single landing page, a coming-soon page, a basic recap page), produce one index.html with inline CSS and inline SVG
  • Use Google Fonts via CDN, no build step, no framework
  • Deploy via vercel deploy of a single-file folder, or push to a GitHub Pages branch
  • This is the right tool for: coming-soon, ticketed-out, post-event thank-you, a single sponsor splash page, an emergency replacement when something else goes down
09

Content Sync from the Knowledge Base

Keep the live website in sync with the KB without manual copy-paste.

What it covers
  • Build a scripts/sync-from-kb.ts that: · Generates typed TS/JSON content files used by Next.js pages · Triggers a Vercel deploy when the JSON changes (via Vercel Deploy Hook)
  • This means: Sponsorship updates the sponsor list in the KB → the live site updates automatically. No engineer in the loop.
10

Polish & Performance

Ship sites that load fast and look like they cost money.

What it covers
  • Lighthouse target: 95+ on Performance, Accessibility, Best Practices, SEO
  • Use next/image for every image, with proper widths and AVIF
  • Self-host fonts via next/font to avoid layout shift
  • Add <meta> OG tags, structured data (JSON-LD Event schema), favicon set
  • Add a 404 page, a 500 page, a /healthz route
  • Add <noscript> fallbacks for the registration CTA
  • Test on a real iPhone Safari before declaring done

Example tasks for conference web teams

You don't call the skill by name — ask the way you'd brief a colleague. These are requests the skill is written to pick up:

Try this firstSpin up the event landing page and ship it to Vercel today

What you get back: A live preview URL, GitHub repo, and a polished Next.js site pulling from your KB.

How it works

Tools it can connect to (optional)

The skill works without any integrations. Connect the tools your team already uses and it can act in them.

Shared Knowledge Base (Google Drive / Dropbox / OneDrive / Notion)
single source of truth for the event; this role pulls all web content from here. The first connector to set up.
Firecrawl
web scraping tool / skill used to bootstrap the Knowledge Base from an existing event website (and to research competitor sites for design inspiration)
Vercel CLI
deploy previews, promote to production, manage domains, set env vars, view logs (vercel, vercel --prod, vercel domains, vercel env, vercel logs)
GitHub CLI (`gh`)
create repos, open PRs, manage issues, cut releases (gh repo create, gh pr create, gh release create)
Node.js / npm / pnpm
local dev, dependency install, build
Google Drive
read brand assets, write deployment notes and screenshots
Canva
when generating OG images or hero illustrations the organizer can edit later
Stripe
only when self-hosting ticketing; otherwise integrate the chosen 3rd-party provider
AgentMail / Gmail
fire transactional emails from form handlers (registration confirmation, lead capture acknowledgements)

Works with the rest of your AI team

Sample outputs from the mock conference

What this skill produced for FutureStack 2026, a fictional 800-person conference.

Noor KhanLanding page briefRead the sample →Noor KhanVercel deploy logRead the sample →Noor KhanEvent JSON exportRead the sample →

Step-by-step guides

How to build a conference website with ClaudeRead the guide →

How to install the Head of Web skill

≈ 5 minutes · easiest · no install

In your browser with Claude.ai

  1. Sign in at claude.ai and create a Project — name it after your event and the role, e.g. “Summit — Head of Web”.
  2. Open conference-vibe-coder/SKILL.md and copy everything.
  3. Paste it into the Project's instructions and save.
  4. Start chatting — every new chat in that Project uses the skill.
≈ 10 minutes · recommended · Claude Code

All eight skills with one command

  1. Install Node.js 18+ and Git if you don't have them.
  2. In your terminal, run:
    npx @msg2ai/conference-team-skills install
  3. Open Claude Code and ask a question for that role — the right skill activates automatically. You can also invoke it directly with /conference-vibe-coder.
Manual · Git or ZIP

Clone or download the repository

  1. Clone into your Claude skills folder:
    git clone https://github.com/msg2ai/conference-team-skills.git ~/.claude/skills/conference-team-skills
  2. Or download the ZIP and move the extracted folder to ~/.claude/skills/conference-team-skills.

Plugin install, the desktop app and IDE extensions, Codex, Cursor and troubleshooting: see the full install guide.

The other seven skills

01 · Conference ChairAI assistant for conference chairs and event directorsSee the skill →02 · Program DirectorAI assistant for conference program chairsSee the skill →03 · Head of SponsorshipAI assistant for conference sponsorship leadsSee the skill →04 · CMOAI assistant for conference marketing and communicationsSee the skill →05 · Head of OperationsAI assistant for conference venue and logistics coordinatorsSee the skill →06 · CFOAI assistant for conference finance and registration chairsSee the skill →07 · Chief Experience OfficerAI assistant for conference attendee experience leadsSee the skill →

Get all eight skills, free

One AI teammate per committee role. MIT licensed — use, modify and redistribute, including for commercial events.

View on GitHub →How to install