Content-First Web Dev

Date: 2026-03-19

Background

Content-first design forces focusing on what matters most first, And provides a clear separation of concerns like HTML and CSS
For the development of my business websites ts.com and sdc.com using my Astro monorepo, I propose using the following workflow and the content-first design, with the features built in to Obsidian, in simple markdown text, with functioning links to mimic UX.

Upgrade on Content-First Design for Web Dev

by focusing on core/strategic/highest-impact content first (80/20 Reality), in stages 0: define business foundation
- mission, core business model (what, why, for who), Ideal Client Profile, KSFs, USP, SWOT, brand voice guidelines,… 1: Core Content First
- accounting for step 0
- in Obsidian Website Design 2: Core UX
- what few paths should ICP experience to go from stranger -> visitor -> interested prospect -> client -> happy client -> win-win-win referrals/renewals/upgrades
- in Obsidian Website Design
- could link to related and external sites 3: Remaining Content, UX
- in Keystatic 4: Localization, if needed
- /country/language/ content 5: UI
- branding, styling, animations
- in Astro for sites, SvelteKit for apps 6: Review/test
- check alignment of (core) content and UX with objectives
easier to optimize with A/B testing of core content/components?
can link multiple sites, or integrated mini-apps
- ts.com <-> sdc.com
might also work for core functionality of apps/PWAs (with SvelteKit)

Alternate Workflow description

1. Phase 1: Strategy & Flow -> Obsidian The entire site/app structure and 20% core messaging (delivering 80% of the value) is mapped out in an Obsidian vault. Because it’s pure local Markdown, I use local AI (Claude Code / Gemini CLI) to analyze the vault, strategically enhance high-level business objectives, and expand the copy. The [[internal links]] act as a text-based, clickable UX prototype. Obsidian’s Canvas and Graph View provide visual structure as a bonus.

2. Phase 2: Schema Enforcement -> Keystatic The Phase 1 Markdown is pulled into Keystatic (running locally in the monorepo) to flesh out the remaining content, enforcing Astro/Svelte component schemas via MDX without writing raw code.

3. Phase 3: AI Localization -> GitHub Actions Because the source of truth is highly structured English MDX, an automated AI pipeline reads the files, and if needed, translates them into a /country/language/ routing structure. No clunky side-by-side human CMS translation UIs needed.

4. Phase 4: Render -> Astro / SvelteKit Astro and SvelteKit ingest the localized MDX and render the UI.

AI effective at every stage

This stack and workflow allows any AI tool (with agents and Skills) to help with every stage. Especially powerful for tools that operate locally (Claude Code, Gemini CLI, …).
Very efficient for AI context (tokens) since only dealing with text (in AI native markdown) instead of web HTML/CSS/JS.
Very effective for human context limits, focusing on what matters most (80/20).

The result is a workflow where strategy, content, translation, and code are perfectly separated, entirely Git-backed, and natively integrated with AI CLIs.

Tasks

Thoroughly review this project, and suggest any appropriate upgrades. Add them to this task list to implement if confident.
Create the Obsidian system for phase 1.
- Should the markdown content design be in Windows, where the business obsidian vault is, or in WSL where the Astro mono repo is? It is more related to the site, so I think it should be in \\wsl$\Ubuntu-24.04\home\ta\projects\monorepo\sites\sdc.com\ , perhaps under \high-level-design (or better name).
- Identify what plugins and other configuration makes this workflow efficient (Templater, QuickAdd, other?, Style Settings and CSS Snippets for styling)
- Mock up a few pages of sdc.com content, showing core level functionality and links between pages. Probably should include headers with links but Footers don’t add value here.
- Design metadata and other functionality for efficient connection to rest of workflow that eventually merges with actual Astro monorepo content.

AI Response — 2026-03-19

Summary

Vault Location

WSL: /home/ta/projects/monorepo/sites/sdc.com/content-design/
Windows (Obsidian): \\wsl$\Ubuntu-24.04\home\ta\projects\monorepo\sites\sdc.com\content-design

Upgrade Added: Phase 0.5 — AI Content Expansion

The README documents a “Phase 0.5” step between Obsidian drafts and Keystatic import:

After core content is drafted here, run Claude Code / Gemini CLI on this vault to expand copy, tighten headlines, and verify CTA alignment before moving to schema enforcement.

Prompt pattern: “Read all pages in pages/ and components/. Expand headlines, tighten body copy, ensure every page has a clear primary CTA. Reference _00_strategy/ICP.md and _00_strategy/USP.md.”

Next Steps for Human

Open vault in Obsidian: \\wsl$\Ubuntu-24.04\home\ta\projects\monorepo\sites\sdc.com\content-design
Enable CSS snippet: Settings → Appearance → CSS snippets → toggle content-design
Install plugins: Templater, QuickAdd (Community Plugins → Browse)
Configure Templater: template folder = _templates, enable trigger on new file
Click through wikilinks to verify UX prototype flows as expected
Review page content — add/adjust messaging before Phase 0.5 AI expansion

Human Response

I will do the rest of the obsidian configuration later. In our wrap up, you can remind me of these in complete tasks.
You have proven that Obsidian can work well for both the content and basic UX via links.
Let’s work from the six step workflow description. My knowledge base already contains the business foundation of step 0. Structure for steps 1 and 2 seem complete.
For step 3, completing the non-core content. Should this transform the core content into a separate folder to allow the clear separation of the critical content?
- In other words a step in the workflow is to convert high-level-content to all-content
- Perhaps we should rename the folders to the more semantic /content-high-level, and /content-all. Your thoughts?
- I see benefits in this structure. It would allow the chief marketing officer to only deal with the high-level content, while a more junior team member, aI or human, deals with the remaining 80%.
Carefully review the remaining steps 4-6
If you thoroughly understand everything, proceed to implement the structure and workflow tooling each of these steps, creating separate documents, skills, scripts, etc. as needed.
- I am confident that Claude code plan mode is sufficient for these tasks, and using a different approach like superpowers is not necessary. Agreed?
- Is the Opus model needed to ensure the highest quality for this important workflow, or is Sonnet sufficient?
Confirm your understanding, ask for additional info if needed, then present an implementation plan for my approval. Then I will adjust and get you to implement it.

AI Response — 2026-03-19

Questions Answered

Plan mode vs superpowers: Agreed — plan mode is sufficient. This is structured workflow work (docs, config, a skill), not creative/architectural exploration where superpowers brainstorming adds value.

Sonnet vs Opus: Sonnet is sufficient. Opus would add cost with no meaningful quality gain for documentation, config files, and a skill template.

Folder naming (content-high-level / content-all): Agreed — clean, semantic, and supports the role-separation benefit you described (CMO owns high-level; junior team/AI handles the rest). One note: the rename of high-level-design\ → content-high-level\ must be done manually in Windows Explorer before implementation. I cannot rename Windows folders from WSL.

Implementation Plan

Structure change

User renames D:\FSS\Websites\SDC.com\high-level-design\ → content-high-level\
New vault created: D:\FSS\Websites\SDC.com\content-all\ — same base structure (strategy refs, templates, CSS snippet), adds secondary page/component templates

Deliverables

#	Deliverable	Location	Step
1	`content-all` vault	`D:\FSS\Websites\SDC.com\content-all\`	3
2	Keystatic config	`/monorepo/sites/sdc.com/keystatic.config.ts`	3
3	Localization workflow skeleton	`.github/workflows/localize.yml` (disabled)	4
4	Translation prompt template	`content-all\_templates\translate-prompt.md`	4
5	Master workflow doc	`KB\03_Processes\Software Dev\Content-First-Web-Dev.md`	All
6	`/content-expand` skill	`~/.claude/commands/content-expand.md`	0.5

Master workflow doc covers (one document, not per-step files)

Step	Tool	Transition Criterion
0: Business foundation	KB/Obsidian	Stable strategy
1+2: Core content + UX	`content-high-level` vault	All core pages `status: review`
0.5: AI content expansion	`/content-expand` skill	Pages `status: approved`
3: All content + schema	`content-all` + Keystatic	All pages in Keystatic, schemas valid
4: Localization	GitHub Actions + Claude API	If/when needed
5: UI	Astro + Tailwind	Visual + responsive QA passes
6: Review	Checklist (embedded in doc)	All items green

`/content-expand` skill behavior

Reads all pages/ and components/ in specified vault
References _00_strategy/ICP.md and USP.md for alignment
For each status: draft or review file: tighten headlines, sharpen copy, verify primary CTA
Reports changes per file — asks for confirmation before writing

Keystatic config

Defines two collections (pages, components) with fields matching our existing frontmatter schema. Only the config — no migration execution. Will check if Keystatic is already installed before writing.

Steps 5–6

No separate files needed — covered in the master workflow doc. Step 6 review checklist embedded there.

Next Steps for Human

Rename folder: D:\FSS\Websites\SDC.com\high-level-design\ → content-high-level\ (Windows Explorer)
Review plan above and approve (reply in Human Response below)
Any adjustments to scope or deliverables?

Human Response

Plan looks good. Proceed with implementation. Be clear that at this stage we are simply drafting the structure and workflow, using your mock content. After the structure and workflow is refined, I will use it for creation of my production websites.
Critical point to clarify. Be clear on the current monorepo structure and workflows, and how all components are tested and showcased in the template site. This template site is the testing ground to ensure that all functionality and components etc are production ready before they are used. This workflow of defining the content and basic UX links is a companion to the existing monorepo efforts that focuses on the (most important element) content. The monorepo focuses on formatting, functionality, and deployment. Confirm this is clearly understood before implementing.

AI Response — 2026-03-19

Monorepo relationship confirmed: The content vaults (content-high-level / content-all) are companions to the monorepo — not replacements. The monorepo owns formatting, functionality, and deployment; sites/Template/ is the validated testing ground for all components before production use. The content workflow focuses exclusively on what to say and to whom, in pure Markdown, before any code is involved. This is documented explicitly in the master workflow doc.

All files are draft/mock structure. Production content replaces the mock copy when the workflow is validated.

Summary

content-all vault created at D:\FSS\Websites\SDC.com\content-all\ with full structure (README, _00_strategy/, _templates/, pages/, components/, CSS snippet)
4 secondary pages drafted (mock): blog.md, contact.md, pricing.md, faq.md
3 supporting components drafted (mock): footer.md, social-proof.md, email-capture.md
Translation prompt template: content-all/_templates/translate-prompt.md
Keystatic config: monorepo/sites/sdc.com/keystatic.config.ts — fully commented (Keystatic not yet installed); uncomment to activate
Localization workflow skeleton: monorepo/.github/workflows/localize.yml — manual trigger only, disabled; YAML valid
Master workflow doc: KB/03_Processes/Software Dev/Content-First-Web-Dev.md — all 6 steps + Phase 0.5 + monorepo relationship + Step 6 review checklist
/content-expand skill: ~/.claude/commands/content-expand.md — confirmed loaded and available

Key Decisions Embedded in Deliverables

content-high-level = CMO owns (core messaging, strategic pages)
content-all = junior/AI handles (supporting pages, components)
Monorepo = dev team handles (formatting, functionality, deployment)
Template site (sites/Template/) = testing ground for all components before production
Keystatic config is fully scaffolded but commented — install Keystatic when ready for Step 3

Next Steps for Human

Open content-all as a new vault in Obsidian: D:\FSS\Websites\SDC.com\content-all
Enable CSS snippet in content-all: Settings → Appearance → CSS snippets → toggle content-design
Review master workflow doc: D:\FSS\KB\Business\03_Processes\Software Dev\Content-First-Web-Dev.md
Review /content-expand skill — test it on content-high-level when core pages are at status: review
When satisfied with workflow structure, replace mock content with production copy
Run /task-complete to close this task when done

Human Response

All of your suggestions are valuable. Implement them all. Include a next step to document the full process later.

AI Response — 2026-03-19

Summary

CLAUDE.md — Strategic Partner Directive added at top of file (position 1 after title); directive to always surface “or better” approaches and advance the $MART DEBT mission
A/B variant system — ab_test_id + variant fields added to all four templates (both vaults); _ab-tests/ folders created in both vaults with template + first real test (hero-headline-advisors.md); Keystatic config updated with both fields; master workflow doc has full A/B process documentation
Journey maps — content-high-level/_journeys/advisor-journey.md and investor-journey.md created; 5-stage maps with content alignment, transition triggers, and A/B opportunities per stage
Performance feedback loop — content-all/_learnings/_template.md created; master workflow doc documents the full Strategy → Content → Live → Analytics → Learnings cycle; future pipeline extensions table added
/content-expand skill — updated with A/B variant awareness (flags incomplete test setups during inventory)
Master workflow doc — three new major sections added: A/B Testing, Journey Maps, Performance Feedback Loop; Future Pipeline Extensions table added (security, monitoring, visitor feedback)

Strategic Note

The A/B mechanism is architecturally efficient: variant files are pure Markdown in the same vault as control files, frontmatter carries all test metadata, and the Astro rendering layer + edge functions handle traffic splitting. No separate testing tool manages content — the content vault IS the test definition system.

Next Steps for Human

Open content-high-level/_journeys/ in Obsidian — review and adjust the 5-stage advisor and investor journeys to match your actual experience
Review content-high-level/_ab-tests/hero-headline-advisors.md — adjust the hypothesis and variant copy before running
When Step 5 (UI) is ready, implement PostHog or Plausible Goals for A/B measurement
Future task: Full Pipeline Document — a single doc describing the complete web content-to-monitoring pipeline: content workflow → monorepo → CI/CD → security → monitoring → visitor feedback → learnings loop. File as a new task when ready.

Content-First Web Dev

Background

Upgrade on Content-First Design for Web Dev

Alternate Workflow description

Tasks

AI Response — 2026-03-19

Summary

Vault Location

Upgrade Added: Phase 0.5 — AI Content Expansion

Next Steps for Human

Human Response

AI Response — 2026-03-19

Questions Answered

Implementation Plan

Structure change

Deliverables

Master workflow doc covers (one document, not per-step files)

/content-expand skill behavior

Keystatic config

Steps 5–6

Next Steps for Human

Human Response

AI Response — 2026-03-19

Summary

Key Decisions Embedded in Deliverables

Next Steps for Human

Human Response

AI Response — 2026-03-19

Summary

Strategic Note

Next Steps for Human

Human Response

`/content-expand` skill behavior