Web Developer, Complete System Plan

A publishing and page-building system for 7 websites. Takes content from the Content Studio and turns it into live pages. Content Studio → Web Developer → Live Pages.

What This Is

The Web Developer is a publishing and page-building system for Dave Hajdu's websites. It takes content, from the Content Studio or from direct conversation, and turns it into live pages on any of Dave's 7 websites. Each site has a different tech stack, design system, and publishing process. The Web Developer knows how to build for all of them.

It's the second half of a two-part pipeline:

Content Studio (/studio) produces the content: blog.md, social.md, seo.md, page.md, images.md / card.png.

Web Developer (/publish, /build) builds and deploys: blog post (HTML, JSX, JSON), meta tags, schema, sitemap, web page (any layout), optimized WebP images. Social is posted manually by Dave.

Architecture

Three-Layer Pattern (Same as Content Studio)

Both systems share the same foundational architecture: data, logic, and workflow.

Data (context files). Content Studio: voice, audience, channel rules per brand. Web Developer: tech stack, templates, components, design tokens per site.

Logic (instructions). Content Studio CLAUDE.md: workflow rules, editorial lenses. Web Developer CLAUDE.md: build rules, deploy rules, git discipline.

Workflow (skills). Content Studio: /studio, /onboard. Web Developer: /publish, /build.

Folder Structure

The web-developer/ root contains CLAUDE.md (router: sites, references, rules) and a context/ folder with workflow.md (publishing workflow for blog), workflow-diagram.html (visual diagram, AIO style), and plan.md (this file). Alongside are per-site context folders:

caio-coach/context/ (Static HTML): site-config, blog-architecture, template-reference.html, component-patterns, nav-index, style-guide, page-patterns (planned), forms (planned).

aio-website/context/ (Next.js 16): site-config done, page-patterns and forms planned.

davehajdu/context/ (Next.js 16, JSON blog): site-config done.

edge8/context/ (Static HTML): site-config done.

fab-four/context/ (Next.js 15, not built yet): site-config done.

mahjong-tarot/context/ (Next.js 14, JSX): site-config done.

bhutan/context/ (empty shell): site-config done.

Skills

Skills live under ~/.claude/skills/:

studio/SKILL.md → /studio (produce content)

onboard/SKILL.md → /onboard (set up new clients)

publish/SKILL.md → /publish (publish blog posts)

build/SKILL.md → /build (create any page) NEW

The 7 Sites

caio-coach

Tech: Static HTML. Blog format: standalone .html files in blog/posts/. Status: Fully wired.

aio-website

Tech: Next.js 16, Supabase. Blog format: static HTML in /public/. Status: Site config done.

davehajdu

Tech: Next.js 16. Blog format: JSON data plus structured blocks in posts-data.ts. Status: Site config done.

edge8

Tech: Static HTML. Blog format: standalone .html files in public/post/. Status: Site config done.

fab-four

Tech: Next.js 15 (planned). Blog format: MDX files (planned). Status: Scaffold only.

mahjong-tarot

Tech: Next.js 14 (Pages Router). Blog format: JSX components in pages/blog/posts/. Status: Site config done.

bhutan

Tech: TBD. Blog format: TBD. Status: Empty shell.

Skill 1: /publish (Blog Publishing)

Purpose

Takes an approved blog post from the Content Studio and publishes it to a website. Same steps every time. No creative decisions, it's a machine.

Workflow: 4 Phases, 9 Steps

Phase 1

Gather

Locate content: find blog.md and seo.md in content-studio/{project}/content/{slug}/
Read and parse: extract title, body, meta tags, schema, hero image

Phase 2

Build

Optimize image: WebP (Pillow or sips), max 1200px, under 200KB
Build page: construct full page using site's template, components, and design tokens

Phase 3

Index

Update blog listing: insert new post card at top of blog index
Update navigation chain: add to nav-index.md, update prev/next links
Patch previous post: add "next" link pointing to new post
Update sitemap: add new URL to sitemap.xml

Phase 4

Ship

Git commit and deploy: stage explicit files, commit with blog: publish "{title}", run deploy command

Phase 2 build includes: document head (meta, OG, Twitter Card, JSON-LD from seo.md); site navigation with correct relative paths; hero/header with breadcrumb, category, title; post meta (date, reading time, category); article content (markdown → site-specific HTML/JSX components); internal links (3 to 4) and external links (1 to 2), 5 total per post; FAQ section (from seo.md structured data); related reads (2 recent posts from nav-index); CTA section; prev/next navigation; footer.

Site-Specific Variations

Blog format. Static HTML (CAIO Coach, Edge8): .html file. Next.js JSON (Dave Hajdu): JSON entry plus blocks. Next.js JSX (Mahjong Tarot): .jsx component.

Image location. Static HTML: blog/images/. Next.js JSON: public/images/. Next.js JSX: public/images/blog/.

Index update. Static HTML: insert <article> in HTML. Next.js JSON: add to JSON array. Next.js JSX: add to POSTS array in JSX.

Deploy. Static HTML: bash push.sh. Next.js JSON: git push to Vercel. Next.js JSX: git push to GitHub Pages.

/publish Status

Skill built, ~/.claude/skills/publish/SKILL.md
Tested, published Day 8 blog post to CAIO Coach
CAIO Coach fully wired, template, components, nav-index, style guide
Remaining sites need deeper context (template extraction, component mapping)

Skill 2: /build (Page Creation), Planned

Purpose

Create any page on any website. Landing pages, product pages, info pages, form pages. More flexible than /publish: every page is different, requires conversation and creative decisions.

/publish is a machine: same inputs, same steps, every time. /build is creative: different layouts, different components, needs more conversation.

Content Sources

12.From the Content Studio. If a page.md exists in the studio, read it.

13.Direct conversation. Dave describes what the page should contain, /build creates it.

14.Hybrid. Dave gives the idea, /build develops the content and builds it in one pass.

Workflow: 5 Phases, 14 Steps

Phase 1

Scope

Which site? Read site-config.md
What page? Landing, info, product, form, custom
Content source? Studio, direct, or hybrid

Phase 2

Content

Gather or develop content. If from studio, read page.md. If direct, ask Dave what goes on the page: sections, messaging, CTAs, images
Confirm structure: section-by-section outline before building

Phase 3

Build

Select layout: read site's page-patterns.md, pick layout pattern
Build page: use site's design system, components, conventions
Forms: if the page has a form, read site's forms.md for backend, spam protection, validation, confirmation UX
SEO: meta tags, OG, structured data

Phase 4

Review and Ship

Present for review, iterate
Approval gate: explicit confirmation before deploying
Place file: save to correct location per site architecture
Update navigation: add to site nav if it's a core page
Git commit and deploy

Per-Site Context Needed for /build

Each site needs these additional context files:

page-patterns.md. Layout patterns available on this site (hero plus sections, sidebar, full-width, card grid, etc.). Different sites have different layouts.

forms.md. Form backends, spam protection, validation, confirmation UX. Forms have specific security and UX concerns.

component-library.md. All reusable components (heroes, CTAs, cards, stats, testimonials, etc.). Build pages from existing pieces.

Form Handling with Spam Protection

Every form built by /build includes spam protection by default.

Static HTML sites (CAIO Coach, Edge8)

Honeypot field (hidden input, bots fill it, humans don't). Time-based check (reject submissions faster than 3 seconds). Server-side validation if endpoint available.

Next.js sites (AIO, Dave Hajdu, Mahjong Tarot)

Honeypot field. Server action or API route for processing. Rate limiting middleware. Turnstile/reCAPTCHA if high-traffic form.

Per-Site Form Backend Options

caio-coach. Static: webhook or Supabase Edge Function. Email: TBD.

aio-website. Supabase plus Resend. Email: Resend.

davehajdu. Supabase. Email: TBD.

edge8. Static: webhook. Email: TBD.

fab-four. ConvertKit/Beehiiv (planned). Email: ConvertKit.

mahjong-tarot. Supabase. Email: TBD.

bhutan. Backend: TBD. Email: TBD.

Example: /build in Action

"3 Core Skills of an AI Officer" page on AIO Website. Dave runs /build aio-website, /build reads site-config.md and page-patterns.md, asks clarifying questions, presents a section outline (hero, three skill sections, CTA), Dave confirms, /build creates the HTML page using the AIO design system, places it at /public/three-core-skills.html, updates navigation, commits and deploys.

/build Status

Not yet built
Needs: page-patterns.md, forms.md, and component-library.md per site
Needs: /build skill file
Needs: content studio update to support "page" content type

Content Studio Updates Needed

The Content Studio currently supports two content types: blog and social. To support /build, it needs a third: page content.

Current Content Types

Blog. Entry: idea → develop → style → outline → Shipper lens → draft → iterate → approve → SEO → deliverables → images. Output: blog.md, seo.md, social.md, images.md.

Social. Entry: idea → channels → draft → iterate → save. Output: social.md.

New Content Type: Page

Page. Entry: idea → define sections → outline → Shipper lens → draft → iterate → approve → SEO. Output: page.md, seo.md.

Page Workflow

29.Intake. What page is this? What's the goal?

30.Section planning. What sections does the page need? (hero, features, testimonials, CTA, FAQ, etc.)

31.Outline. Section-by-section structure with key messaging per section.

32.Shipper lens. Does every section earn its place? Is the page doing too much?

33.Draft. Write page.md with all section content.

34.Iterate. Revise until approved.

35.SEO. Meta, OG, structured data.

36.Handoff. Content is ready for /build to turn into a live page.

Note

Not all pages need the content studio. Simple structural pages (contact, pricing calculator) can go straight to /build. The studio is for content-heavy pages where the writing matters.

Updated Entry Point

/studio asks: What are you making? Blog (blog workflow, unchanged), Social (social workflow, unchanged), or Page (page workflow, new). Then: which project?

Implementation Order

Foundation (Complete)

1.Web developer folder structure

2.CLAUDE.md router

3.Workflow.md (blog publishing)

4.Workflow diagram (AIO style, white background)

5./publish skill

6.CAIO Coach full context (site-config, blog-architecture, template, components, nav-index, style-guide)

7.Site configs for all 7 sites

8.Tested: published Day 8 blog to CAIO Coach, deployed live

Deeper Context for Remaining Sites

1.Extract template-reference.html for aio-website, davehajdu, edge8, mahjong-tarot

2.Write component-patterns.md for each

3.Write blog-architecture.md for each

4.Populate nav-index.md for each

5.Write style-guide.md for each (or pointer to existing)

/build Skill

1.Write page-patterns.md per site (catalog existing layout patterns)

2.Write forms.md per site (backends, spam protection)

3.Write component-library.md per site (all reusable components)

4.Build /build skill (~/.claude/skills/build/SKILL.md)

5.Update web developer CLAUDE.md and workflow

Content Studio, Page Content Type

1.Update content studio workflow.md to add page content type

2.Update /studio skill to include page option at entry point

3.Update content studio CLAUDE.md

Testing

1.Test /build with a real page (e.g. "3 Core Skills" on AIO website)

2.Test /build with a form page

3.Test full pipeline: /studio (page content) → /build (create page) → deploy

Summary: Four Skills, One Pipeline

/studio. Produce content (blog, social, page). Use when you need to write something.

/onboard. Set up a new client's content studio. Use when adding a new brand.

/publish. Publish a blog post to a website. Use when a blog is approved and ready.

/build. Create any page on any website. Use when you need a new page (with or without studio content).

The Pattern Across Everything

Data equals context files (voice, audience, tech stack, templates).

Logic equals instructions (CLAUDE.md, workflow rules, editorial lenses).

Workflow equals skills (slash commands that chain the process).

Three foundational concepts. Built once, used everywhere.

← Previous

Web Developer, Visual Workflow

EO Global, System Architecture