← Vault Index
frameworks / kit-delivery-page / 05-delivery-page-output-skill.md
Source: frameworks/kit-delivery-page/05-delivery-page-output-skill.md

05 — OUTPUT SKILL: Delivery Page

Scope

Produces: A single HTML delivery page where recipients download a free skill file or resource. Audience: Practice owners / advisory clients who requested the resource via handraiser post, DM, or email. Filename: [skill-name]-delivery.html (e.g., client-intelligence-brief-delivery.html) Lifecycle: One-shot per skill. Updated only if the skill file or download URL changes.

Required Inputs

  1. Skill name — the display name (e.g., "Client Intelligence Brief")
  2. One-line description — the skill's positioning statement
  3. What the skill does — 2-3 sentences: what user does, what they get back, what makes it different
  4. Output sections — numbered list: section name + one-line description each
  5. Input required — what the user pastes (e.g., "3-5 recent emails from one client")
  6. Time to run — approximate (e.g., "about two minutes")
  7. Trigger phrase — what the user types to start (e.g., "Run the Client Intelligence Brief")
  8. Tips — 3-4 usage tips from testing: bold label + explanation
  9. Cloudinary URL — the hosted .md file URL (must be live and tested)
  10. Download filename — what the file saves as (e.g., client-intelligence-brief.md)
  11. Hero eyebrow — "Free AI Skill" (standard)
  12. Hero headline — the skill name
  13. Hero subtitle — one sentence positioning adapted for the page
  14. Page title — for HTML </code> tag</li> <li><strong>OG title and description</strong> — for social sharing meta tags</li> <li><strong>Brand treatment</strong> — CYP (default) or AOS</li> <li><strong>Cross-sell content</strong> (optional) — headline, body, CTA for "What's Next" section</li> </ol> <hr> <h2>Content Rules</h2> <ol> <li><strong>No LLM brand names.</strong> Never write "ChatGPT," "Claude," "Gemini," or any specific platform name. Use "your preferred AI assistant" or "any large language model."</li> <li><strong>No <code>var()</code> in inline styles.</strong> Every color, font-size, spacing value must be a hardcoded hex, rgba, rem, or px value. Inline styles do not support CSS variables.</li> <li><strong>No JavaScript.</strong> No scroll reveals, no interaction scripts, no analytics tags. Pure HTML + inline CSS.</li> <li><strong>No external CSS.</strong> All styling is inline on elements. The only <code><style></code> block is for scrollbar styling and responsive media queries (which cannot be inline).</li> <li><strong><code>noindex, nofollow</code> required.</strong> This page is not for search engines.</li> <li><strong>All output sections must appear.</strong> If the skill has 8 sections, the page shows 8 rows. No omissions.</li> <li><strong>Setup instructions are generic.</strong> "Open your preferred AI assistant" — not platform-specific steps.</li> <li><strong>Eyebrow says "Free AI Skill."</strong> Not "Free Claude Skill" or any brand-specific label.</li> <li><strong>CTA button text: "Download Skill File."</strong> No hype, no exclamation marks, no urgency language.</li> <li><strong>Cross-sell is optional and goes in "What's Next" only.</strong> Never in core sections (Header through Tips).</li> <li><strong>Footer must include Meta compliance disclaimer and results disclaimer.</strong></li> <li><strong>Use <code> </code> only for intentional line-break control in H1 and H2.</strong> Prevents orphan words on the last line of headlines.</li> <li><strong>Use HTML entities for special characters.</strong> <code>—</code> for em dash, <code>’</code> for apostrophe, <code>–</code> for en dash, <code>“</code> / <code>”</code> for quotes.</li> </ol> <hr> <h2>Production Workflow</h2> <h3>Step 0: Confirm Understanding</h3> <p>Before building, confirm:</p> <ul> <li>"Here is what I am going to build: a delivery page for [skill name]. The page will use [CYP/AOS] brand treatment, link to [Cloudinary URL], and show [N] output sections. The cross-sell section will [be included / be omitted]. Does this match your intent?"</li> </ul> <p>Do not start production until confirmed.</p> <h3>Step 1: Gather and Validate Inputs</h3> <p>Open <code>01-delivery-page-context.md</code> and confirm every required field is filled.</p> <p><strong>Load before building:</strong></p> <ul> <li><code>business-aos/reference/core/voice.md</code> — tone, cadence, vocabulary</li> <li><code>business-aos/reference/brand/visual-style-cyp.md</code> (CYP) or <code>business-aos/reference/brand/visual-style.md</code> (AOS)</li> <li><code>03-delivery-page-golden-example.html</code> — the reference to match</li> </ul> <p><strong>Validation gate — do not proceed until:</strong></p> <ul> <li>[ ] Cloudinary URL is live and downloads the correct .md file</li> <li>[ ] Skill file is tested and finalized</li> <li>[ ] All output sections are listed</li> <li>[ ] Brand treatment is confirmed</li> </ul> <h3>Step 2: Build the HTML</h3> <p>Use the full template below. Replace all <code>{{PLACEHOLDER}}</code> values with the actual content from inputs. Do not change the structure, spacing, or styling — only the content.</p> <hr> <h2>Full Template — CYP / Practice Builders Brand</h2> <pre><code class="lang-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>{{PAGE_TITLE}}</title> <meta name="description" content="{{OG_DESCRIPTION}}"> <meta property="og:title" content="{{OG_TITLE}}"> <meta property="og:description" content="{{OG_DESCRIPTION}}"> <meta property="og:type" content="website"> <meta name="robots" content="noindex, nofollow"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,400;0,600;0,700;0,800;1,400&family=Montserrat:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> <style> ::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-track { background: #0f2d3e; } ::-webkit-scrollbar-thumb { background: #b79d64; border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background: #9d8556; } * { scrollbar-width: thin; scrollbar-color: #b79d64 #0f2d3e; } html, body { overflow-x: hidden; width: 100%; } * { box-sizing: border-box; margin: 0; padding: 0; } img { max-width: 100%; height: auto; } @media (max-width: 840px) { h1 { font-size: 2.2rem !important; } h2 { font-size: 1.8rem !important; } section { padding: 4rem 5% !important; } } @media (max-width: 640px) { h1 { font-size: 1.8rem !important; } h2 { font-size: 1.5rem !important; } section { padding: 3rem 4% !important; } header div { flex-wrap: wrap; gap: 0.75rem; } } </style> </head> <body style="margin: 0; padding: 0; font-family: 'Montserrat', sans-serif; color: #0f2d3e; background: #f1ede6; line-height: 1.6; overflow-x: hidden;"> <!-- HEADER --> <header style="background: #0f2d3e; padding: 1.5rem 5%; position: sticky; top: 0; z-index: 100; border-bottom: 3px solid #b79d64;"> <div style="max-width: 1400px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center;"> <a href="{{WEBSITE_URL}}" style="display: flex; align-items: center; gap: 1rem; text-decoration: none;"> <img src="{{HEADER_LOGO_URL}}" alt="{{HEADER_BRAND_NAME}}" style="height: 45px;"> <div> <div style="font-family: 'Fraunces', serif; font-size: 1.5rem; color: #f1ede6; font-weight: 700; line-height: 1;">{{HEADER_BRAND_NAME}}</div> <div style="font-size: 0.7rem; color: #b79d64; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; margin-top: 0.35rem;">{{HEADER_BRAND_SUBTITLE}}</div> </div> </a> <a href="#download" style="color: #0f2d3e; background: #b79d64; text-decoration: none; font-weight: 700; font-size: 0.85rem; padding: 0.75rem 1.25rem; border-radius: 4px;">Download the Skill</a> </div> </header> <!-- HERO --> <section style="background: linear-gradient(135deg, #0f2d3e 0%, #3e666e 100%); color: #f1ede6; padding: 6rem 5%; text-align: center;"> <div style="max-width: 800px; margin: 0 auto;"> <div style="font-size: 0.85rem; letter-spacing: 2px; text-transform: uppercase; color: #b79d64; margin-bottom: 1.5rem; font-weight: 600; display: inline-flex; align-items: center; gap: 1rem;"><span style="width: 40px; height: 1px; background: #b79d64; display: inline-block;"></span> {{HERO_EYEBROW}} <span style="width: 40px; height: 1px; background: #b79d64; display: inline-block;"></span></div> <h1 style="font-family: 'Fraunces', serif; font-size: 3.5rem; color: #f1ede6; margin-bottom: 1.5rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em;">{{HERO_HEADLINE}}</h1> <p style="font-family: 'Fraunces', serif; font-size: 1.35rem; font-weight: 400; color: rgba(241, 237, 230, 0.7); line-height: 1.7; max-width: 650px; margin: 0 auto;">{{HERO_SUBTITLE}}</p> </div> </section> <!-- WHAT THIS SKILL DOES --> <section style="background: #f1ede6; padding: 6rem 5%;"> <div style="max-width: 700px; margin: 0 auto;"> <div style="font-size: 0.9rem; color: #6b5d3e; letter-spacing: 2px; font-weight: 700; text-transform: uppercase; margin-bottom: 1rem;">The Skill</div> <h2 style="font-family: 'Fraunces', serif; font-size: 2.5rem; color: #0f2d3e; font-weight: 800; line-height: 1.15; margin-bottom: 1.5rem;">{{SKILL_DOES_HEADLINE}}</h2> <p style="font-size: 1.15rem; color: #64748b; line-height: 1.85; margin-bottom: 1.5rem;">{{SKILL_DOES_LEAD}}</p> <p style="font-size: 1rem; color: #334155; line-height: 1.85;">{{SKILL_DOES_CONTRAST}}</p> </div> </section> <!-- WHAT YOU GET BACK --> <section style="background: linear-gradient(135deg, #0f2d3e 0%, #3e666e 100%); color: #f1ede6; padding: 6rem 5%;"> <div style="max-width: 900px; margin: 0 auto;"> <div style="font-size: 0.9rem; color: #b79d64; letter-spacing: 2px; font-weight: 700; text-transform: uppercase; margin-bottom: 1rem;">What You Get Back</div> <h2 style="font-family: 'Fraunces', serif; font-size: 2.5rem; color: #f1ede6; font-weight: 800; line-height: 1.15; margin-bottom: 1rem;">{{OUTPUT_HEADLINE}}</h2> <p style="font-size: 1.15rem; color: rgba(241, 237, 230, 0.7); line-height: 1.85; margin-bottom: 3rem;">{{OUTPUT_LEAD}}</p> <!-- Repeat this block for each output section. Last row: remove margin-bottom. --> <div style="display: grid; grid-template-columns: 40px 170px 1fr; gap: 16px; align-items: baseline; padding: 20px 32px; border-left: 3px solid rgba(241,237,230,0.06); margin-bottom: 8px;"> <span style="font-family: 'Fraunces', serif; font-size: 1.3rem; font-weight: 700; color: #b79d64;">{{N}}</span> <span style="font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: #f1ede6;">{{SECTION_NAME}}</span> <span style="font-size: 0.875rem; color: rgba(241,237,230,0.7); line-height: 1.6;">{{SECTION_DESCRIPTION}}</span> </div> <!-- /output row --> </div> </section> <!-- SETUP --> <section style="background: #f7f5f0; padding: 6rem 5%;"> <div style="max-width: 700px; margin: 0 auto;"> <div style="font-size: 0.9rem; color: #6b5d3e; letter-spacing: 2px; font-weight: 700; text-transform: uppercase; margin-bottom: 1rem;">Setup</div> <h2 style="font-family: 'Fraunces', serif; font-size: 2.5rem; color: #0f2d3e; font-weight: 800; line-height: 1.15; margin-bottom: 1.5rem;">Install in Two&nbsp;Minutes</h2> <div style="background: rgba(183, 157, 100, 0.08); border-left: 3px solid #b79d64; padding: 1.75rem 2rem; margin: 2.5rem 0; border-radius: 4px;"> <ol style="padding-left: 24px; color: #334155; font-size: 0.95rem;"> <li style="margin-bottom: 10px; line-height: 1.7;">Open your preferred AI assistant</li> <li style="margin-bottom: 10px; line-height: 1.7;">Navigate to <strong style="color: #0f2d3e;">Settings</strong> or <strong style="color: #0f2d3e;">Custom Instructions</strong></li> <li style="margin-bottom: 10px; line-height: 1.7;">Upload or paste the skill file you downloaded&nbsp;below</li> <li style="margin-bottom: 10px; line-height: 1.7;">Save and start a new&nbsp;conversation</li> </ol> <p style="font-size: 0.8rem; color: #64748b; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(15, 45, 62, 0.1);">Works with any large language model. Setup steps vary slightly by platform &mdash; most support custom instructions or uploaded skill&nbsp;files.</p> </div> <h3 style="font-family: 'Fraunces', serif; font-size: 1.5rem; font-weight: 700; margin-top: 2.5rem; margin-bottom: 1.25rem; color: #0f2d3e;">Running It</h3> <p style="font-size: 1rem; color: #334155; line-height: 1.85; margin-bottom: 1.5rem;">Start a new conversation. Type <strong>&ldquo;{{TRIGGER_PHRASE}}&rdquo;</strong> and paste {{INPUT_DESCRIPTION}}.</p> <p style="font-size: 1rem; color: #334155; line-height: 1.85;">{{INPUT_TYPES_NOTE}}</p> </div> </section> <!-- DOWNLOAD --> <section id="download" style="background: linear-gradient(135deg, #0f2d3e 0%, #3e666e 100%); color: #f1ede6; padding: 6rem 5%; text-align: center;"> <div style="max-width: 700px; margin: 0 auto;"> <h2 style="font-family: 'Fraunces', serif; font-size: 2.5rem; color: #f1ede6; font-weight: 800; line-height: 1.15; margin-bottom: 1rem;">Get the Skill</h2> <p style="font-family: 'Fraunces', serif; font-size: 1.25rem; font-weight: 400; color: rgba(241, 237, 230, 0.7); max-width: 550px; margin: 0 auto 2.5rem; line-height: 1.7;">One file. Upload it to your AI assistant and you&rsquo;re&nbsp;set.</p> <a href="{{CLOUDINARY_URL}}" download="{{DOWNLOAD_FILENAME}}" style="display: inline-block; padding: 18px 48px; background: #b79d64; color: #0f2d3e; font-family: 'Montserrat', sans-serif; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; border-radius: 4px;">Download Skill File</a> <p style="font-size: 0.8rem; color: rgba(241, 237, 230, 0.5); margin-top: 1.25rem;">Works with any large language&nbsp;model.</p> </div> </section> <!-- TIPS --> <section style="background: #0f2d3e; color: #f1ede6; padding: 6rem 5%;"> <div style="max-width: 700px; margin: 0 auto;"> <div style="font-size: 0.9rem; color: #b79d64; letter-spacing: 2px; font-weight: 700; text-transform: uppercase; margin-bottom: 1rem;">Tips</div> <h2 style="font-family: 'Fraunces', serif; font-size: 2.5rem; color: #f1ede6; font-weight: 800; line-height: 1.15; margin-bottom: 2rem;">Get More From Every&nbsp;Run</h2> <!-- Repeat this block for each tip. Last tip: remove border-bottom. --> <div style="padding: 1.25rem 0; border-bottom: 1px solid rgba(241, 237, 230, 0.06);"> <strong style="display: block; font-weight: 600; color: #f1ede6; margin-bottom: 4px;">{{TIP_LABEL}}</strong> <span style="font-size: 0.95rem; color: rgba(241, 237, 230, 0.7); line-height: 1.7;">{{TIP_EXPLANATION}}</span> </div> <!-- /tip --> </div> </section> <!-- WHAT'S NEXT (Optional — include only if cross-sell content provided) --> <section style="background: #f1ede6; padding: 6rem 5%;"> <div style="max-width: 700px; margin: 0 auto;"> <div style="font-size: 0.9rem; color: #6b5d3e; letter-spacing: 2px; font-weight: 700; text-transform: uppercase; margin-bottom: 1rem;">What&rsquo;s Next</div> <h2 style="font-family: 'Fraunces', serif; font-size: 2.5rem; color: #0f2d3e; font-weight: 800; line-height: 1.15; margin-bottom: 1.5rem;">{{CROSS_SELL_HEADLINE}}</h2> <p style="font-size: 1.15rem; color: #64748b; line-height: 1.85; margin-bottom: 1.5rem;">{{CROSS_SELL_BODY_1}}</p> <p style="font-size: 1rem; color: #334155; line-height: 1.85; margin-bottom: 2rem;">{{CROSS_SELL_BODY_2}}</p> <div style="background: rgba(183, 157, 100, 0.08); border-left: 4px solid #b79d64; padding: 1.5rem 2rem; border-radius: 4px;"> <p style="font-size: 1rem; color: #334155; line-height: 1.7; margin-bottom: 0.75rem;">{{CROSS_SELL_CTA_CONTEXT}}</p> <p style="margin: 0;"><a href="{{CROSS_SELL_URL}}" style="color: #b79d64; font-weight: 600; text-decoration: none;">{{CROSS_SELL_CTA_TEXT}}&nbsp;&rarr;</a></p> </div> </div> </section> <!-- FOOTER — Meta compliant --> <footer style="background: #0f2d3e; padding: 2.5rem 5% 2rem; border-top: 3px solid #b79d64; text-align: center;"> <div style="max-width: 1400px; margin: 0 auto;"> <p style="font-size: 0.7rem; color: rgba(241, 237, 230, 0.35); line-height: 1.7; margin-bottom: 1.5rem; text-align: left;">This site is not a part of the Meta website or Meta Platforms, Inc. Additionally, this site is NOT endorsed by Meta in any way. FACEBOOK is a trademark of Meta Platforms, Inc.</p> <p style="font-size: 0.7rem; color: rgba(241, 237, 230, 0.35); line-height: 1.7; margin-bottom: 1.5rem; text-align: left;">{{SKILL_NAME}} is a free skill file for use with AI assistants. Your results will vary and depend on many factors, including but not limited to your background, experience, client base, and how you apply the tool. This is not a guarantee of any specific outcome.</p> <p style="font-size: 0.75rem; color: rgba(241, 237, 230, 0.45); margin-bottom: 1rem;">Practice Builders is a brand of Creating Your Plan &middot; 2026 &middot; All Rights Reserved</p> <p style="margin-bottom: 1.25rem; font-size: 0.8rem; color: #f1ede6;">Questions? <a href="mailto:kathryn@creatingyourplan.com" style="color: #b79d64; font-weight: 600; text-decoration: none;">kathryn@creatingyourplan.com</a></p> <p style="font-size: 0.75rem; margin-bottom: 0.75rem;"> <a href="https://creatingyourplan.com/privacy-policy" style="color: rgba(241, 237, 230, 0.4); text-decoration: none;">Privacy Policy</a> <span style="color: rgba(241, 237, 230, 0.2); margin: 0 0.5rem;">|</span> <a href="https://creatingyourplan.com/terms-of-service" style="color: rgba(241, 237, 230, 0.4); text-decoration: none;">Terms of Service</a> <span style="color: rgba(241, 237, 230, 0.2); margin: 0 0.5rem;">|</span> <a href="https://creatingyourplan.com/disclaimer" style="color: rgba(241, 237, 230, 0.4); text-decoration: none;">Disclaimer</a> </p> </div> </footer> </body> </html></code></pre> <hr> <h2>AOS Brand Variant</h2> <p>When building for AOS instead of CYP, make these substitutions throughout the template:</p> <table> <thead><tr><th style="text-align:left">Element</th><th style="text-align:left">CYP Value</th><th style="text-align:left">AOS Value</th></tr></thead> <tbody> <tr><td style="text-align:left">Body font-family</td><td style="text-align:left"><code>'Montserrat', sans-serif</code></td><td style="text-align:left"><code>'Inter', sans-serif</code></td></tr> <tr><td style="text-align:left">Heading font-family</td><td style="text-align:left"><code>'Fraunces', serif</code></td><td style="text-align:left"><code>'Cormorant Garamond', serif</code></td></tr> <tr><td style="text-align:left">Google Fonts import</td><td style="text-align:left">Fraunces + Montserrat</td><td style="text-align:left">Cormorant Garamond + Inter</td></tr> <tr><td style="text-align:left">Primary background</td><td style="text-align:left"><code>#0f2d3e</code></td><td style="text-align:left"><code>#1a1a1a</code></td></tr> <tr><td style="text-align:left">Gradient</td><td style="text-align:left"><code>#0f2d3e 0%, #3e666e 100%</code></td><td style="text-align:left"><code>#1a1a1a 0%, #2a2a2a 100%</code></td></tr> <tr><td style="text-align:left">Cream</td><td style="text-align:left"><code>#f1ede6</code></td><td style="text-align:left"><code>#f5f4f0</code></td></tr> <tr><td style="text-align:left">Off-white</td><td style="text-align:left"><code>#f7f5f0</code></td><td style="text-align:left"><code>#faf9f7</code></td></tr> <tr><td style="text-align:left">Text on dark</td><td style="text-align:left"><code>#f1ede6</code></td><td style="text-align:left"><code>#f5f4f0</code></td></tr> <tr><td style="text-align:left">Text on light</td><td style="text-align:left"><code>#334155</code></td><td style="text-align:left"><code>#4a5a6a</code></td></tr> <tr><td style="text-align:left">Muted text on light</td><td style="text-align:left"><code>#64748b</code></td><td style="text-align:left"><code>#8a8680</code></td></tr> <tr><td style="text-align:left">Muted text on dark</td><td style="text-align:left"><code>rgba(241, 237, 230, 0.7)</code></td><td style="text-align:left"><code>rgba(245, 244, 240, 0.85)</code></td></tr> <tr><td style="text-align:left">Scrollbar track</td><td style="text-align:left"><code>#0f2d3e</code></td><td style="text-align:left"><code>#1a1a1a</code></td></tr> <tr><td style="text-align:left">Header brand</td><td style="text-align:left">"Practice Builders" / "Kathryn Brown"</td><td style="text-align:left">"Advisory OS"</td></tr> <tr><td style="text-align:left">Header logo</td><td style="text-align:left">CYP white icon URL</td><td style="text-align:left">AOS gold icon URL</td></tr> <tr><td style="text-align:left">Website URL</td><td style="text-align:left">thepracticebuilders.ai</td><td style="text-align:left">advisoryos.ai</td></tr> <tr><td style="text-align:left">Footer entity</td><td style="text-align:left">"Practice Builders is a brand of Creating Your Plan"</td><td style="text-align:left">"Creating Your Plan"</td></tr> <tr><td style="text-align:left">Heading weight</td><td style="text-align:left">800</td><td style="text-align:left">600-700</td></tr> </tbody></table> <p>Gold accent <code>#b79d64</code> and gold-on-cream <code>#6b5d3e</code> remain the same across both brands.</p> <hr> <h2>Step 3: QC the Page</h2> <p>Run <code>04-delivery-page-quality.md</code> against the completed page.</p> <p><strong>Blocking checks to verify first:</strong></p> <ol> <li>Download button works (Cloudinary URL returns the .md file)</li> <li>Download attribute names the file correctly</li> <li><code>noindex, nofollow</code> meta tag present</li> <li>No LLM brand names anywhere</li> <li>No <code>var()</code> in any inline style</li> <li>No JavaScript</li> <li>Setup instructions are generic</li> <li>All output sections represented</li> </ol> <p>Fix all blocking failures before presenting.</p> <hr> <h2>Step 4: Deploy (Manual -- Kathryn)</h2> <ol> <li>Upload HTML to Convertri (or equivalent)</li> <li>Set the URL path</li> <li>Test: download works, layout correct on mobile, OG tags render in social previews</li> <li>Record the live URL -- DM sequence and email need it</li> </ol> <hr> <h2>Step 5: Deliver</h2> <p>Final file goes to the campaign folder: <code>content/business/marketing/campaigns/{{CAMPAIGN_NAME}}/</code></p> <p><strong>After first run of a new or updated kit:</strong></p> <ol> <li>Let the full production complete without interruption</li> <li>Compare output to the golden example</li> <li>Document every gap between actual and expected</li> <li>Fix the kit files -- not just the output</li> <li>Re-run and verify gaps are closed</li> </ol> <p>If you changed anything in the output by hand, run Mode 2 to update the kit so the change is permanent.</p> <hr> <h2>Delivery Checklist</h2> <p>Before presenting the page to Kathryn:</p> <ul> <li>[ ] Cloudinary URL tested -- downloads correct .md file</li> <li>[ ] Download attribute names the file correctly</li> <li>[ ] <code>noindex, nofollow</code> meta tag present</li> <li>[ ] OG tags present and accurate</li> <li>[ ] Logo loads correctly</li> <li>[ ] All output sections from skill file represented</li> <li>[ ] No LLM brand names anywhere on the page</li> <li>[ ] No <code>var()</code> in inline styles</li> <li>[ ] No JavaScript</li> <li>[ ] Setup instructions are generic (no platform names)</li> <li>[ ] CTA button text: "Download Skill File" (no hype)</li> <li>[ ] Meta compliance disclaimer in footer</li> <li>[ ] Results disclaimer in footer</li> <li>[ ] Legal links in footer (Privacy Policy, Terms of Service, Disclaimer)</li> <li>[ ] Responsive: readable at 840px and 640px breakpoints</li> <li>[ ] No horizontal scroll at any width</li> <li>[ ] Brand treatment matches target (CYP or AOS)</li> <li>[ ] Voice check: no forbidden terms from 02-terminology</li> <li>[ ] File saved to campaign folder</li> </ul> </article> <footer>Advisory OS · <span>Vault</span></footer> </body> </html>