Thought Leadership Article — Output Skill
What this produces: A fully styled, single-file HTML thought leadership article with embedded interactives. Advisory OS branded, client-facing, published at its own URL.
Output filename: {{topic-slug}}.html (lowercase, hyphens — e.g., proof-gap.html, politeness-premium.html)
Reference files:
03-article-golden-example-proof-gap.html— The Proof Gap. Diagnostic booking CTA, classic seven-movement architecture.03b-article-golden-example-politeness-premium.html— The Politeness Premium. Primary reference. System-teaching architecture, three interactives with emotional design, CTA versioning (diagnostic v3 + product v2). Consult this first for tone, density, interactive implementation, and prose patterns.
Build Process
Step 0: Read the Source Material
Before proposing anything, read the source material completely. Understand:
- What system, framework, or insight is being taught?
- What's the specific moment or pattern that makes this interesting?
- What assumption does the audience hold that this challenges?
- What would the reader do differently after reading this?
Do not summarize the source material. Find the insight inside it.
Step 1: Run the Intake
Walk through all seven intake decisions from 01-article-context.md. For each decision:
- Propose 2–3 options with rationale based on the source material
- Recommend one and explain why
- Wait for confirmation before moving to the next decision
Present the intake as a conversational sequence, not a form. Group related decisions when natural (e.g., brand + conversion goal can go together).
After all seven decisions are confirmed, produce the Concept Lock — a single summary block with every decision captured.
CONCEPT LOCK: [Campaign Name]
Brand: [Advisory OS / Creating Your Plan]
Conversion: [Product purchase $X / Diagnostic booking / Subscribe]
Core insight: [1-2 sentences]
Named mechanism: [Name] — [definition]
Title: [Locked title]
Interactives ([count]):
1. [Name] ([Function]) — [what it does]
2. [Name] ([Function]) — [what it does]
3. [Name] ([Function]) — [what it does]
Arc: [Section flow with labels]
Reframe: [Light / Medium / Heavy]
CTA: [Exact CTA text]Step 2: Build the First Pass
Build the complete HTML article from the Concept Lock. Follow this order:
- Head + CSS — Start from the CSS template below. Extend as needed for this article's interactives — the template covers structural elements; custom interactive styles will be added. Update the comment header with the topic name. CSS variables (
:root {}) are acceptable in single-file articles. - Navigation — Copy as-is. Update nav link labels to match this article's sections.
- Hero — Title, eyebrow, subtitle. One gold
word in the title. - Section-by-section — Follow the arc from the Concept Lock. For each section: eyebrow label → headline → prose → interactive (if this section has one) → interpretation prose.
- CTA — Match the conversion goal. See CTA patterns below.
- Footer — Copy as-is.
- React scripts — If using React interactives, add the script block after the footer.
Step 3: Verify You Actually Did the Work
The quality standards live in 04-article-quality.md. This step is not about what good looks like — it's about confirming you ran the process instead of skipping it.
Before presenting the first pass, answer every question below. If the answer to any question is "no," go back and do it. Do not deliver the article until every answer is "yes."
Did you run 04-article-quality.md?
- [ ] Did you open 04 and check every box, or did you skim it and assume you covered it?
- [ ] Did you extract ALL reader-facing text from the HTML (h1, h2, h3, p, big quotes, definition boxes, card titles, card text, CTA text, hero subtitle) and audit it line by line — or did you extract only some elements and miss others?
- [ ] Did you extract the interactive logic into a separate script and test it with real inputs, or did you assume it works because the code looks right?
Did you run copy-qc.md?
- [ ] Did you check every prose line for P1 patterns (twinning, mirror reversals, question→revelation arcs)?
- [ ] Did you check for correction-revelation family compounds — counting how many instances from Patterns 1/3/4/7 appear across the entire piece?
- [ ] Did you check for P2 patterns (three-beat lists, "Not because X. Because Y," formulaic setups, trying-to-be-quotable lines)?
- [ ] Did you read the piece out loud (or simulate reading it out loud) to check for AI cadence?
- [ ] If you found violations, did you rewrite them before delivering — or are you planning to "flag them as known weaknesses" and ship anyway?
Did you run linkedin-sentence-editor.md?
- [ ] Did you check R1 (end strong) on every sentence, or just the ones that caught your eye?
- [ ] Did you check R3 (economy) and R8 (adverbs) — scanning for "just," "really," "actually," "fundamentally," "genuinely," and cutting the ones that don't earn their place?
- [ ] Did you check R7 (two-comma rule) and split sentences that are doing too much?
Did you test the interactives?
- [ ] Did you extract the scoring/classification logic and run it through Node (or equivalent) with 4+ test scenarios — not just the happy path?
- [ ] Did you check that every input combination produces a specific, honest result — no vague defaults that catch misses in the logic?
- [ ] Did you verify there are no unreachable branches (conditions that can never fire because an earlier condition catches them first)?
The accountability question:
- [ ] If the person reviewing this article ran every check in 04, copy-qc.md, and linkedin-sentence-editor.md themselves, would they find violations you missed — or would your QC have caught everything they'd catch?
If the answer to that last question is "they'd find things I missed," you haven't finished the QC. Go back.
Step 4: Flag Known Weaknesses
After the first pass clears Step 3 — meaning all QC checks actually ran and all violations are fixed — flag editorial weaknesses. These are judgment calls about what could be stronger, not violations you found and shipped anyway.
Examples:
- "The Pattern section has one story. A second composite with escalating numbers would strengthen it."
- "The Decoder interaction is basic. More visual ceremony on reveal would help."
- "The Constraint section explains but doesn't create emotional pressure."
- "The prospect profile may be too easy to classify — consider making it more ambiguous."
Do not pretend the first pass is finished. Setting up the revision cycle is part of the job. But do not use this step to smuggle QC failures past the gate. If copy-qc.md found P1 violations, fix them before delivering — don't list them here as "known weaknesses."
Step 5: Revision Cycles
Receive editorial feedback. Rebuild what's called out. For each revision:
- Make the specific changes requested
- Note what else improved as a side effect
- Flag if a change created a new issue elsewhere
Expect 2–3 cycles before shipping.
CTA Patterns
Product Purchase CTA
<section class="cta-section" id="cta">
<div class="container" style="margin-bottom: 3rem;">
<p class="big-quote" style="border: none; padding: 0; color: #f5f4f0;">“{{Final anchor phrase with <em>gold emphasis</em>.}}”</p>
</div>
<div class="container">
<h2>{{Product Name — e.g., "Get the HQP Scoring System"}}</h2>
<p class="cta-sub">{{One sentence: what the product does and why they need it now.}}</p>
<a href="#" class="cta-button">{{Get the Toolkit · $27}}</a>
<p class="cta-subtext">{{Instant access · What's included · How long it takes}}</p>
</div>
</section>Diagnostic Booking CTA
<section class="cta-section" id="cta">
<div class="container" style="margin-bottom: 3rem;">
<p class="big-quote" style="border: none; padding: 0; color: #f5f4f0;">“{{Final anchor phrase with <em>gold emphasis</em>.}}”</p>
</div>
<div class="container">
<h2>Book a Systems Diagnostic</h2>
<p class="cta-sub">{{What the diagnostic finds and what they leave with — one sentence.}}</p>
<a href="https://calendly.com/kathryn-brown/systems-diagnostic" class="cta-button">Book a Diagnostic</a>
<p class="cta-subtext">60 minutes · Find the constraint · No obligation</p>
</div>
</section>Subscribe CTA
<section class="cta-section" id="cta">
<div class="container">
<h2>{{Promise of next piece — e.g., "Get the Next One"}}</h2>
<p class="cta-sub">{{What they'll get and why it matters.}}</p>
<a href="#" class="cta-button">Subscribe</a>
</div>
</section>CTA Versioning
When an article will ship with different CTAs at different lifecycle stages, build separate HTML files:
{{topic}}-v3.html— Launch version (typically diagnostic booking CTA){{topic}}-v2.html— Product version (toolkit purchase CTA, added when product is built){{topic}}-evergreen.html— Permanent version (may include both CTAs)
The article body is identical across versions. Only the CTA section changes. Name files with version numbers so the relationship is clear.
Section HTML Patterns
Navigation (Fixed — Same Every Article)
<nav>
<a href="https://advisoryos.ai" class="logo">
<img src="https://convertri.imgix.net/01a6df52-3d55-11ea-99fe-0697e5ca793e%2Ff71505a0b7be19fb31c9096f349bec5d235fcc3b%2FIcon-Gold.png?auto=compress,format&w=400" alt="Advisory OS">
<span class="logo-text">Advisory OS</span>
</a>
<div class="nav-links">
<a href="#{{section-id}}">{{Section Name}}</a>
<a href="#{{section-id}}">{{Section Name}}</a>
<a href="#{{section-id}}">{{Section Name}}</a>
</div>
</nav>Hero (Always Dark)
<section class="hero">
<div class="hero-inner">
<div class="hero-eyebrow">An Interactive Explainer</div>
<h1>{{Title with <em>gold word</em> and }}</h1>
<p class="hero-sub">{{Subtitle — one specific number or scene. One clean thought.}}</p>
</div>
</section>Prose Section (Cream, Off-White, or Dark)
<section class="{{cream|off-white|dark}}" id="{{section-id}}">
<div class="container">
<p class="section-eyebrow">{{Eyebrow Label}}</p>
<h2>{{Section Headline — Statement, Not Question}}</h2>
<p class="lead">{{Opening paragraph.}}</p>
<p>{{Body paragraphs. 2-4 sentences each. Last sentence hits hardest.}}</p>
</div>
</section>Section with Interactive
<section class="{{cream|off-white|dark}}">
<div class="container">
<p class="section-eyebrow">{{Eyebrow Label}}</p>
<h2>{{Section Headline}}</h2>
<p>{{Setup prose — what to look for and why it matters.}}</p>
</div>
<div class="container-wide">
<div class="viz-container" id="{{viz-id}}" style="height: auto; min-height: 380px;"></div>
</div>
<div class="container">
<p>{{Interpretation prose — what they just experienced and what it means.}}</p>
</div>
</section>Definition Box
<div class="definition-box">
<p><strong>{{Mechanism Name}}:</strong> {{Definition — tight enough to quote. Names something felt but never articulated.}}</p>
</div>Big Quote (Breathing Element)
<p class="big-quote" style="border: none; padding: 32px 0;">“{{Quote with <em>gold emphasis</em> on key word.}}”</p>Bridge Quote Between Continuous Dark Sections
Use background: #1e1e1e (flat color) on both adjacent dark sections to prevent a visible seam where two gradients meet. Do not use box-shadow, margin-top: -1px, or wrapper div hacks.
<section class="dark" style="padding-bottom: 0; background: #1e1e1e;">
<div class="container">
<p class="big-quote" style="border: none; padding: 32px 0;">“{{Bridge quote.}}”</p>
</div>
</section>
<section class="dark" style="padding-top: 48px; background: #1e1e1e;">
<!-- Next section content -->
</section>Comparison Table
<div class="container-wide" style="max-width: 700px;">
<table class="comparison-table" style="margin: 48px auto;">
<thead>
<tr>
<th style="border-color: rgba(26,26,26,0.1); color: #8a8680;">{{Column 1}}</th>
<th style="border-color: rgba(26,26,26,0.1); color: #8a8680;">{{Column 2}}</th>
</tr>
</thead>
<tbody>
<tr>
<td style="border-color: rgba(26,26,26,0.1); color: #4a5a6a;">{{Row}}</td>
<td style="border-color: rgba(26,26,26,0.1); color: #4a5a6a;">{{Row}}</td>
</tr>
<!-- Final row in gold -->
<tr>
<td style="border-color: rgba(26,26,26,0.1); color: #6b5d3e; font-weight: 500;">{{Answer}}</td>
<td style="border-color: rgba(26,26,26,0.1); color: #6b5d3e; font-weight: 500;">{{Answer}}</td>
</tr>
</tbody>
</table>
</div>Self-Assessment Cards
<div class="container-wide">
<div class="cards-grid">
<div class="card">
<div class="card-number">1</div>
<div class="card-title">{{Question that mirrors the reader}}</div>
<div class="card-text">{{Description of this recognizable state.}}</div>
</div>
<div class="card">
<div class="card-number">2</div>
<div class="card-title">{{Question}}</div>
<div class="card-text">{{Description.}}</div>
</div>
<div class="card">
<div class="card-number">3</div>
<div class="card-title">{{Question}}</div>
<div class="card-text">{{Description.}}</div>
</div>
</div>
</div>Footer (Fixed — Same Every Article)
<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>
<a href="https://creatingyourplan.com" target="_blank">Creating Your Plan</a>
</div>
<p class="footer-legal">© 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> | <a href="https://creatingyourplan.com/disclaimer" target="_blank">Disclaimer</a></p>
</footer>Full CSS Template
Copy this entire style block into the . Update only the comment header with the topic name.
/* =============================================
ADVISORY OS - {{TOPIC NAME UPPERCASE}}
Thought Leadership Interactive Narrative
HEX CODES (exact):
- 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
============================================= */
: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;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #1a1a1a; }
::-webkit-scrollbar-thumb { background: #b79d64; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #c4aa74; }
html { scrollbar-width: thin; scrollbar-color: #b79d64 #1a1a1a; }
body {
font-family: 'Inter', -apple-system, sans-serif;
background: #f5f4f0;
color: #1a1a1a;
line-height: 1.6;
overflow-x: hidden;
}
h1, h2, h3, h4 { font-family: 'Cormorant Garamond', serif; font-weight: 400; }
strong { font-weight: 500; }
/* === NAVIGATION === */
nav {
position: fixed;
top: 0;
width: 100%;
background: rgba(26,26,26,0.95);
backdrop-filter: blur(10px);
border-bottom: 3px solid #b79d64;
padding: 20px 5%;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 100;
}
.logo {
display: flex;
align-items: center;
gap: 1rem;
text-decoration: none;
}
.logo img { height: 40px; width: auto; }
.logo-text {
font-family: 'Cormorant Garamond', serif;
font-size: 1.75rem;
font-weight: 500;
color: #f5f4f0;
letter-spacing: 0.02em;
}
.nav-links { display: flex; gap: 2rem; }
.nav-links a {
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.15em;
text-transform: uppercase;
color: #8a8680;
text-decoration: none;
transition: color 0.3s ease;
}
.nav-links a:hover { color: #b79d64; }
/* === HERO === */
.hero {
min-height: 85vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 140px 5% 100px;
background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
color: #f5f4f0;
}
.hero-inner { max-width: 800px; margin: 0 auto; }
.hero-eyebrow {
font-family: 'Inter', sans-serif;
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #b79d64;
margin-bottom: 1.5rem;
display: inline-flex;
align-items: center;
gap: 1rem;
}
.hero-eyebrow::before,
.hero-eyebrow::after {
content: '';
width: 40px;
height: 1px;
background: #b79d64;
}
.hero h1 {
font-size: clamp(2.75rem, 6vw, 4.5rem);
color: #f5f4f0;
line-height: 1.1;
margin-bottom: 1.5rem;
letter-spacing: -0.02em;
}
.hero h1 em { font-style: italic; color: #b79d64; }
.hero-sub {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(1.15rem, 2.5vw, 1.5rem);
color: #8a8680;
line-height: 1.7;
max-width: 650px;
margin: 0 auto;
}
/* === SECTIONS === */
section { padding: 100px 5%; scroll-margin-top: 80px; }
section.dark { background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%); color: #f5f4f0; }
section.cream { background: #f5f4f0; color: #1a1a1a; }
section.off-white { background: #faf9f7; color: #1a1a1a; }
.container { max-width: 700px; margin: 0 auto; }
.container-wide { max-width: 900px; margin: 0 auto; }
.section-eyebrow {
font-family: 'Inter', sans-serif;
font-size: 0.65rem;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #6b5d3e;
margin-bottom: 1rem;
}
section.dark .section-eyebrow { color: #b79d64; }
section h2 {
font-size: clamp(2rem, 4vw, 2.75rem);
line-height: 1.15;
margin-bottom: 1.5rem;
letter-spacing: -0.01em;
}
section.dark h2 { color: #f5f4f0; }
section.cream h2, section.off-white h2 { color: #1a1a1a; }
section h3 {
font-size: 1.5rem;
font-weight: 500;
margin-top: 2.5rem;
margin-bottom: 1.25rem;
}
section.dark h3 { color: #f5f4f0; }
section p {
font-size: 1rem;
font-weight: 400;
line-height: 1.85;
margin-bottom: 1.5rem;
}
section.cream p, section.off-white p { color: #4a5a6a; }
section.dark p { color: rgba(245,244,240,0.85); }
.lead { font-size: 1.15rem; color: #8a8680; }
section.dark .lead { color: rgba(245,244,240,0.7); }
/* === BIG QUOTE === */
.big-quote {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(1.5rem, 3.5vw, 2.25rem);
font-style: italic;
line-height: 1.4;
text-align: center;
padding: 3rem 5%;
max-width: 700px;
margin: 0 auto;
border-top: 1px solid rgba(26,26,26,0.1);
border-bottom: 1px solid rgba(26,26,26,0.1);
}
section.dark .big-quote { border-color: rgba(245,244,240,0.1); }
.big-quote em { font-style: normal; color: #6b5d3e; }
section.dark .big-quote em { color: #c4aa74; }
/* === DEFINITION BOX === */
.definition-box {
background: rgba(183,157,100,0.08);
border-left: 3px solid #b79d64;
padding: 1.75rem 2rem;
margin: 2.5rem 0;
}
section.dark .definition-box {
background: rgba(245,244,240,0.04);
}
.definition-box p { margin-bottom: 12px; }
.definition-box p:last-child { margin-bottom: 0; }
/* === VIZ CONTAINER === */
.viz-container {
background: #1a1a1a;
border: 1px solid rgba(245,244,240,0.1);
margin: 48px 0;
min-height: 380px;
overflow: hidden;
}
section.dark .viz-container {
background: rgba(245,244,240,0.03);
}
/* === COMPARISON TABLE === */
.comparison-table {
width: 100%;
margin: 48px 0;
border-collapse: collapse;
}
.comparison-table th,
.comparison-table td {
padding: 20px 24px;
text-align: left;
border-bottom: 1px solid rgba(245,244,240,0.1);
}
.comparison-table th {
font-size: 11px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: rgba(245,244,240,0.5);
font-weight: 500;
}
/* === CARDS GRID === */
.cards-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin: 48px 0;
}
.card {
background: rgba(245,244,240,0.03);
border: 1px solid rgba(245,244,240,0.1);
padding: 32px;
transition: all 0.3s ease;
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 40px -15px rgba(0,0,0,0.2);
}
.card-number {
font-family: 'Cormorant Garamond', serif;
font-size: 3rem;
font-weight: 300;
color: #b79d64;
opacity: 0.4;
margin-bottom: 16px;
}
.card-title {
font-family: 'Cormorant Garamond', serif;
font-size: 1.35rem;
font-weight: 500;
margin-bottom: 12px;
color: #f5f4f0;
}
.card-text {
font-size: 15px;
color: #8a8680;
line-height: 1.7;
}
/* === CTA SECTION === */
.cta-section {
background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
color: #f5f4f0;
text-align: center;
padding: 100px 5%;
}
.cta-section h2 {
color: #f5f4f0;
margin-bottom: 1.5rem;
}
.cta-sub {
font-family: 'Cormorant Garamond', serif;
font-size: 1.25rem;
color: rgba(245,244,240,0.7);
max-width: 550px;
margin: 0 auto 2.5rem;
line-height: 1.7;
}
.cta-button {
display: inline-block;
padding: 18px 48px;
background: #b79d64;
color: #1a1a1a;
font-family: 'Inter', sans-serif;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
text-decoration: none;
transition: all 0.3s ease;
}
.cta-button:hover {
background: #c4aa74;
transform: translateY(-2px);
}
.cta-subtext {
font-size: 0.8rem;
color: #8a8680;
margin-top: 1.25rem;
}
/* === FOOTER === */
footer {
padding: 48px 5%;
background: #1a1a1a;
border-top: 3px solid #b79d64;
text-align: center;
}
.footer-links {
display: flex;
justify-content: center;
gap: 2rem;
margin-bottom: 1.5rem;
flex-wrap: wrap;
}
.footer-links a {
font-size: 0.75rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #8a8680;
text-decoration: none;
transition: color 0.3s;
}
.footer-links a:hover { color: #b79d64; }
.footer-legal {
font-size: 0.7rem;
color: rgba(138,134,128,0.6);
line-height: 1.8;
}
.footer-legal a {
color: rgba(138,134,128,0.6);
text-decoration: none;
}
/* === RESPONSIVE === */
@media (max-width: 768px) {
.nav-links { display: none; }
.cards-grid { grid-template-columns: 1fr; }
.hero { padding: 120px 5% 80px; }
section { padding: 80px 5%; }
}Head Template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{Article Title}} | Advisory OS</title>
<meta name="description" content="{{One-sentence description for search and social.}}">
<meta property="og:title" content="{{Article Title}} | Advisory OS">
<meta property="og:description" content="{{Short description.}}">
<meta property="og:type" content="website">
<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=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<style>
{{FULL CSS FROM TEMPLATE ABOVE}}
</style>
</head>React Interactive Template
<script>
var e = React.createElement;
var useState = React.useState;
var useEffect = React.useEffect;
var useRef = React.useRef;
var GOLD = "#b79d64";
var GOLD_LIGHT = "#c4aa74";
var CHARCOAL = "#1a1a1a";
var DEEP_CHARCOAL = "#2a2a2a";
var CREAM = "#f5f4f0";
var STONE = "#8a8680";
var SLATE = "#4a5a6a";
// Component 1
function {{ComponentName}}() {
// Build using React.createElement, not JSX
// Use useState for state, not class components
// All styles inline as objects
}
// Mount
ReactDOM.render(e({{ComponentName}}), document.getElementById('{{viz-id}}'));
</script>Common First-Pass Mistakes to Avoid
| Mistake | What to Do Instead |
|---|---|
| Reorganizing source material into sections without original thinking | Find the insight inside the material. Name something no one else is naming. |
| Named mechanism pulled from source material's existing language | Synthesize: find the operational principle, identify the cost pattern, name the cost. "The Politeness Premium" doesn't appear in the HQP Playbook — it was synthesized from "score behaviors not words." |
| Three interactives that all say the same thing in different UIs | Each interactive must do different cognitive work AND create a different emotional response. |
| Interactives with obvious answers | Build ambiguity in. The simulator prospect should be genuinely hard to score. The decoder reveals should contradict expectations. Comfort is the enemy of persuasion. |
| Embedding a calculator inside the article | Calculators are standalone micro-tools. Article interactives visualize, decode, simulate, or mirror. |
| Definition box that describes a problem everyone knows | Definition box must name a mechanism — give language to something felt but never articulated. Test: would a reader use this phrase in conversation with a colleague? |
| Constraint section that explains instead of creating pressure | Use time compression. Walk the reader through their own knowledge decaying in accelerating beats. Start at "tomorrow morning," end at "back where you started." |
| Bridge quote that teaches instead of validating | Bridge quotes name what the reader is already feeling. "They showed you who they were" mirrors the recognition the Pattern section created. |
| Self-assessment cards as three independent questions | Cards follow an arc: mirror → confrontation → possibility. Each builds on the previous. |
| Paragraphs that make three points at once | Each paragraph does one thing. Break it up. Last sentence hits hardest. |
| One-pass delivery with no flagged weaknesses | Always flag what needs work. The first pass is the start, not the finish. |
| CTA that doesn't match the conversion goal | Product purchase, diagnostic booking, and subscribe each have completely different CTA architecture. Also consider whether the article needs CTA versioning. |
| Delivering without running copy-qc.md | Extract the prose from the HTML. Check every line against every pattern. Fix P1 and P2 violations before delivering. This is not optional — it's the most common skip and it produces the most visible failures. |
| Delivering without running linkedin-sentence-editor.md | Check R1 (end strong), R3 (economy), R7 (two-comma), R8 (adverbs) on every sentence. Tighten before delivering. |
| "Flagging" QC violations as known weaknesses instead of fixing them | If copy-qc.md found twinning, fix the twinning. If the interactive logic has unreachable branches, fix the logic. Step 4 is for editorial judgment calls, not for shipping violations with a disclaimer. |
| Assuming interactive logic works because the code looks right | Extract the scoring function. Run it through Node with all input combinations. Check for unreachable branches, vague defaults, and edge cases. Visual inspection is not testing. |