Skill Delivery Page Kit — Start Here
What This Kit Does
This kit produces an HTML landing page where recipients download a free Claude skill. One page, one purpose: deliver the skill with context, setup instructions, and series framing. The page uses the AOS Interactive Narrative design system.
The delivery page is where DMs and emails point to. It's the hub between "I want it" and "I'm running it."
What It Produces
| # | Asset | Format | Purpose |
|---|---|---|---|
| 1 | Delivery Page | .html | Landing page — download + setup + what it does + series framing |
Prerequisites
The delivery page depends on upstream assets:
| Dependency | Why | Blocking? |
|---|---|---|
| Skill file (from Skill Build Kit) | Page describes the skill's output sections, trigger phrase, input requirements | Yes |
| Cloudinary URL | Download button links to hosted .md file | Yes |
| Quick-start guide | Setup section mirrors the quick-start content | Yes |
| Series plan | "Coming Next" section requires knowledge of other skills in the series | No — can use placeholder |
Do not build the delivery page until the skill file is tested and the Cloudinary URL is live.
Page Architecture
9 sections, each with a specific background and job:
| # | Section | Background | Job |
|---|---|---|---|
| 1 | Nav | Fixed, blur | Logo + anchor links (nav-links pattern, NOT nav-cta) |
| 2 | Hero | Dark (charcoal gradient) | Eyebrow + headline + subtitle |
| 3 | What This Skill Does | Cream | 3 jobs the skill performs — from the skill's "What This Skill Does" section |
| 4 | What You Get Back | Dark | Output sections listed — from the skill's section-by-section spec |
| 5 | Setup | Off-white | Setup block with numbered steps — from the quick-start |
| 6 | CTA / Download | Dark | Download button (Cloudinary link) + one-line setup summary |
| 7 | Tips | Dark | 3-4 usage tips from testing — bold label + explanation |
| 8 | Series | Cream | Series framing — other skills in the series |
| 9 | Footer | Dark | Links + copyright |
Design System
This page uses the AOS Interactive Narrative design system. Full kit: content/frameworks/kit-aos-interactive-narrative/
Quick Reference
| Element | Value |
|---|---|
| Headings | Cormorant Garamond, serif (400, 500, 600) |
| Body | Inter, sans-serif (300, 400, 500, 600) |
| Gold | #b79d64 |
| Gold Light | #c4aa74 |
| Gold Dark | #a08a58 |
| Gold on Cream | #6b5d3e (eyebrows on light backgrounds) |
| Charcoal | #1a1a1a |
| Deep Charcoal | #2a2a2a |
| Cream | #f5f4f0 |
| Off-White | #faf9f7 |
| Stone | #8a8680 |
| Slate | #4a5a6a |
| Hero | Centered, 85vh min-height, inline-flex eyebrow with gold lines |
| Nav | Fixed, backdrop-filter blur, nav-links (text anchors, not gold button) |
| Sections | Alternating cream/dark/off-white, padding 100px 5% |
| Container | 700px (standard), 900px (wide) |
| Dark section text | rgba(245,244,240,0.85) for paragraphs |
| Light section text | #4a5a6a (slate) for paragraphs |
| Section eyebrow (light) | #6b5d3e (gold-on-cream) |
| Section eyebrow (dark) | #b79d64 (gold) |
CSS Variables
:root {
--gold: #b79d64; --gold-light: #c4aa74; --gold-dark: #a08a58;
--gold-on-cream: #6b5d3e; --charcoal: #1a1a1a; --deep-charcoal: #2a2a2a;
--cream: #f5f4f0; --off-white: #faf9f7; --stone: #8a8680; --slate: #4a5a6a;
}Logo URL
https://convertri.imgix.net/01a6df52-3d55-11ea-99fe-0697e5ca793e%2Ff71505a0b7be19fb31c9096f349bec5d235fcc3b%2FIcon-Gold.png?auto=compress,format&w=400File Inventory
| File | Purpose | When to Use |
|---|---|---|
00-skill-delivery-page-start-here.md | Orientation — architecture, design system, dependencies | Start here every time |
01-skill-delivery-page-context.md | Required inputs | Before every build — complete inputs first |
02-skill-delivery-page-terminology.md | Locked vocabulary for delivery pages | Reference when writing copy |
03-skill-delivery-page-golden-example.md | CSS architecture details + pointers to golden example HTML | Study before building |
04-skill-delivery-page-quality.md | QC checklist — design system match, responsiveness, content | Run after every build |
05-skill-delivery-page-output-skill.md | Production workflow — section by section | Follow for every build |
Relationship to Other Kits
AOS Interactive Narrative Kit (content/frameworks/kit-aos-interactive-narrative/): The design system source. Read the golden example there for CSS architecture patterns beyond what's documented here.
Skill Build Kit (content/frameworks/kit-skill-build/): The skill file and quick-start guide are upstream dependencies. The delivery page's content comes from the skill's spec.
Handraiser Post Kit (content/frameworks/kit-handraiser-post/): The post drives traffic to this page via DMs. No direct dependency, but the page must be live before DMs are sent.
business-aos (Connected Repo): Voice and audience references. Load voice before writing page copy.
Golden Standard Reference
The Client Intelligence Brief delivery page is the golden example: content/business/marketing/campaigns/practice-command-center/client-intelligence-brief-skill.html