| name | scenario-library |
| description | Activate when user says "I don't know what to research", "give me ideas", "what can I decompose", "show me scenarios", "browse topics", "not sure where to start", "what topics are available", or runs /curiosity-stack:scenarios. Also activate on first session if local.md session_count is 0 or empty โ surface the library automatically after the welcome message. Never activate mid-decomposition.
|
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 , , , or tags.
Cowork artifacts are HTML FRAGMENTS only โ not full documents.
Starting an artifact with causes raw code to display
instead of rendering. Always start directly with 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;
if (typeof sendPrompt === 'function') {
sendPrompt(prompt);
return;
}
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
-
Semiconductor packaging in India (8 min)
Where does India sit in the global OSAT value chain and what are the build requirements?
-
India defence manufacturing (9 min)
Post-PLI, what is India actually building and who sits in the supply chain?
-
India GCC opportunity (8 min)
Global Capability Centres expanding in India โ where is value actually accumulating?
-
Pharma API supply chain (8 min)
India is the pharmacy of the world. What does the value chain actually look like?
๐ Geopolitics
Color: #993c1d
- Middle East conflict โ oil supply (9 min)
- Russia-Ukraine โ energy transition (9 min)
- US-China tariffs โ supply chain (10 min)
- Taiwan risk โ semiconductor chain (9 min)
๐ Global Trends
Color: #185fa5
- Space economy infrastructure (9 min)
- Precision medicine data layer (9 min)
๐ค AI โ Global
Color: #533ab7
- AI inference demand (8 min)
- AI data centre infrastructure (9 min)
๐ค AI โ India
Color: #7c3aed
- Indian IT services in the AI era (10 min)
- India AI data annotation layer (8 min)
๐ Cybersecurity
Color: #3b6d11
- Enterprise cybersecurity demand (9 min)
- OT security in critical infrastructure (9 min)
โก Energy & Climate
Color: #854f0b
- Grid-scale battery storage (9 min)
- 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.
