Skill Delivery Page Kit — QC Checklist
Run this checklist after building the delivery page. Every item is pass/fail. Fix failures before deploying.
1. URLs & Downloads (Blocking)
- [ ] Download button
hrefpoints to the correct Cloudinary URL - [ ] Cloudinary URL actually downloads the .md file (test it)
- [ ]
downloadattribute names the file correctly (e.g.,download="client-intelligence-brief.md") - [ ] HTML
matches the planned URL slug and page name - [ ] OG meta tags present:
og:title,og:description,og:type - [ ] OG content matches what should appear in social sharing previews
2. Navigation
- [ ] Nav is fixed with backdrop-filter blur
- [ ] Background:
rgba(26,26,26,0.95)withbackdrop-filter: blur(10px) - [ ] Gold border-bottom:
3px solid #b79d64 - [ ] Logo uses actual image URL (not a placeholder)
- [ ] Logo text: "Advisory OS" in Cormorant Garamond
- [ ] Links use
.nav-linkspattern (text anchors, NOT.nav-ctagold button) - [ ] Link style: 0.7rem, uppercase, stone color, gold on hover
3. Hero
- [ ] Centered layout (
text-align: center; align-items: center) - [ ] Min-height: 85vh
- [ ] Background: dark charcoal gradient
- [ ] Eyebrow:
inline-flexwith::beforeand::aftergold lines - [ ] Eyebrow text: 0.7rem, weight 500, 0.2em letter-spacing, uppercase, gold
- [ ] H1: clamp responsive sizing, cream color, -0.02em letter-spacing
- [ ] Subtitle: Cormorant Garamond, stone color, clamp sizing
4. Sections & Layout
- [ ] Section padding:
100px 5%(percentage sides, NOT fixed px) - [ ] Sections alternate backgrounds: cream / dark / off-white
- [ ] Container widths: 700px (standard) / 900px (wide)
- [ ] Section eyebrows on light backgrounds:
#6b5d3e(gold-on-cream) - [ ] Section eyebrows on dark backgrounds:
#b79d64(gold) - [ ] Paragraph color on light:
#4a5a6a(slate) - [ ] Paragraph color on dark:
rgba(245,244,240,0.85) - [ ] H2 headings use clamp sizing with
for line-break control - [ ]
scroll-margin-top: 80pxon sections (for nav anchor offset)
5. Output Rows (What You Get Back)
- [ ] Grid layout:
40px 170px 1fr - [ ] Border-left: subtle default, gold on hover
- [ ] Background highlight on hover:
rgba(183,157,100,0.08) - [ ] Number: Cormorant Garamond, gold, weight 600
- [ ] Name: uppercase, small, cream (gold on hover)
- [ ] Description: smaller text, muted
- [ ] Every output section from the skill file is represented
6. Setup Block
- [ ] Background:
rgba(183,157,100,0.08)with gold left border - [ ] Numbered steps with exact UI paths
- [ ] Note section at bottom with first-time instructions
- [ ] "Running It" subsection with trigger phrase bolded
7. CTA Section
- [ ] Uses
.cta-sectionclass (not standardsection.dark) - [ ] CTA button: gold background, charcoal text, uppercase
- [ ] Hover: lighter gold + translateY(-2px)
- [ ] Button text: "Download Skill File" (not marketing language)
- [ ] Subtext below button: one line, stone color
- [ ] Download link has
download="[skill-name].md"attribute
8. Tips
- [ ] Dark section with
.tip-itempattern - [ ] Each tip:
label +explanation - [ ] Tips are from real testing (not generic advice)
- [ ] 3-4 tips — same content as quick-start guide adapted for page format
- [ ] Last tip has no bottom border (
:last-childrule)
9. Series & Footer
- [ ] Series eyebrow matches position (e.g., "Skill 1 of 5")
- [ ] Current skill: bold, gold bullet
- [ ] Upcoming skills: muted (stone)
- [ ] Series note: light, forward-looking, no sales pitch
- [ ] Footer: dark background, gold top border
- [ ] Footer links: Contact, LinkedIn, Substack
- [ ] Copyright:
© 2026 Creating Your Plan. All rights reserved. - [ ] Legal links: Privacy Policy, Terms of Service
10. Responsive
- [ ] Test at 768px: nav-links hidden, section padding 80px 5%, output rows reflow
- [ ] Test at 480px: layout still readable, no horizontal scroll
- [ ] Hero padding adjusts for mobile (120px top instead of 140px)
- [ ] Output row grid collapses to
32px 1fron mobile
11. Content & Voice
- [ ] No mention of price, Intensive, or paid offers
- [ ] No marketing funnel language (capture, convert, unlock)
- [ ] Output sections described factually, not sold
- [ ] Setup instructions use exact UI paths
- [ ] Uses locked terms: skill, download, install, run, paste
- [ ] No forbidden constructions (check 02-skill-delivery-page-terminology.md)
- [ ] CTA is direct, no pressure — no exclamation marks on button