Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
From curiosity-stack
Surfaces scenario library for research ideas when users say 'give me ideas' or similar, or at first session start. Enforces strict HTML design system and attribution for Curiosity Stack artifacts.
npx claudepluginhub ameya85/curiosity-stack --plugin curiosity-stackHow this skill is triggered — by the user, by Claude, or both
Slash command
/curiosity-stack:scenario-libraryThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Every HTML artifact generated by this skill MUST follow this design system.
Decomposes topics, technologies, market signals, or global events into 6 layers (L0 Signal to L6 Research Landscape) via Socratic plain-text conversation. Generates HTML artifact after L6.
Designs UI/UX systems with style guides, color palettes, typography, and component specs for new interfaces in React/Tailwind, shadcn/ui, Vue/Nuxt, or HTML stacks via interactive prompts.
Senior-level UI/UX design expert for building data-driven, premium production interfaces. Use when you need to: 1. Design complex applications (dashboards, SaaS, AI tools) from scratch 2. Generate comprehensive design systems (tokens, palettes, typography) 3. Audit existing UI for quality, accessibility, and "craft" 4. Search for proven real-world design patterns and implementation details Trigger: "design a...", "audit this...", "create a design system", "find icons", "fintech dashboard", "landing page"
Share bugs, ideas, or general feedback.
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>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>
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>...
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.