---
name: research-to-interactive-dashboard
description: Elevated v2 skill that transforms dense arXiv research papers, manuscripts, or technical notes into a single, complete, copy-paste-ready implementation prompt. The prompt directs a sleek Next.js AI coding agent (Cursor, Claude Code, Windsurf, etc.) to build a production-quality interactive research dashboard — self-contained HTML prototype first (Tailwind CDN + vanilla/Preact state), then full Next.js App Router TypeScript implementation. Dashboard features coordinated live visualizations, parameter controls, evidence tables, epistemic layering, and cross-domain bridges while preserving strict source traceability. Adds sub-skill mode for converting SaaS enterprise marketing campaigns, GTM briefs, positioning docs, and assets into interactive Next.js marketing pages, demo experiences, or sales enablement dashboards (ROI simulators, persona switchers, journey labs, objection handlers). Use when user supplies research PDF/URL/notes + asks for "interactive dashboard", "explainer dashboard like kinematic but sleek Next.js", "research lab in Next.js", "Codex prompt for paper dashboard", or equivalent for campaigns ("turn this campaign into interactive Next.js page", "make this GTM live", "SaaS marketing demo dashboard").
license: Apache-2.0
metadata:
  author: ACRA Insight LLC / Context Jamming
  version: 2.0.0
  style_system: "sleek-research-dashboard-v1 (modern data-dense editorial) | cj-warm-paper-v1 optional inheritance"
  repository: contextjamming.com or user Next.js app
  depends_on: ["pdf-extraction", "structured-analysis"]
---

# Research → Sleek Interactive Next.js Dashboard Prompt Generator (v2)

## Purpose

Turn a dense research paper (or SaaS marketing campaign materials) into a **single, fully-specified, copy-paste implementation prompt** for an AI coding agent. The agent produces:

1. A high-fidelity **self-contained dashboard HTML prototype** (Tailwind via CDN, inline SVGs, vanilla JS or lightweight state, instantly previewable in browser).
2. A **production Next.js App Router implementation** (TypeScript, server components where possible, client islands for interactives, clean component split, URL-shareable state, metadata/JSON-LD) that matches the prototype's behavior and can be dropped into an existing repo or new route.

The target is never a generic summary, static infographic, slide deck, or loose article. It is a **rigorous, explorable research instrument** (or campaign persuasion instrument) presented as a modern dashboard: dense but scannable, with live causal feedback loops between controls and visualizations, clear epistemic boundaries, and zero hallucinated science.

## Trigger Conditions

Use this skill for language such as:
- "Turn this arXiv paper into an interactive dashboard"
- "Generate a Next.js / Cursor prompt for a research explainer dashboard like kinematic but sleek"
- "Make a production dashboard for this paper"
- "Build me a paper lab in Next.js"
- "Transform this research into a shareable interactive HTML dashboard then Next.js version"
- For campaigns: "Turn this SaaS campaign / GTM / positioning into an interactive Next.js page", "make this enterprise marketing live with demos and calculators", "create interactive campaign dashboard from this brief"

Do **not** use for plain summaries, peer review, static decks, or when user wants you to implement directly without producing the detailed agent prompt.

## Required Inputs

**Primary (at least one):**
- arXiv / publisher PDF (use pdf skill or attached text extraction first)
- arXiv URL or identifier + version
- Full manuscript text or sufficiently complete research notes

**Optional but recommended:**
- Desired route slug (e.g. `adscft-boundary-ai` or `proofpoint-signal-extraction`)
- Public title override
- Existing Next.js repo path or design tokens to inherit
- Specific LLM/physics/market/biology bridge desired
- Target audience emphasis (e.g. "founders + technical PMs")

For **SaaS Campaign sub-skill mode** (auto-detected or explicit):
- Campaign brief / GTM doc / positioning statement
- Website copy, feature list, pricing, customer quotes, objection log
- Target personas, jobs-to-be-done, success metrics
- Existing landing page URL or Figma links (textual description)

If no slug provided, derive concise lowercase kebab-case from central concept (never author names unless unavoidable).

## Non-Negotiable Standard

Preserve **three distinct epistemic layers** at all times in the dashboard UI and copy:
1. **What the paper (or campaign) demonstrates or derives** — established results
2. **What the authors propose, interpret, or speculate** — author voice clearly attributed
3. **What the dashboard / Context Jamming / strategic layer adds** — labeled extension, analogy, or new research question

Never collapse layers. Every claim, equation, diagram, and interactive control must be traceable to a specific paper section/figure/equation or campaign artifact. Synthetic values, illustrative reconstructions, or conceptual models must carry explicit labels:
`PAPER-DERIVED` | `AUTHOR INTERPRETATION` | `CONCEPTUAL RECONSTRUCTION` | `ILLUSTRATIVE MODEL` | `SYNTHETIC FOR DEMONSTRATION`

The dashboard must repeatedly surface "Where the analogy / visual / model breaks" and provide falsifiability hooks for any speculative bridge.

## Operating Workflow (Internal — Follow Before Writing Prompt)

### Stage 1 — Establish the Record
Extract and verify (do not guess):
- Full title, authors (source order), affiliations
- arXiv ID + version or canonical URL
- Submission / revision dates, publication venue if any
- Abstract (verbatim key sentences)
- Field + subfield + paper type (theoretical / empirical / systems / benchmark / position / hybrid)
Mark any unresolved metadata explicitly.

For campaign mode: title/campaign name, client or internal owner, date range, primary objective (awareness / lead-gen / expansion / objection handling), primary persona, core offer.

### Stage 2 — State the Actual Thesis (One Sentence)
> The paper’s central move is to ______ by showing/arguing/constructing ______ [mechanism].

Identify:
- Object of study
- Old framing challenged
- New framing introduced
- Connecting mechanism
- Strongest evidence class
- Most important limitation / boundary condition

For campaigns: The campaign’s central move is to shift the buyer from [current belief/state] to [desired belief/state] by [mechanism: proof, demo, quantification, social, etc.].

### Stage 3 — Build Source Map / Artifact Ledger
One row per load-bearing claim:
- Claim / concept
- Source anchor (section + figure/eq/table or campaign doc paragraph)
- Evidence class (DIRECT RESULT | DERIVATION | EMPIRICAL FIT | SYSTEM DESCRIPTION | AUTHOR INTERPRETATION | LIMITATION | STRATEGIC EXTENSION)
- Suitability for dashboard interaction (high/medium/low)
- Caveat / boundary

Condense this ledger into the final prompt’s source-notes section.

### Stage 4 — Design Dashboard Information Architecture (Narrative Spine → Dashboard Flow)
Preferred dashboard journey (9–14 panels/sections, not linear article):
1. Hero Dashboard Strip (thesis + 3–5 live key metrics + primary CTA into Lab)
2. The Old Model vs New Framing (side-by-side or toggleable)
3. Central Mechanism / Causal Core (hero interactive or multi-view)
4. Parameter Lab / Simulator (global controls affecting multiple downstream visualizations)
5. Evidence & Data Explorer (filterable table + linked highlighting to text/viz)
6. Stress Tests & Failure Modes (interactive boundary probe)
7. Cross-Domain Bridge / Strategic Implications (interactive thought experiment + falsifiability questions)
8. Epistemic Ledger & "Do Not Confuse" Callouts (cards or expandable)
9. Glossary (contextual, linked from terms)
10. Source Ledger (searchable/filterable, with direct anchors)
11. Completion / Next Experiments footer

Each section/panel has: short kicker, editorial title, single conceptual job, source anchor, primary visual/control, misconception it prevents, transition cue.

For **campaign mode** adapt to: Hero Value Prop + Trust Bar, Persona Switcher (changes copy/metrics), Journey Simulator, ROI / TCO Live Calculator, Objection Handler Lab, Social Proof Matrix, Conversion Mechanics, Attribution & Measurement Plan, Source/Campaign Asset Map.

### Stage 5 — Select Dashboard Interactives (Not Decorative Animations)
Choose 5–9 substantial instruments because manipulation reveals the mechanism or campaign dynamics. Each must answer: "What does the user learn by moving this control that they could not learn from static text alone?"

Strong patterns:
- Vary a core parameter → see lawful response in multiple linked views (phase portrait, residual, downstream metric)
- Switch representations of same object (equation ↔ geometry ↔ table ↔ causal graph)
- Reveal causal cone / flow / dependency path on hover or toggle
- Construct/deconstruct a result (add/remove term, observer, constraint)
- Trigger threshold / phase change / routing decision with clear before/after
- Inspect residual after cancellation or normalization
- Test boundary condition until model breaks
- Replay pipeline stages with step-through + state diff
- Persona or segment switch that mutates messaging, proof points, and projected outcomes (campaign)

For every interactive specify in prompt:
- Component/panel name
- Conceptual lesson (one sentence)
- Exact paper/campaign source anchor
- Visual form (inline SVG primary; simple Recharts or Chart.js only if user repo already has it)
- Controls (sliders, toggles, multi-select, steppers, radio — all labeled)
- Deterministic state model (initial + reset + URL param encoding)
- Calculated / derived readouts (formulas explicit)
- Mobile behavior + reduced-motion
- Accessibility labels + live regions
- Evidence label + caveat text (always visible or one-click)
- Whether values are paper-derived, calculated, synthetic, or illustrative

**Strictly prohibit**: meaningless particle effects, autoplay, decorative parallax, invented data points presented as real, sliders with no causal consequence, generic bar charts unrelated to mechanism, full-page WebGL unless paper is literally about it, interactions whose scientific/marketing meaning cannot be stated in one sentence.

### Stage 6 — Hero Instrument (5-Second Thesis Reveal)
Dashboard hero must communicate the central reversal or campaign big idea within seconds:
- Large editorial title (6–12 words)
- One-sentence subtitle + 2–4 source-grounded headline metrics (live-updating where meaningful)
- Compact deck for smart non-specialist
- Primary CTA into first interactive panel
- Source paper / campaign asset CTA
- Visual: juxtaposes old vs new framing or shows main mechanism in motion (gentle loop or user-triggered)
- Must include proper `<title>`, `<desc>`, figure caption, reduced-motion variant, no unsupported numerical claims

### Stage 7 — Equations & Formulas as Arguments
Display equations as live, instrumented arguments, not decoration. For each:
- Human-readable name
- Rendered equation (KaTeX in Next.js; SVG or MathML fallback in HTML prototype)
- Variable definitions + plain-English "what changes when X moves"
- Exact paper/campaign anchor
- Disclosure if simplified/illustrative form used
- Link to controlling interactive when possible

### Stage 8 — Epistemic Safety Layer (Non-Negotiable Dashboard Elements)
Must include:
- Persistent or section-level **"Do not confuse X with Y"** callouts (nearest tempting false identity)
- **"Where the analogy / model / visual breaks"** dedicated panel or expandable cards with concrete differences (mathematical, empirical, architectural, causal)
- **Epistemic ledger** (table or card grid): Established Result | Author Interpretation | Dashboard / Strategic Extension
- Reconstruction labels on every viz/control
- For any speculative bridge: **Falsifiability card** with measurable object, possible experiment, result that would weaken/falsify, primary confound

### Stage 9 — Bounded Cross-Domain Bridge (Only When It Creates Real Research or Business Question)
Add only when it surfaces a serious, non-trivial question. Good bridges connect paper concepts to LLMs, interpretability, routing, alignment, biological systems, market structure, capital allocation, GTM mechanics, etc.

Label clearly: `STRUCTURAL ANALOGY — NOT IDENTITY` or `CONTEXT JAMMING / STRATEGIC EXTENSION`

Require:
- Two-column mapping (paper concept ↔ target domain)
- One interactive thought experiment or "what-if" lab
- 3–5 concrete points where analogy breaks
- 3–5 falsifiable research / experiment questions (with success/failure criteria)

Never add bridge just because paper uses fashionable words.

For campaign mode: bridge to measurement, attribution, agentic GTM, competitive positioning, etc., with same rigor.

### Stage 10 — Source Notes & Citation Map
End with argument-to-source map (not just bibliography):
- For each major dashboard section/panel: paper section + figure/eq range + whether viz is exact, adapted, or conceptual reconstruction
- Complete citation + primary DOI/arXiv link + campaign asset references
- "How to verify" notes for key numbers or claims

## Sleek Research Dashboard Design Grammar (for Prompt)

The generated dashboard must feel authored by a rigorous systems thinker, not a generic AI template or marketing site.

**Inherit / adapt:**
- Clean modern editorial data-dense aesthetic (Inter / system-ui for body, Fraunces or editorial serif optional for display if fits research tone)
- Zinc / slate / stone palette with one strong accent (indigo-600 or teal-600 recommended; allow user token override)
- Subtle borders, soft shadows (0 1px 2px rgb(0 0 0 / 0.05)), generous but purposeful whitespace
- Dense information hierarchy balanced with breathing room
- Inline SVG for all diagrams and simple charts (no heavy charting libs unless repo already imports)
- Smooth 150–200ms transitions, focus-visible rings, active states
- shadcn/ui-compatible patterns (cards, sliders, tabs, tooltips, dialogs) without forcing the dependency

**Prohibit:**
- Glassmorphism, heavy gradients, neon cyberpunk unless paper is literally about it
- Generic SaaS marketing cards or fake terminal aesthetics
- Stock illustrations or decorative scientific imagery without explanatory role
- Excessive drop shadows or neumorphism
- Autoplay anything
- Information conveyed by color alone
- Newline-heavy or low-density layouts that feel empty on desktop

For **campaign mode**: slightly more conversion-oriented whitespace, trust signals, clear primary/secondary CTAs, but still data-dense and non-hype. Same prohibition list.

## Expected Output Architecture (What the Prompt Instructs the Agent to Produce)

**Prototype (first deliverable):**
`index.html` — fully self-contained, <200KB, Tailwind 3.4+ via CDN, vanilla JS (or Preact via CDN if complex state), all SVGs inline, deterministic, works offline after load, mobile responsive, copy buttons where useful, URL param state persistence for shareability.

**Production (second deliverable):**
```
app/[slug]/
  page.tsx                 # server component, metadata, JSON-LD, imports layout + dashboard
  layout.tsx               # optional shared dashboard shell
  components/
    ResearchDashboard.tsx  # or CampaignDashboard.tsx — main orchestrator + global state/context
    HeroStrip.tsx
    MechanismLab.tsx
    EvidenceExplorer.tsx
    BoundaryProbe.tsx
    CrossDomainBridge.tsx
    EpistemicLedger.tsx
    SourceNotes.tsx
  lib/
    calculations.ts        # pure deterministic functions, paper-derived constants
    types.ts
  [slug].module.css        # or Tailwind only (prefer utility-first)
```

Responsibilities mirror original but dashboard-optimized:
- `page.tsx`: server-rendered metadata, canonical, JSON-LD (ScholarlyArticle or Dataset + FAQ if useful), narrative framing copy, imports client dashboard
- Client components: `"use client"`, deterministic local + URLSearchParams state, no network calls for core content, pause timers/animations when document.hidden, reduced-motion support, reusable controls only when they improve clarity
- CSS: page-local responsive rules, no global leakage, mobile simplification (stack, bottom sheets for controls, larger touch targets)

## Technical Constraints (Put in Every Generated Prompt)

- Next.js 14+ App Router, TypeScript strict, Edge-compatible where possible
- No runtime Node-only APIs in client components
- No external data fetch for the dashboard itself (all paper/campaign data embedded or in lib/)
- Prefer zero new dependencies; allow KaTeX (for equations), lucide-react (icons), framer-motion (only if it meaningfully improves causal perception — otherwise CSS transitions)
- For HTML prototype: Tailwind via official CDN, no build step, works in any modern browser
- No iframes, no screenshots as viz, no hydration mismatches, no random initial render values
- State must be URL-shareable (encode key params) and resettable to paper defaults
- Cloudflare / Vercel compatible

## Accessibility & Performance (Mandatory)

**A11y:**
- Semantic landmarks, headings, labels for every control
- Visible focus, keyboard operable (arrows on sliders, space/enter on toggles)
- `role="img"` + `<title>`/`<desc>` on substantive SVGs
- Live regions (`aria-live`) for updating readouts and results
- 44×44 px minimum touch targets on mobile
- `prefers-reduced-motion` respected (static or instant state changes)
- High-contrast mode friendly, no color-only information
- Readable equations with fallback text

**Perf:**
- Event-driven updates (no always-running rAF unless genuinely simulating continuous process)
- `useMemo` / React.memo for expensive derived viz or calculations
- Animations paused when tab hidden
- HTML prototype <150–200KB total uncompressed
- Next.js: static rendering of non-interactive copy, code-split heavy interactives, Lighthouse perf/accessibility > 90 target

## Validation Checklist (Agent Must Perform & Report)

For HTML prototype:
- Open in Chrome + Safari + mobile emulator; all interactions work
- Keyboard + screen-reader spot check
- Resize 320px–1920px; no horizontal scroll, controls remain usable
- Console clean, no React warnings (if any React)
- All source labels and caveats visible
- URL param round-trip works
- Reduced motion toggle or respects OS setting

For Next.js implementation:
- `npm run lint && npm run typecheck && npm run build` clean
- `npm run dev` manual test of every interactive, reset, mobile view, shareable link
- No hydration warnings
- Metadata, canonical, JSON-LD correct
- Source links resolve
- Cross-domain bridge falsifiability section present and non-vacuous
- Completion report generated

## Prompt Construction Rules

The final output of this skill is **one single copy-paste block** (plus one-sentence preamble) that an AI coding agent can receive and execute without further clarification on the science or campaign logic.

It must contain these 18 headings in order, each filled with paper- or campaign-specific instructions (no boilerplate placeholders like `[ADD HERE]`):

1. Role and operating context
2. Objective
3. Primary source (full metadata block)
4. Central editorial / campaign thesis
5. Audience and explanatory standard
6. Evidence and epistemic rules
7. Route, metadata, and dashboard identity
8. Dashboard information architecture (panels + jobs)
9. Interactive component specifications (use the template below for each)
10. Cross-domain bridge / strategic implications (or campaign measurement bridge)
11. Source notes and citation map
12. Visual system & design tokens
13. Component / file architecture (HTML prototype + Next.js)
14. Responsive behavior
15. Accessibility requirements
16. Performance and production constraints
17. Validation steps the agent must execute
18. Completion report format (structured output the agent should produce at end)

Use the internal templates:

**Interactive Specification Template (convert to prose in prompt):**
```
Component / Panel: 
Conceptual job (one sentence what user learns):
Paper / Campaign anchor:
Visual form:
Controls (exact types + labels):
State model (initial, transitions, reset, URL encoding):
Derived outputs / readouts (formulas):
Evidence label + caveat text:
Mobile / reduced-motion behavior:
Accessibility notes:
```

**Panel / Section Specification Template:**
```
Number:
Kicker:
Title:
Reader / User question this panel answers:
Core explanation (2–4 sentences max):
Paper / Campaign anchor:
Primary visual, equation, or control:
Misconception this panel prevents:
How it feeds next panel or global state:
```

## Sub-Skill: SaaS Enterprise Marketing Campaign → Interactive Next.js Page

**When triggered** (explicit or by content containing campaign/GTM/persona/ROI/positioning language):
- Follow same overall rigor but adapt epistemic layers to: Claimed Outcome | Supporting Evidence / Test | Strategic Implication / Risk
- Central thesis focuses on belief shift or behavior change the campaign is engineered to produce.
- Interactives emphasize quantification (live ROI/TCO, impact simulators), persuasion mechanics (objection handlers that surface evidence, persona switchers that rewrite copy and projected metrics), journey mapping with branch exploration, attribution what-if labs.
- Visual grammar: sleek B2B SaaS (clean Inter, professional indigo/teal accents, conversion-focused but data-honest CTAs, trust bars, expandable proof).
- Architecture same but names like CampaignExperience.tsx, ROICalculator.tsx, PersonaLab.tsx, ObjectionSimulator.tsx.
- Add "Measurement & Attribution Plan" panel with interactive attribution model explorer.
- Falsifiability becomes "What would falsify this campaign's core assumption?" with proposed A/B or pilot design.
- Output prompt still uses the 18-heading structure, with campaign-specific adaptations noted in each relevant heading.

Never treat marketing claims as established scientific results; always surface testability and alternative explanations.

## Example Invocation (Research)

User: "Use the attached Maldacena AdS/CFT paper and generate a sleek Next.js dashboard prompt for an interactive holographic boundary explainer. Make it suitable for Cursor."

Expected behavior: Extract paper, identify central reversal (bulk/boundary duality, observer-inclusive state counting, etc.), map key equations/figures, design 6–8 dashboard panels including a boundary-vs-bulk visualizer with parameter sliders that update entanglement entropy curves or causal wedge diagrams (SVG), epistemic ledger, falsifiable LLM/agentic intelligence bridge questions, produce the full 18-heading prompt ready to paste into coding agent. Also output the one-sentence preamble: "Interactive holographic duality research dashboard for Maldacena's boundary/bulk correspondence applied to intelligence architectures."

## Final Self-Audit (Before Returning Any Prompt)

- Can the paper/campaign thesis be stated in one crisp sentence?
- Does every interactive teach a specific mechanism or dynamics that static text cannot?
- Is every major interactive, metric, and viz source-anchored with evidence label?
- Are the three epistemic layers visually and textually separated throughout?
- Are synthetic/illustrative elements clearly labeled and never presented as paper results?
- Does the hero surface the central reversal or campaign big idea in <5 seconds?
- Is there at least one stress-test / boundary / failure-mode interactive?
- Is there a concrete "where it breaks" + falsifiability section for any bridge?
- Could the target AI coding agent implement without inventing scientific or campaign content?
- Does the prompt respect Next.js best practices and the specified constraints?
- Are accessibility, responsive (especially mobile dashboard), performance, and validation explicit and actionable?
- No unresolved decorative or scientific placeholders?

If any answer is no, revise the prompt before returning.

## Output Format (Strict)

Return **only**:

1. One-sentence preamble identifying the derived dashboard concept and primary source.
2. One markdown code block (```markdown ... ```) containing the complete, ready-to-paste implementation prompt for the AI coding agent.

Do not append alternative prompts, extra explanation, or loose notes unless explicitly asked.

---

**This elevated skill replaces the previous arxiv-to-contextjamming-explainer-prompt. It preserves all epistemic rigor while shifting the deliverable from a Context Jamming-specific kinematic explainer to a portable, production-grade interactive dashboard (HTML prototype + Next.js) optimized for modern AI coding agents and the user's broader research-to-product and GTM workflows.**