← Vault Index
Source: frameworks/kit-delivery-page/04-delivery-page-quality.md

04 — QUALITY: Delivery Page

Format: Pass/fail with blocking failures When to run: After every build, before deploying. Fix all failures before sharing.


1. URLs & Downloads (Blocking)

#CheckBlocking
1Download button href points to the correct Cloudinary URLYes
2Cloudinary URL actually downloads the .md file (test it)Yes
3download attribute names the file correctly (e.g., download="client-intelligence-brief.md")Yes
4HTML </code> matches the page name and brand</td><td style="text-align:left">Yes</td></tr> <tr><td style="text-align:left">5</td><td style="text-align:left"><code><meta name="robots" content="noindex, nofollow"></code> is present</td><td style="text-align:left">Yes</td></tr> <tr><td style="text-align:left">6</td><td style="text-align:left">OG meta tags present: <code>og:title</code>, <code>og:description</code>, <code>og:type</code></td><td style="text-align:left">No</td></tr> <tr><td style="text-align:left">7</td><td style="text-align:left">OG content matches what should appear in social sharing previews</td><td style="text-align:left">No</td></tr> </tbody></table> <hr> <h2>2. Header</h2> <table> <thead><tr><th style="text-align:left">#</th><th style="text-align:left">Check</th><th style="text-align:left">Blocking</th></tr></thead> <tbody> <tr><td style="text-align:left">8</td><td style="text-align:left">Header is sticky with <code>position: sticky; top: 0; z-index: 100</code></td><td style="text-align:left">No</td></tr> <tr><td style="text-align:left">9</td><td style="text-align:left">Background: <code>#0f2d3e</code> (Deep Teal)</td><td style="text-align:left">No</td></tr> <tr><td style="text-align:left">10</td><td style="text-align:left">Gold border-bottom: <code>3px solid #b79d64</code></td><td style="text-align:left">No</td></tr> <tr><td style="text-align:left">11</td><td style="text-align:left">Logo image loads correctly (not a broken image)</td><td style="text-align:left">Yes</td></tr> <tr><td style="text-align:left">12</td><td style="text-align:left">Logo links to the correct website URL</td><td style="text-align:left">No</td></tr> <tr><td style="text-align:left">13</td><td style="text-align:left">Brand name in Fraunces serif, cream color</td><td style="text-align:left">No</td></tr> <tr><td style="text-align:left">14</td><td style="text-align:left">"Download the Skill" anchor button links to <code>#download</code></td><td style="text-align:left">No</td></tr> <tr><td style="text-align:left">15</td><td style="text-align:left">Anchor button: gold background, deep teal text</td><td style="text-align:left">No</td></tr> </tbody></table> <hr> <h2>3. Hero</h2> <table> <thead><tr><th style="text-align:left">#</th><th style="text-align:left">Check</th><th style="text-align:left">Blocking</th></tr></thead> <tbody> <tr><td style="text-align:left">16</td><td style="text-align:left">Background: teal-to-slate gradient <code>linear-gradient(135deg, #0f2d3e 0%, #3e666e 100%)</code></td><td style="text-align:left">No</td></tr> <tr><td style="text-align:left">17</td><td style="text-align:left">Centered layout</td><td style="text-align:left">No</td></tr> <tr><td style="text-align:left">18</td><td style="text-align:left">Eyebrow: inline-flex with gold lines on either side</td><td style="text-align:left">No</td></tr> <tr><td style="text-align:left">19</td><td style="text-align:left">Eyebrow text says "Free AI Skill" — NOT "Free Claude Skill" or any LLM brand name</td><td style="text-align:left">Yes</td></tr> <tr><td style="text-align:left">20</td><td style="text-align:left">H1: Fraunces serif, cream, weight 800, -0.02em letter-spacing</td><td style="text-align:left">No</td></tr> <tr><td style="text-align:left">21</td><td style="text-align:left">Subtitle: Fraunces serif, muted cream <code>rgba(241, 237, 230, 0.7)</code></td><td style="text-align:left">No</td></tr> </tbody></table> <hr> <h2>4. What This Skill Does</h2> <table> <thead><tr><th style="text-align:left">#</th><th style="text-align:left">Check</th><th style="text-align:left">Blocking</th></tr></thead> <tbody> <tr><td style="text-align:left">22</td><td style="text-align:left">Cream background <code>#f1ede6</code></td><td style="text-align:left">No</td></tr> <tr><td style="text-align:left">23</td><td style="text-align:left">Section eyebrow: <code>#6b5d3e</code> (gold-on-cream), uppercase, letter-spacing 2px</td><td style="text-align:left">No</td></tr> <tr><td style="text-align:left">24</td><td style="text-align:left">H2 in Fraunces, deep teal color, weight 800</td><td style="text-align:left">No</td></tr> <tr><td style="text-align:left">25</td><td style="text-align:left">Lead paragraph describes what user does (paste X) and what they get back (Y)</td><td style="text-align:left">Yes</td></tr> <tr><td style="text-align:left">26</td><td style="text-align:left">Contrast line present — differentiates the skill from a generic summary</td><td style="text-align:left">No</td></tr> <tr><td style="text-align:left">27</td><td style="text-align:left">Container max-width: 700px</td><td style="text-align:left">No</td></tr> </tbody></table> <hr> <h2>5. What You Get Back (Output Rows)</h2> <table> <thead><tr><th style="text-align:left">#</th><th style="text-align:left">Check</th><th style="text-align:left">Blocking</th></tr></thead> <tbody> <tr><td style="text-align:left">28</td><td style="text-align:left">Background: teal-to-slate gradient (same as hero)</td><td style="text-align:left">No</td></tr> <tr><td style="text-align:left">29</td><td style="text-align:left">Container max-width: 900px (wider than standard)</td><td style="text-align:left">No</td></tr> <tr><td style="text-align:left">30</td><td style="text-align:left">Grid layout per row: <code>40px 170px 1fr</code> with 16px gap</td><td style="text-align:left">No</td></tr> <tr><td style="text-align:left">31</td><td style="text-align:left">Number: Fraunces serif, gold <code>#b79d64</code>, weight 700</td><td style="text-align:left">No</td></tr> <tr><td style="text-align:left">32</td><td style="text-align:left">Section name: uppercase, 0.65rem, 0.12em letter-spacing, cream</td><td style="text-align:left">No</td></tr> <tr><td style="text-align:left">33</td><td style="text-align:left">Description: 0.875rem, muted <code>rgba(241,237,230,0.7)</code></td><td style="text-align:left">No</td></tr> <tr><td style="text-align:left">34</td><td style="text-align:left">Border-left on each row: <code>3px solid rgba(241,237,230,0.06)</code></td><td style="text-align:left">No</td></tr> <tr><td style="text-align:left">35</td><td style="text-align:left">Every output section from the skill file is represented — no omissions</td><td style="text-align:left">Yes</td></tr> <tr><td style="text-align:left">36</td><td style="text-align:left">Output sections described factually, not sold</td><td style="text-align:left">Yes</td></tr> <tr><td style="text-align:left">37</td><td style="text-align:left">Last row has no bottom margin (visual clean close)</td><td style="text-align:left">No</td></tr> </tbody></table> <hr> <h2>6. Setup</h2> <table> <thead><tr><th style="text-align:left">#</th><th style="text-align:left">Check</th><th style="text-align:left">Blocking</th></tr></thead> <tbody> <tr><td style="text-align:left">38</td><td style="text-align:left">Off-white background <code>#f7f5f0</code></td><td style="text-align:left">No</td></tr> <tr><td style="text-align:left">39</td><td style="text-align:left">Setup block: <code>rgba(183, 157, 100, 0.08)</code> background with gold left border</td><td style="text-align:left">No</td></tr> <tr><td style="text-align:left">40</td><td style="text-align:left">Numbered steps with generic platform language — no LLM brand names</td><td style="text-align:left">Yes</td></tr> <tr><td style="text-align:left">41</td><td style="text-align:left">Setup steps say "Open your preferred AI assistant" or equivalent generic phrasing</td><td style="text-align:left">Yes</td></tr> <tr><td style="text-align:left">42</td><td style="text-align:left">Note at bottom: works with any large language model</td><td style="text-align:left">No</td></tr> <tr><td style="text-align:left">43</td><td style="text-align:left">"Running It" subsection present with trigger phrase bolded</td><td style="text-align:left">Yes</td></tr> <tr><td style="text-align:left">44</td><td style="text-align:left">Input description matches the skill's actual requirements</td><td style="text-align:left">Yes</td></tr> </tbody></table> <hr> <h2>7. Download (CTA)</h2> <table> <thead><tr><th style="text-align:left">#</th><th style="text-align:left">Check</th><th style="text-align:left">Blocking</th></tr></thead> <tbody> <tr><td style="text-align:left">45</td><td style="text-align:left">Background: teal-to-slate gradient</td><td style="text-align:left">No</td></tr> <tr><td style="text-align:left">46</td><td style="text-align:left"><code>id="download"</code> on section (anchor target)</td><td style="text-align:left">Yes</td></tr> <tr><td style="text-align:left">47</td><td style="text-align:left">H2: "Get the Skill"</td><td style="text-align:left">No</td></tr> <tr><td style="text-align:left">48</td><td style="text-align:left">CTA button: gold background <code>#b79d64</code>, deep teal text <code>#0f2d3e</code></td><td style="text-align:left">No</td></tr> <tr><td style="text-align:left">49</td><td style="text-align:left">Button text: "Download Skill File" — no hype language</td><td style="text-align:left">Yes</td></tr> <tr><td style="text-align:left">50</td><td style="text-align:left">Button has both <code>href</code> (Cloudinary URL) and <code>download</code> attribute</td><td style="text-align:left">Yes</td></tr> <tr><td style="text-align:left">51</td><td style="text-align:left">Subtext: "Works with any large language model."</td><td style="text-align:left">No</td></tr> <tr><td style="text-align:left">52</td><td style="text-align:left">Centered layout, max-width 700px</td><td style="text-align:left">No</td></tr> </tbody></table> <hr> <h2>8. Tips</h2> <table> <thead><tr><th style="text-align:left">#</th><th style="text-align:left">Check</th><th style="text-align:left">Blocking</th></tr></thead> <tbody> <tr><td style="text-align:left">53</td><td style="text-align:left">Deep teal background <code>#0f2d3e</code> (solid, not gradient)</td><td style="text-align:left">No</td></tr> <tr><td style="text-align:left">54</td><td style="text-align:left">Each tip: <code><strong></code> label + <code><span></code> explanation</td><td style="text-align:left">No</td></tr> <tr><td style="text-align:left">55</td><td style="text-align:left">Tips are from real testing — not generic advice</td><td style="text-align:left">Yes</td></tr> <tr><td style="text-align:left">56</td><td style="text-align:left">3-4 tips present</td><td style="text-align:left">No</td></tr> <tr><td style="text-align:left">57</td><td style="text-align:left">Bottom border separators between tips, none on last tip</td><td style="text-align:left">No</td></tr> </tbody></table> <hr> <h2>9. Footer</h2> <table> <thead><tr><th style="text-align:left">#</th><th style="text-align:left">Check</th><th style="text-align:left">Blocking</th></tr></thead> <tbody> <tr><td style="text-align:left">58</td><td style="text-align:left">Deep teal background <code>#0f2d3e</code> with gold top border <code>3px solid #b79d64</code></td><td style="text-align:left">No</td></tr> <tr><td style="text-align:left">59</td><td style="text-align:left">Meta compliance disclaimer present (left-aligned, muted)</td><td style="text-align:left">Yes</td></tr> <tr><td style="text-align:left">60</td><td style="text-align:left">Results disclaimer present (left-aligned, muted)</td><td style="text-align:left">Yes</td></tr> <tr><td style="text-align:left">61</td><td style="text-align:left">Copyright line: "Practice Builders is a brand of Creating Your Plan" (or AOS equivalent)</td><td style="text-align:left">No</td></tr> <tr><td style="text-align:left">62</td><td style="text-align:left">Contact email: kathryn@creatingyourplan.com with gold link</td><td style="text-align:left">No</td></tr> <tr><td style="text-align:left">63</td><td style="text-align:left">Legal links: Privacy Policy, Terms of Service, Disclaimer — all on creatingyourplan.com</td><td style="text-align:left">Yes</td></tr> </tbody></table> <hr> <h2>10. Technical & Responsive</h2> <table> <thead><tr><th style="text-align:left">#</th><th style="text-align:left">Check</th><th style="text-align:left">Blocking</th></tr></thead> <tbody> <tr><td style="text-align:left">64</td><td style="text-align:left">All styles are inline — no external CSS file, no <code><style></code> block CSS classes referenced</td><td style="text-align:left">No</td></tr> <tr><td style="text-align:left">65</td><td style="text-align:left">No <code>var()</code> anywhere — all values hardcoded hex/rgba</td><td style="text-align:left">Yes</td></tr> <tr><td style="text-align:left">66</td><td style="text-align:left">No JavaScript or scroll-reveal animations</td><td style="text-align:left">Yes</td></tr> <tr><td style="text-align:left">67</td><td style="text-align:left"><code><meta name="robots" content="noindex, nofollow"></code> present</td><td style="text-align:left">Yes</td></tr> <tr><td style="text-align:left">68</td><td style="text-align:left">Google Fonts loaded: Fraunces + Montserrat (CYP) or Cormorant Garamond + Inter (AOS)</td><td style="text-align:left">No</td></tr> <tr><td style="text-align:left">69</td><td style="text-align:left">Responsive media queries in <code><style></code> block for 840px and 640px breakpoints</td><td style="text-align:left">No</td></tr> <tr><td style="text-align:left">70</td><td style="text-align:left">No horizontal scroll at any viewport width</td><td style="text-align:left">Yes</td></tr> <tr><td style="text-align:left">71</td><td style="text-align:left">Scrollbar styled: gold thumb on teal track</td><td style="text-align:left">No</td></tr> </tbody></table> <hr> <h2>11. Content & Voice</h2> <table> <thead><tr><th style="text-align:left">#</th><th style="text-align:left">Check</th><th style="text-align:left">Blocking</th></tr></thead> <tbody> <tr><td style="text-align:left">72</td><td style="text-align:left">No LLM brand names anywhere on the page (ChatGPT, Claude, Gemini, etc.)</td><td style="text-align:left">Yes</td></tr> <tr><td style="text-align:left">73</td><td style="text-align:left">No mention of price or paid offers in core sections (Header through Tips)</td><td style="text-align:left">Yes</td></tr> <tr><td style="text-align:left">74</td><td style="text-align:left">No marketing funnel language: capture, convert, unlock, claim, grab</td><td style="text-align:left">Yes</td></tr> <tr><td style="text-align:left">75</td><td style="text-align:left">No forbidden voice terms: leverage, synergy, coaching, mindset, crush it, game-changer, journey</td><td style="text-align:left">Yes</td></tr> <tr><td style="text-align:left">76</td><td style="text-align:left">Output sections described factually — not sold with superlatives</td><td style="text-align:left">Yes</td></tr> <tr><td style="text-align:left">77</td><td style="text-align:left">CTA button has no exclamation marks</td><td style="text-align:left">No</td></tr> <tr><td style="text-align:left">78</td><td style="text-align:left">Uses locked terms correctly: skill (not tool/app), download (not get/claim), install (not set up), run (not use/try)</td><td style="text-align:left">No</td></tr> <tr><td style="text-align:left">79</td><td style="text-align:left"><code> </code> used only for intentional line-break control in H1/H2 headlines</td><td style="text-align:left">No</td></tr> </tbody></table> <hr> <h2>Blocking Failure Summary</h2> <p>Any of these = do not deploy:</p> <ol> <li>Cloudinary URL does not download the correct file</li> <li>Download attribute missing or names the file incorrectly</li> <li><code>noindex, nofollow</code> meta tag missing</li> <li>Logo image broken</li> <li>LLM brand name appears anywhere on the page</li> <li>Setup instructions reference a specific LLM platform</li> <li>Paid offer or price mentioned in core delivery sections</li> <li>Marketing funnel language present</li> <li>Output sections from skill file are missing</li> <li><code>var()</code> used in any inline style</li> <li>JavaScript present</li> <li>Legal links missing from footer</li> <li>Meta compliance disclaimer missing from footer</li> </ol> <hr> <h2>Common Failure Modes</h2> <table> <thead><tr><th style="text-align:left">Failure</th><th style="text-align:left">What Happens</th><th style="text-align:left">How to Fix</th></tr></thead> <tbody> <tr><td style="text-align:left">LLM brand name in setup</td><td style="text-align:left">Page references "Claude" or "ChatGPT" specifically</td><td style="text-align:left">Replace with "your preferred AI assistant" or "any large language model"</td></tr> <tr><td style="text-align:left">Cloudinary URL not tested</td><td style="text-align:left">Button downloads wrong file, 404, or corrupted content</td><td style="text-align:left">Test the exact URL in an incognito browser before building</td></tr> <tr><td style="text-align:left">Missing output sections</td><td style="text-align:left">Skill has 8 sections but page only shows 6</td><td style="text-align:left">Cross-reference skill file section-by-section spec against output rows</td></tr> <tr><td style="text-align:left"><code>var()</code> in inline styles</td><td style="text-align:left">Browser renders raw <code>var()</code> text instead of colors</td><td style="text-align:left">Search the file for <code>var(</code> — replace every instance with the hardcoded hex value</td></tr> <tr><td style="text-align:left">Marketing language leak</td><td style="text-align:left">"Unlock," "claim," or "grab" in CTA or copy</td><td style="text-align:left">Search for forbidden terms list in 02-terminology — fix all instances</td></tr> <tr><td style="text-align:left">Cross-sell in core sections</td><td style="text-align:left">Paid offer mentioned before the optional What's Next section</td><td style="text-align:left">Move all cross-sell content to What's Next section, or remove if not campaign-appropriate</td></tr> <tr><td style="text-align:left">Missing Meta disclaimer</td><td style="text-align:left">Page linked from Meta ads but footer lacks the required disclaimer</td><td style="text-align:left">Add the standard Meta compliance paragraph to the footer</td></tr> <tr><td style="text-align:left">Orphan word in headline</td><td style="text-align:left">H1 or H2 has a single word on the last line</td><td style="text-align:left">Add <code> </code> between the last two words to keep them together</td></tr> <tr><td style="text-align:left">Wrong brand treatment</td><td style="text-align:left">CYP page uses AOS colors or fonts (or vice versa)</td><td style="text-align:left">Check brand mapping in 02-terminology — verify every color, font, and logo matches the target brand</td></tr> </tbody></table> </article> <footer>Advisory OS · <span>Vault</span></footer> </body> </html>