RDCO website-build-and-polish workflow (reusable pipeline)
Founder direction 2026-05-05 19:55 ET: “You need to be thinking like a COO. What’s the operational workflow? What specialists or specialized skills do we need to achieve the best result from that workflow? What are the skills we have, which need to be developed, adapted or improved? how do they sequence to produce the outcome? It doesn’t all have to be on you, but I do need you to plan out the solution and own the team that delivers it.”
This SOP is the COO-mode plan: end-to-end workflow for building / polishing any RDCO-owned web surface, with explicit skill assignment per stage, owner assigned to each step, and gap-flagging where a step has no current specialist.
The 12-stage workflow
| # | Stage | Owner (specialist / skill) | Status |
|---|---|---|---|
| 1 | Positioning brief (ICP, value prop, hero hook, CTA) | RDCO COO (me, direct) - distill founder direction + relevant L5/Naval/sector evidence | always-on |
| 2 | Design-reference scan (5-7 URL shortlist with steal-targets) | mcp__mobbin__search_screens queries against Mobbin, parent COO synthesis | OPERATIONAL (installed 2026-05-05) |
| 3 | Brand-spec interpretation (palette, type, voice rules per surface) | ~/.claude/skills/ray-data-co-design/ umbrella + child skills (sanity-check-design, mac-pack-design, squarely-design, hq-design) | partial: MAC needs its own child design spec OR explicit decision to inherit from umbrella |
| 4 | Build implementation (Astro + CF Pages scaffolding, components, copy) | ~/.claude/skills/build-landing-page/ OR ~/.claude/skills/build-project/ OR frontend-design plugin specialist (depending on scope) | OPERATIONAL but underused; MAC v0 went through ad-hoc subagent instead of build-landing-page skill |
| 5 | Component creative production (hero, sections, illustrations, forms) | frontend-design:frontend-design plugin specialist - “avoids generic AI aesthetics” | OPERATIONAL but unused so far |
| 6 | Animation / motion layer (hero animations, scroll reveals, micro-interactions) | animation-components:* plugins (motion-framer, animejs, scroll-reveal-libraries, react-spring-physics, lottie-animations) | OPERATIONAL but unused so far |
| 7 | Performance audit (Core Web Vitals, render-blocking, accessibility) | cloudflare:web-perf plugin specialist | OPERATIONAL but unused so far |
| 8 | Design critique against the founder’s taste synthesis | ~/.claude/skills/design-critic/ - autonomous critic that scores any RDCO surface BEFORE iterations reach the founder | OPERATIONAL but unused for MAC v0 |
| 9 | Critic iteration loop (feedback -> rebuild -> re-critique until PASS) | composition: design-critic + frontend-design in a loop, COO orchestrates | partially exists in the build-landing-page skill’s “four-layer review loop” |
| 10 | A/B variant generation (3 distinctive variants for founder visual pick) | GAP - no current specialist; could compose frontend-design + design-critic | GAP |
| 11 | Marketing-copy iteration (sales-page rhythm, hook-density, CTA conversion) | GAP - exists for newsletter (draft-review, voice-match) but not for landing-page sales copy | GAP |
| 12 | Deploy + monitor (Cloudflare Pages, env vars, DNS, observability) | cloudflare:cloudflare + wrangler skills + manual env config | OPERATIONAL |
Existing skill inventory for this pipeline
What we have that I have NOT been using fully (this is the IC-mode honest read):
Design + creative
~/.claude/skills/ray-data-co-design/SKILL.md- umbrella design system (palette, type, motifs, mascot, doodle aesthetic)~/.claude/skills/sanity-check-design/SKILL.md- SC-specific extensions~/.claude/skills/design-critic/SKILL.md- autonomous critic for deployed RDCO design surfaces~/.claude/skills/build-landing-page/SKILL.md- 4-layer automated review loop for landing pages~/.claude/skills/build-project/SKILL.md- full SDLC for project work with Playwright visual review
Plugin specialists (claude-plugins-official + addons)
frontend-design:frontend-design- distinctive production-grade frontend that avoids generic AI aestheticui-ux-pro-max:ui-ux-pro-max- 50+ styles, 161 palettes, 57 font pairings, 99 UX guidelines, 25 chart types across 10 stacksanimation-components:motion-framer- React animation, gestures, layout, AnimatePresence, springs, scrollanimation-components:animejs- timeline animations, stagger, SVG morphing, multi-step choreographyanimation-components:scroll-reveal-libraries- AOS for fade/slide revealsanimation-components:react-spring-physics- physics-based UI animationsanimation-components:lottie-animations- After Effects JSON animationsanimation-components:animated-component-libraries- Magic UI + React Bits pre-built collectionscore-3d-animation:gsap-scrolltrigger- GSAP + ScrollTrigger for scroll-driven web animationscore-3d-animation:motion-framer(duplicate)core-3d-animation:threejs-webgl+react-three-fiber+babylonjs-engine- 3D scenes if/when neededcloudflare:web-perf- Core Web Vitals, Lighthouse, INP/LCP/CLS measurementcloudflare:cloudflare+cloudflare:wrangler+cloudflare:durable-objects- deploy + DNS + statevercel:shadcn- shadcn/ui patterns + custom registriesvercel:next-cache-components- PPR + caching for any future Next.js surfacemcp__mobbin__search_screens- newly installed UX inspiration MCP
Tools
- Cloudflare Pages, Wrangler CLI, Resend, Resend Automations, Turnstile, Fathom analytics
- xAI image gen, OpenAI gpt-image, Kling video, Seedance, HeyGen for visual asset generation
- Playwright (via Claude in Chrome) for visual screenshot review
- ffmpeg + sips for image processing
Gaps to develop
Gap 1: A/B variant generation skill
What’s missing: ability to spin up 3 distinctive design variants of a hero section (or full page) for founder visual pick, using the design-critic as a quality gate per variant.
Composition: would chain frontend-design (3 variants in parallel) + design-critic (per-variant PASS/ITERATE/SCRAP verdict) + COO (final pick + reasoning).
Build cost: medium. Could ship as ~/.claude/skills/design-variants/SKILL.md in 2-3 hours.
Gap 2: Marketing-copy iteration skill
What’s missing: landing-page-sales-copy iteration skill. We have draft-review and voice-match for newsletter copy (Sanity Check shape), but landing pages need different rhythm (hook density, scannable structure, scroll-pacing, CTA conversion). The MAC anchor article was a Substack-style essay re-sourced for the page, but landing-page copy needs its own iteration discipline.
Composition: new skill ~/.claude/skills/landing-copy-review/ that scores against landing-page-specific patterns (Justin Jackson’s writing-for-conversion principles, Amy Hoy’s “feature -> benefit -> outcome” ladder, etc.). Could pair with voice-match for founder voice consistency.
Build cost: medium. 3-4 hours for the skill spec + rule corpus.
Gap 3: Asset-generation orchestration skill
What’s missing: when a design needs custom illustrations / hero images / scene videos, we have the individual generators (xAI, OpenAI, Kling, Seedance, HeyGen, ray-mascot-anim) but no orchestrator skill that takes a creative brief, picks the right generator(s), produces variants, and feeds back into the design pipeline.
Composition: new skill ~/.claude/skills/asset-orchestrator/ that maps creative brief -> generator choice -> variant production -> design-critic vetting.
Build cost: medium. 3-4 hours.
The MAC v0 polish team-of-specialists (concrete next dispatch)
Applying the workflow to the MAC v0 polish task right now, here’s the team I’d compose. Each is a sub-agent dispatched in sequence (some parallel where independent):
Round 1: Critique baseline (parallel, 1 sub-agent)
- design-critic sub-agent runs Playwright capture of https://1de4770e.mac-landing.pages.dev at desktop + mobile, scores against the founder’s taste synthesis (5 concrete tells, cutout-character recipe, signature doodle aesthetic), returns PASS / ITERATE / SCRAP verdict + specific actionable feedback.
Round 2: Polish iteration (sequential, 1 sub-agent)
- frontend-design sub-agent (composed with the Mobbin reference shortlist + the design-critic baseline + the 4 ranked moves I surfaced earlier) implements the polish iteration:
- Hero re-typeset to crop-text energy a la SeatGeek
- Add 2-3 more marker doodles around the hero a la Superlist
- Background of the matrix section gets the Figma-style dotted construction-grid pattern
- Replace the linear “what you’ll get” list with a 4-card credibility row a la Typefully
- Layer in 1 motion accent (scroll-triggered reveal on the matrix entries via
animation-components:scroll-reveal-libraries) - Apply the Microsoft-WTI-derived ICP shift in the hero hook + author bio (lean into the 16% Frontier-Pro manager-data-lead audience)
Round 3: Re-critique + perf (parallel, 2 sub-agents)
- design-critic sub-agent runs the polish iteration through the same critique loop. PASS or queue another iteration round with specific feedback.
- cloudflare:web-perf sub-agent runs Core Web Vitals against the new preview URL. Surface any regressions from the polish.
Round 4: Deploy preview + founder visual pick
- COO (me) merges the polish PR to a fresh CF Pages preview URL, surfaces it to founder via iMessage with side-by-side visual + the design-critic verdict + the perf delta.
ETA: 60-90 min for all 4 rounds.
What I OWN as the COO going forward
- Workflow design - this doc, kept current as gaps fill.
- Specialist orchestration - dispatch the right sub-agent at the right stage; don’t try to do their work myself.
- Quality gates - design-critic MUST run before founder sees a variant; perf MUST be checked before promotion to production; em-dash + brand-spec compliance audited silently per the
verify-actionrules. - Decision surface to founder - founder sees only the PASS-grade output + the 1-3 ripe decisions, not the 4-stage rubble.
- Gap registry - this doc tracks where the workflow has missing specialists; the gap-fill work is itself queueable to
/check-boardas Ray-Medium tasks.
What the founder OWNS
- Strategic direction - ICP + value prop + brand boundary calls (e.g., “MAC for the 16% manager-data-lead, not generic IC”)
- Visual taste calibration - final pick when 3 variants reach PASS-grade
- Domain + payment commitments - registrar purchases, Cloudflare DNS, env-var setting
- Quality bar overrides - if the design-critic PASSes something he hates, his override is the higher signal
Cross-references
~/.claude/skills/build-landing-page/SKILL.md- the existing 4-layer review loop skill (OVERLAP with this workflow; possibly should extend or absorb into this SOP)~/.claude/skills/build-project/SKILL.md- full-SDLC project workflow~/.claude/skills/design-critic/SKILL.md- the load-bearing critique skill at stages 8 + 9~/.claude/skills/ray-data-co-design/SKILL.md- umbrella brand spec~/rdco-vault/01-projects/mac-landing/2026-05-05-build-spec.md- MAC v0 build spec (what shipped)~/rdco-vault/06-reference/2026-05-05-microsoft-2026-work-trend-index-sharp-read.md- the ICP-shift evidence for MAC repositioning