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.
From curiosity-stacknpx claudepluginhub ameya85/curiosity-stackThis skill uses the workspace's default tool permissions.
Provides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
Calculates TAM/SAM/SOM using top-down, bottom-up, and value theory methodologies for market sizing, revenue estimation, and startup validation.
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:
#fafaf8 (warm white)white#2c2c2c (soft charcoal)#6b6b6b#9a9690#1b5e52 (deep teal) — the ONLY accent colour#e0ddd6#f0f7f4#fff8f0 background, #f0d090 border, #5a3a00 textTypography:
'Georgia', serif, 14px minimum'Courier New', monospaceComponent rules:
background: #1b5e52; color: whitebackground: white; border: 1px solid #e0ddd6; border-radius: 8pxbackground: #1b5e52; color: white for primary actionsPill colour system:
background:#e6f1fb; color:#0c447c; border:0.5px solid #85b7ebbackground:#eaf3de; color:#27500a; border:0.5px solid #97c459background:#faeeda; color:#633806; border:0.5px solid #ef9f27background:#fcebeb; color:#791f1f; border:0.5px solid #f09595background:#f3f4f6; color:#374151; border:0.5px solid #d1d5dbbackground:#eaf3de; color:#27500abackground:#e6f1fb; color:#0c447cAttribution 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>Not SEBI registered · Not investment advice · For research only</span>
<a href="https://curiositystack.app" target="_blank"
style="color:#1b5e52;font-weight:700;text-decoration:none">
⬡ curiositystack.app
</a>
</div>
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>...
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.
Generate an interactive HTML artifact using the design system below.
Design system:
#fafaf8#2c2c2c primary, #6b6558 secondary#1b5e52 (teal)0.5px solid #e0ddd6⬡ Curiosity Stack · Scenario Library · v3.3.4Layout:
repeat(auto-fill, minmax(210px, 1fr))Each card shows:
Preview panel shows:
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.
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:
<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.
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?
Color: #993c1d
Color: #185fa5
Color: #533ab7
Color: #7c3aed
Color: #3b6d11
Color: #854f0b
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.