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

Skill Delivery Page Kit — Production Workflow

How to Use This Skill

Follow this workflow in order. Complete the context inputs (01-context.md) before starting. The skill file and Cloudinary URL must be confirmed before building.

Step 1: Gather Inputs

Open 01-skill-delivery-page-context.md and fill in every field.

Load before building:

business-aos/reference/core/voice.md — tone, cadence, vocabulary
content/frameworks/kit-aos-interactive-narrative/ — full design system reference
03-skill-delivery-page-golden-example.md — CSS architecture to match
The golden example HTML: content/business/marketing/campaigns/practice-command-center/client-intelligence-brief-skill.html

Validation gate: Do not proceed until:

Skill file is complete and tested
Cloudinary URL is live and downloads correctly
URL slug is confirmed
Output sections are listed

Step 2: Scaffold the HTML

Produces: [skill-name]-skill.html

Start with the golden example's HTML structure. Copy the full CSS from the golden example — the design system is locked. Change only the content, not the styling.

Head

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>[Skill Name] — Free Claude Skill | Advisory OS</title>
    <meta name="description" content="[OG description from context]">
    <meta property="og:title" content="[OG title from context]">
    <meta property="og:description" content="[OG description from context]">
    <meta property="og:type" content="website">
    <!-- Google Fonts: Cormorant Garamond + Inter -->
    <!-- Full CSS from golden example -->
</head>

Navigation

<nav>
    <a href="https://advisoryos.ai" class="logo">
        <img src="[logo URL from golden example]" alt="Advisory OS">
        <span class="logo-text">Advisory OS</span>
    </a>
    <div class="nav-links">
        <a href="#skill">The Skill</a>
        <a href="#setup">Setup</a>
        <a href="#download">Download</a>
    </div>
</nav>

Nav links are anchor links to page sections. Adjust anchor names to match the skill's sections. Always include: The Skill, Setup, Download.

Step 3: Build the Hero

<section class="hero">
    <div class="hero-inner">
        <div class="hero-eyebrow">[Eyebrow — e.g., "Free Claude Skill"]</div>
        <h1>[Skill Name]</h1>
        <p class="hero-sub">[Subtitle — one sentence positioning]</p>
    </div>
</section>

Background: dark charcoal gradient
Centered, 85vh minimum
Eyebrow with inline-flex gold lines
H1 is the skill name, nothing else
Subtitle is the skill's positioning line, slightly warmer than the skill file version

Step 4: Build "What This Skill Does"

<section class="cream" id="skill">
    <div class="container">
        <p class="section-eyebrow">The Skill</p>
        <h2>[Headline — short, punchy, uses &nbsp; for line-break control]</h2>
        <p class="lead">[What the user does (paste X) and what they get back (Y). One paragraph.]</p>
        <p>[Contrast line — "Not a summary. An analysis." What makes this different in one sentence.]</p>
    </div>
</section>

Pull content from the skill file's "What This Skill Does" section. Adapt for page voice — slightly warmer, still direct.

Step 5: Build "What You Get Back"

<section class="dark" id="output">
    <div class="container-wide">
        <p class="section-eyebrow">What You Get Back</p>
        <h2>[Headline — e.g., "Eight Sections. Zero&nbsp;Guesswork."]</h2>
        <p class="lead">[One sentence framing.]</p>

        <div style="margin-top: 48px;">
            <div class="output-row">
                <span class="num">1</span>
                <span class="name">[Section Name]</span>
                <span class="desc">[One-line description]</span>
            </div>
            <!-- Repeat for each output section -->
        </div>
    </div>
</section>

One output-row per section from the skill's section-by-section spec. Use .container-wide (900px) for this section. Description is one line — what the section surfaces, not how it works.

Step 6: Build "Setup"

<section class="off-white" id="setup">
    <div class="container">
        <p class="section-eyebrow">Setup</p>
        <h2>Install in Two&nbsp;Minutes</h2>

        <div class="setup-block">
            <ol>
                <li>Go to <strong>claude.ai</strong></li>
                <li>Click your name in the bottom-left corner</li>
                <li>Click <strong>Settings</strong></li>
                <li>Click <strong>Skills</strong> in the left sidebar</li>
                <li>Click the <strong>+</strong> button</li>
                <li>Upload the skill file you downloaded below</li>
                <li>Toggle the skill <strong>on</strong></li>
            </ol>
            <p class="note">First time using skills? You may need to enable Code execution first: Settings &rarr; Capabilities &rarr; toggle on &ldquo;Code execution and file creation.&rdquo; Skills require a Claude Pro account or higher.</p>
        </div>

        <h3>Running It</h3>
        <p>Start a new conversation. Type <strong>&ldquo;[Trigger phrase]&rdquo;</strong> and paste [input description].</p>
        <p>[One sentence about what input types work.]</p>
    </div>
</section>

Setup steps are standardized — they're the same for every skill. Only the trigger phrase and input description change.

Step 7: Build CTA / Download

<section class="cta-section" id="download">
    <div class="container">
        <h2>Get the Skill</h2>
        <p class="cta-sub">One file. Upload it to Claude and you&rsquo;re&nbsp;set.</p>
        <a href="[Cloudinary URL]" class="cta-button" download="[skill-name].md">Download Skill File</a>
        <p class="cta-subtext">Works with Claude and any LLM that accepts custom instructions.</p>
    </div>
</section>

Critical: The download attribute names the file for the user. The href points to the Cloudinary raw URL. Test the download — confirm the file saves with the correct name.

Step 8: Build Tips

<section class="dark" id="tips">
    <div class="container">
        <p class="section-eyebrow">Tips</p>
        <h2>Get More From Every&nbsp;Run</h2>

        <div class="tip-item">
            <strong>[Tip label.]</strong>
            <span>[Explanation — one sentence.]</span>
        </div>
        <!-- Repeat for 3-4 tips -->
    </div>
</section>

Tips come from the quick-start guide's testing tips. Adapt for page format (bold label + span, not markdown bullets).

Step 9: Build Series Section

<section class="cream" id="series">
    <div class="container">
        <p class="section-eyebrow">[Series position — e.g., "Skill 1 of 5"]</p>
        <h2>[Series Name]</h2>
        <p class="lead">[One sentence — what the series is for.]</p>

        <ul class="series-list">
            <li class="current">[Current skill] &mdash; [one-line description]</li>
            <li class="upcoming">[Next skill] &mdash; [one-line description]</li>
            <!-- Repeat for remaining skills -->
        </ul>
        <p class="series-note">[Forward-looking note — e.g., "Follow along on LinkedIn..."]</p>
    </div>
</section>

Step 10: Build Footer

<footer>
    <div class="footer-links">
        <a href="https://advisoryos.ai/contact">Contact</a>
        <a href="https://www.linkedin.com/in/itskathrynbrown/" target="_blank">LinkedIn</a>
        <a href="https://substack.com/@kathrynhbrown" target="_blank">Substack</a>
    </div>
    <p class="footer-legal">&copy; 2026 Creating Your Plan. All rights reserved. | <a href="https://creatingyourplan.com/privacy-policy" target="_blank">Privacy Policy</a> | <a href="https://creatingyourplan.com/terms-of-service" target="_blank">Terms of Service</a></p>
</footer>

Footer is standardized — same across all delivery pages.

Step 11: QC

Run 04-skill-delivery-page-quality.md against the page.

Blocking checks:

Download works (Cloudinary URL returns the .md file)
Download attribute names the file correctly
CSS variables match golden example exactly
No mention of price, Intensive, or paid offers
Mobile responsive at 768px and 480px

Fix all failures before deploying.

Step 12: Deploy (Manual — Kathryn)

Upload HTML to Convertri (or equivalent)
Set the URL slug (e.g., /client-intelligence-brief-skill)
Test: download works, layout correct on mobile, OG tags render in social previews
Record the live URL — DM sequence and email need it

Step 13: Deliver

Final file: [skill-name]-skill.html

Goes to the campaign folder (e.g., content/business/marketing/campaigns/[campaign-name]/).