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