Bible Study Webpage

Bible Study Webpage

What this skill does

Creates a premium, fully-written, brand-matched HTML research page on any faith/Bible topic. Uses the 8-section "American Christian" format.

The template is bundled at assets/template.html. Never reference it by absolute path — the skill runs in Claude Code, claude.ai, and Cowork, and the directory resolves differently in each.

Finished pages are saved to the current working directory by default (or ask the user where to save).

Step 1 — Gather inputs

1. Topic — e.g. "envy", "pride", "anger", "forgiveness", "anxiety"
   • If not provided, ask for the topic.
2. Quote (optional) — becomes a pull-quote in the Three Points section.
3. Topic slug — kebab-case filename:
   • "Greed" → greed-is-a-sin.html
   • "Dealing with Anxiety" → dealing-with-anxiety.html
   • "The Sin of Pride" → why-pride-comes-before-the-fall.html

Step 2 — Research the topic

Gather content for all 8 sections:

A. Headline

Frame as a question: "Why Does God Say That [Topic] Is a Sin?"

B. One-sentence thesis (≤ 40 words)

Arresting summary of the unified theological answer. Non-obvious. Model: "Eight centuries of theological wisdom converge on one truth: gossip is not a harmless habit — it is an assault on love, an expression of pride, and an act of violence against image-bearers of God."

C. Hook (2–3 sentences)

A relatable opening line everyone recognizes, then pivot: "But why?"

D. Three Points — "Three Reasons God Forbids [Topic]"

Each point requires:

• A punchy heading (e.g. "Greed Is Idolatry — Not Just Irresponsibility")
• 2–3 sentences of theological explanation
• One anchor Bible verse (full text + reference)
• 2–3 theologian references with brief paraphrases
• One bold takeaway: "God says [topic] is a sin because…"
• One pull-quote with author + book title

The Three Points must be surprising and non-obvious — give the reader a fresh theological lens, not just "the Bible says so."

E. Deeper Dive — 6–8 theologians

Per entry: author, book, 2–3 sentence summary, 2–3 direct quotes with labels, 3–5 scripture references.

Preferred pool: Thomas Aquinas, Augustine, C.S. Lewis, Dietrich Bonhoeffer, John Wesley, Richard Baxter, Jerry Bridges, A.W. Tozer, Tim Keller, John Piper, Matthew Mitchell, N.T. Wright, J.I. Packer, Spurgeon, Jonathan Edwards.

F. Key Scripture Grid — 10–12 verses

Each: reference + one-line summary.

G. Practical Application — 7 steps

What to do instead. Each step: bold heading, 2–3 sentences, one verse.

H. Final Challenge — 3 gut-check questions

Step 3 — Build the HTML file

Method

1. Read assets/template.html (relative to this skill's directory) as the base template.
2. Write a Python script that copies that file and replaces only the text inside the <!-- CONTENT:xxx --> … <!-- /CONTENT:xxx --> blocks.
3. Use this regex pattern (handles comments with extra text):

   pattern = rf'(<!-- CONTENT:{re.escape(key)}.*?-->).*?(<!-- /CONTENT:{re.escape(key)} -->)'
   

4. Also replace <title>, meta description, og:title, og:description, and the PDF_FILENAME JS variable.
5. Save [slug].html to the current working directory by default, or to a location the user specifies. Do not hardcode an absolute output path.

CONTENT blocks to replace

HTML components reference

Verse block:

<div class="verse">"Verse text here."<span class="ref">Book 1:2</span></div>

Pull-quote block:

<div class="pull"><blockquote>"Quote text."<cite>— Author, <em>Book Title</em></cite></blockquote></div>

Theologian accordion entry:

<details>
  <summary><span><span class="who">Name</span><span class="src">Book Title</span></span><span class="plus">+</span></summary>
  <div class="dd-body">
    <p>Summary paragraph.</p>
    <div class="dd-quote"><span class="lbl">Label</span>"Direct quote."</div>
    <div class="dd-quote"><span class="lbl">Label</span>"Direct quote."</div>
    <p class="refs"><b>References:</b> Verse · Verse · Verse</p>
  </div>
</details>

Scripture card:

<div class="scard"><div class="ref">Book 1:2</div><p>One-line summary</p></div>

Practical step:

<div class="step"><div class="n">1</div><div>
  <h3>Step Title</h3>
  <p>2–3 sentences of guidance.</p>
  <div class="verse">"Verse text."<span class="ref">Book 1:2</span></div>
</div></div>

Step 4 — Design rules (never change)

The visual design lives in the <style> block of the template. Do not modify it. Brand tokens:

• Background: #0a0b0c (near-black)
• Gold accent: #e3af4a
• Body text: #d7d9dd
• Headlines: #f4f1ea (warm off-white)
• Fonts: Satoshi (body), Bodoni Moda (serif headlines)

Step 5 — Deliver

1. Run the Python build script to write the file.
2. Tell the user where the file was saved (print the output path). If the environment supports it and the user is on macOS, you may optionally open it with open "[slug].html"; otherwise just report the path so they can open it themselves.
3. Report:
   • Filename and location
   • One-line summary of the Three Points
   • Confirm the "Download as PDF" button is live
   • Invite feedback before building the next topic

Quality bar

• Depth: real theologian quotes, not paraphrases
• Scripture: cite chapter and verse; use actual NIV or ESV text
• Tone: reverent, serious, intellectually honest — not preachy or listicle
• Length: each Point ≥ 150 words; each theologian entry ≥ 2 direct quotes
• Originality: Three Points must give a fresh theological lens

Example invocations

• Make a Bible study page for pride
• Build a webpage on forgiveness
• Create a research page for anxiety
• Bible study webpage — anger, with this quote: "In your anger do not sin"
• Make an American Christian page for lust