Scenario library

Design system — mandatory on all HTML artifacts

Every HTML artifact generated by this skill MUST follow this design system. No exceptions. Never invent colours, never use dark backgrounds, never use purple or blue as primary backgrounds.

Palette:

• Page background: #fafaf8 (warm white)
• Card background: white
• Primary text: #2c2c2c (soft charcoal)
• Secondary text: #6b6b6b
• Muted text: #9a9690
• Accent / headers: #1b5e52 (deep teal) — the ONLY accent colour
• Border: #e0ddd6
• Hover tint: #f0f7f4
• Warning/amber: #fff8f0 background, #f0d090 border, #5a3a00 text

Typography:

• Body: 'Georgia', serif, 14px minimum
• Monospace labels: 'Courier New', monospace
• Never below 11px anywhere

Component rules:

• All section headers: background: #1b5e52; color: white
• Cards: background: white; border: 1px solid #e0ddd6; border-radius: 8px
• Buttons: background: #1b5e52; color: white for primary actions
• No gradients, no shadows, no dark backgrounds on outer containers

Pill colour system:

• Global company: background:#e6f1fb; color:#0c447c; border:0.5px solid #85b7eb
• India listed: background:#eaf3de; color:#27500a; border:0.5px solid #97c459
• India private: background:#faeeda; color:#633806; border:0.5px solid #ef9f27
• Flagged: background:#fcebeb; color:#791f1f; border:0.5px solid #f09595
• Neutral segment: background:#f3f4f6; color:#374151; border:0.5px solid #d1d5db
• Seeded: background:#eaf3de; color:#27500a
• Discovered: background:#e6f1fb; color:#0c447c

Attribution footer — mandatory on every artifact:

<div style="margin-top:32px;padding-top:12px;border-top:1px solid #e0ddd6;
  display:flex;justify-content:space-between;align-items:center;
  font-family:'Courier New',monospace;font-size:10px;color:#9a9690">
  <span>Curiosity Stack is not a SEBI registered investment advisor · Not investment advice · Makers accept no liability · For research only</span>
  <a href="https://curiositystack.app" target="_blank"
    style="color:#1b5e52;font-weight:700;text-decoration:none">
    ⬡ curiositystack.app
  </a>
</div>

---

CRITICAL — Artifact format rule

NEVER wrap output in <!DOCTYPE html>, <html>, <head>, or <body> tags. Cowork artifacts are HTML FRAGMENTS only — not full documents. Starting an artifact with <!DOCTYPE html> causes raw code to display instead of rendering. Always start directly with <style> or <div>.

Wrong: <!DOCTYPE html><html><head>... Correct: <style>...</style><div>...

Scenario Library

Purpose

A curated library of 18 pre-built decomposition starting points organised into 6 categories. Removes the blank-slate problem for new users. Each scenario launches the decomposition directly when selected — no copying, no pasting.

---

Display

Generate an interactive HTML artifact using the design system below.

Design system:

• Background: #fafaf8
• Text: #2c2c2c primary, #6b6558 secondary
• Accent: #1b5e52 (teal)
• Borders: 0.5px solid #e0ddd6
• Border radius: 12px cards, 8px chips
• Font: system-ui
• Attribution badge top: ⬡ Curiosity Stack · Scenario Library · v3.3.4

Layout:

• Search bar at top
• Category tabs: All / India Themes / Geopolitics / Global Trends / AI / Cybersecurity / Energy & Climate
• When AI tab is active — show sub-filter: All AI / Global AI / AI — India
• Card grid: repeat(auto-fill, minmax(210px, 1fr))
• Preview panel below grid when card is selected

Each card shows:

• Category dot + label (color-coded)
• Topic title (13px, font-weight 500)
• 2-line description (12px, muted)
• Estimated session time
• "Preview →" button

Preview panel shows:

• Category label
• Topic title
• Full description + "The plugin walks you through all 6 layers — one question at a time."
• 7 layer chips — each showing layer label + what it reveals for this specific topic
• "Start decomposition →" button (PRIMARY ACTION)
• "Dismiss" button (secondary, text only)
• Estimated time
• Copy box with ⎘ Copy button (fallback when sendPrompt unavailable)

---

Category colour mapping — strict, no deviation

Each scenario card MUST use exactly this colour for its category dot and header accent. Never use a neighbouring category's colour. Never use blue (#185fa5) for AI cards.

Category	data-cat	Dot / accent colour
India Themes	india	#1b5e52
Geopolitics	geo	#993c1d
Global Trends	global	#185fa5
AI — Global	ai-global	#533ab7
AI — India	ai-india	#7c3aed
Cybersecurity	cyber	#3b6d11
Energy & Climate	energy	#854f0b

The AI filter tab (purple #533ab7) covers BOTH ai-global and ai-india cards. When the "AI" tab is active, show both ai-global and ai-india cards. The sub-filter (All AI / Global AI / AI — India) further narrows within those.

Critical — Start decomposition button behaviour

The "Start decomposition →" button MUST use this exact JavaScript pattern:

function startDecomposition(title) {
  const prompt = 'Help me understand the value chain for: ' + title;
  
  // Primary: try sendPrompt() — fires directly into chat
  if (typeof sendPrompt === 'function') {
    sendPrompt(prompt);
    return;
  }
  
  // Fallback: copy to clipboard with clear visual feedback
  if (navigator.clipboard && navigator.clipboard.writeText) {
    navigator.clipboard.writeText(prompt).then(() => {
      showCopiedFeedback();
    }).catch(() => {
      showManualCopy(prompt);
    });
  } else {
    showManualCopy(prompt);
  }
}

function showCopiedFeedback() {
  const btn = document.getElementById('startBtn');
  const original = btn.innerHTML;
  btn.innerHTML = '✓ Prompt copied — paste into chat';
  btn.style.background = '#166534';
  btn.disabled = true;
  setTimeout(() => {
    btn.innerHTML = original;
    btn.style.background = '';
    btn.disabled = false;
  }, 3000);
}

function showManualCopy(prompt) {
  document.getElementById('manualCopyBox').style.display = 'block';
  document.getElementById('manualCopyText').value = prompt;
  document.getElementById('manualCopyText').select();
}

function execCopy(text, btn) {
  const ta = document.createElement('textarea');
  ta.value = text;
  ta.style.position = 'fixed';
  ta.style.opacity = '0';
  document.body.appendChild(ta);
  ta.focus();
  ta.select();
  try {
    document.execCommand('copy');
    btn.textContent = '✓ Copied';
    btn.style.background = '#1b5e52';
    btn.style.color = 'white';
    setTimeout(() => {
      btn.textContent = '⎘ Copy';
      btn.style.background = 'white';
      btn.style.color = '#1b5e52';
    }, 2000);
  } catch(e) {
    btn.textContent = 'Select & copy';
  }
  document.body.removeChild(ta);
}

The UI must include:

• A primary green "Start decomposition →" button with id="startBtn"
• A hidden fallback box with id="manualCopyBox":

  <div id="manualCopyBox" style="display:none; margin-top:12px;">
    <p style="font-size:12px; color:#6b6558; margin-bottom:6px;">
      Copy this and paste into the chat:
    </p>
    <div style="display:flex;gap:8px;align-items:center">
      <textarea id="manualCopyText" readonly 
        style="flex:1; padding:8px; font-size:13px; 
               border:1px solid #e0ddd6; border-radius:6px;
               background:#f8f8f6; resize:none; height:56px;">
      </textarea>
      <button onclick="execCopy(document.getElementById('manualCopyText').value, this)"
        style="padding:6px 12px;border:1px solid #1b5e52;border-radius:6px;background:white;color:#1b5e52;cursor:pointer;font-size:12px;white-space:nowrap">
        ⎘ Copy
      </button>
    </div>
  </div>
  

Never show "Copy prompt" as the primary button label. The primary button always says "Start decomposition →". Only show copy-related UI as a fallback when sendPrompt() is unavailable.

---

Categories and Scenarios

🇮🇳 India Themes

Color: #1b5e52

1. Semiconductor packaging in India (8 min) Where does India sit in the global OSAT value chain and what are the build requirements?

2. India defence manufacturing (9 min) Post-PLI, what is India actually building and who sits in the supply chain?

3. India GCC opportunity (8 min) Global Capability Centres expanding in India — where is value actually accumulating?

4. Pharma API supply chain (8 min) India is the pharmacy of the world. What does the value chain actually look like?

---

🌍 Geopolitics

Color: #993c1d

5. Middle East conflict → oil supply (9 min)
6. Russia-Ukraine → energy transition (9 min)
7. US-China tariffs → supply chain (10 min)
8. Taiwan risk → semiconductor chain (9 min)

---

🌐 Global Trends

Color: #185fa5

9. Space economy infrastructure (9 min)
10. Precision medicine data layer (9 min)

---

🤖 AI — Global

Color: #533ab7

11. AI inference demand (8 min)
12. AI data centre infrastructure (9 min)

---

🤖 AI — India

Color: #7c3aed

13. Indian IT services in the AI era (10 min)
14. India AI data annotation layer (8 min)

---

🔒 Cybersecurity

Color: #3b6d11

15. Enterprise cybersecurity demand (9 min)
16. OT security in critical infrastructure (9 min)

---

⚡ Energy & Climate

Color: #854f0b

17. Grid-scale battery storage (9 min)
18. Green hydrogen economy (9 min)

---

After scenario launches

The curiosity-framework skill picks up the topic and begins at Layer 0. Apply all normal post-output flows from output-generator skill after completion.