slide-deck — independently scanned and version-tracked by SaferSkills.
SaferSkills independently audited slide-deck (Agent Skill) and scored it 100/100 (green). The audit ran 55 deterministic rules across Security, Supply Chain, Maintenance, Transparency, and Community; it found 0 high-severity and 0 lower-severity findings. The full rule-by-rule trace and per-finding evidence are below. Free, methodology-open.
Findings & checks · 0 flagged
Every scanned point with the score it earned and what moved between them.
First recorded scan — no prior version to compare against.
The primary manifest — the file an agent reads to learn what this artifact does.
Create stunning, interactive HTML slide deck presentations backed by deep research — academic papers, case studies, and real-world examples. Every deck is a self-contained HTML file with D3.js visualizations, Anime.js animations, keyboard/click navigation, and embedded figures extracted from referenced papers. Plus a companion markdown file with speaker notes.
This skill uses other skills from the claude-tricks plugin:
$ARGUMENTS - The topic, theme, or subject for the presentationBefore any research or design, ask the user targeted questions to shape the presentation:
Present questions as a concise numbered list. WAIT for the user to answer before proceeding.
After getting requirements, launch parallel research agents to gather material.
Research academic foundations for: $ARGUMENTS>
Step 1: Find papers Use WebSearch to find relevant arxiv paper IDs on the topic.
>
Step 2: Get paper overviews via alphaxiv For each promising paper, fetch its structured overview:
>
``bash curl -s "https://alphaxiv.org/overview/{PAPER_ID}.md" ``>
If the overview doesn't have enough detail, fetch the full text:
>
``bash curl -s "https://alphaxiv.org/abs/{PAPER_ID}.md" ``>
For each paper, extract: - Key concepts and contributions - Important diagrams, figures, tables, or results worth showing in slides - Quotable findings or conclusions - How it connects to the presentation topic
>
Step 3: Extract figures and diagrams from papers For papers with important visuals (architecture diagrams, result tables, charts, figures), download the PDF and extract the images using the pdf skill:
>
```bash # Download the paper PDF curl -sL "https://arxiv.org/pdf/{PAPER_ID}" -o /tmp/{PAPER_ID}.pdf
>
# Convert relevant pages to images python3 scripts/convert_pdf_to_images.py /tmp/{PAPER_ID}.pdf /tmp/{PAPER_ID}_pages/ ```
>
Use pdfplumber to identify figure bounding boxes and extract specific figures:>
```python import pdfplumber from PIL import Image
>
pdf = pdfplumber.open(f"/tmp/{PAPER_ID}.pdf") page = pdf.pages[PAGE_NUMBER] # Extract image at bounding box coordinates im = page.to_image(resolution=300) im.crop((x0, y0, x1, y1)).save(f"/tmp/{PAPER_ID}_fig{N}.png") ```
>
Convert extracted images to base64 for embedding in the HTML deck:
>
``bash base64 -i /tmp/{PAPER_ID}_fig{N}.png ``>
Return: a structured summary of 3-8 relevant papers with extracted insights, ordered by relevance. For each paper with useful visuals, include the base64-encoded figure data and a caption/citation.
>
Also search for survey papers that provide broader context.
Research real-world applications and case studies for: $ARGUMENTS>
Use WebSearch and WebFetch to find: - Real-world case studies from companies using or building this - Industry reports, benchmarks, and statistics - Notable success stories and failure postmortems - Current trends and state of the art - Compelling data visualizations or metrics worth citing - Controversies, debates, or open questions in the field - Expert opinions and notable quotes
>
Return: 5-10 concrete case studies / examples with source URLs, key data points, and how each connects to the narrative.
Research presentation design and narrative structure for: $ARGUMENTS>
Consider: - What's the most compelling narrative arc for this topic? - What analogies or metaphors would make complex ideas click? - What visual metaphors or imagery best represent key concepts? - What's the "aha moment" — the single insight that makes the whole talk worth attending? - What data should be visualized, and how? (D3.js charts, animated diagrams, interactive graphs) - Which concepts need interactive visualizations vs static figures from papers?
>
For each slide concept, decide the diagram type: - Paper figure: Use extracted image from the paper (architecture diagrams, published results, tables) - Interactive D3.js: Use for data that benefits from interactivity (charts, graphs, network diagrams, treemaps, timelines) - Animated diagram: Use Anime.js for step-by-step concept explanations (algorithm flows, process diagrams, build-up sequences) - CSS visual: Use for simple decorative or conceptual visuals (geometric patterns, gradients, shapes)
>
Return: a proposed narrative arc (beginning/middle/end), 3-5 visual concepts with diagram type for each, the central "aha moment", and a suggested slide outline.
Wait for all agents to complete. Synthesize findings into a unified content plan.
Present a detailed slide-by-slide outline to the user:
## Presentation Outline: [Title]
### Narrative Arc
[One paragraph describing the story being told]
### Slide-by-Slide Plan
1. **[Slide Title]** — [What it covers] | Visual: [paper figure / D3 chart / anime.js animation / CSS]
2. **[Slide Title]** — [What it covers] | Visual: [type + description]
...
N. **[Slide Title]** — [What it covers] | Visual: [type + description]
### Design Direction
- Theme: [dark/light, color palette, mood]
- Typography: [font pairing]
- Visual style: [e.g., "geometric minimalism with data-heavy accents"]
- Animation approach: [e.g., "staggered reveals with D3 transitions"]
### Paper Figures to Embed
- Figure X from [Paper Name] — [which slide, what it shows]
- Table Y from [Paper Name] — [which slide, what it shows]
### Interactive Visualizations
- Slide N: [D3.js chart type — what data it shows]
- Slide M: [Anime.js animation — what concept it illustrates]
### Sources
- [Paper 1 — how it's used]
- [Case study 1 — which slide]
- ...WAIT for user approval. Revise if requested. Do not build until approved.
After approval, build both deliverables. These can be built in parallel by two agents.
Build a single self-contained HTML file. External dependencies loaded from CDN:
#### Slide Engine Requirements
Navigation:
G or O)N)Transitions:
Responsive:
vw/vh units and CSS clamp() for fluid scaling#### Design System (per /frontend-design principles)
CRITICAL: Every deck must have a unique, distinctive visual identity. No two decks should look alike.
Before writing any code, commit to a bold aesthetic direction for THIS specific topic:
Typography:
Color & Theme:
Slide Layouts — vary these across the deck:
#### Two Types of Diagrams
1. Paper Figures (static, extracted from PDFs) Figures, tables, results, and architecture diagrams extracted from referenced papers using the pdf skill. These are embedded as base64 <img> tags:
<div class="paper-figure">
<img src="data:image/png;base64,{BASE64_DATA}" alt="[description]" />
<figcaption>Figure 3 from Smith et al., 2024 — "[Paper Title]"</figcaption>
</div>Style paper figures with:
2. Interactive Visualizations (D3.js + Anime.js) For data and concepts that benefit from interactivity or animation:
D3.js — use for data-driven visuals:
<div class="d3-chart" id="slide-5-chart"></div>
<script>
// D3 visualization initialized when slide becomes active
function initSlide5Chart() {
const svg = d3.select('#slide-5-chart').append('svg')...
}
</script>Anime.js — use for animated concept diagrams:
<div class="anime-diagram" id="slide-8-diagram">
<!-- SVG elements for the diagram -->
</div>
<script>
function initSlide8Diagram() {
anime.timeline({...})
.add({ targets: '.step-1', opacity: [0,1], translateY: [20,0] })
.add({ targets: '.step-2', opacity: [0,1], translateY: [20,0] })
...
}
</script>Each interactive visualization should:
#### Animations & Micro-interactions
transition().duration(800)#### Visual Details
#### Content Formatting
#### HTML Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[Presentation Title]</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<!-- Google Fonts -->
<!-- D3.js from CDN -->
<script src="https://d3js.org/d3.v7.min.js"></script>
<!-- Anime.js from CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.2/anime.min.js"></script>
<style>
/* CSS custom properties for the design system */
:root { ... }
/* Reset and base */
/* Slide engine styles */
/* Slide layout utilities */
/* Paper figure styles */
/* D3 chart container styles */
/* Anime diagram styles */
/* Animation keyframes */
/* Syntax highlighting */
/* Individual slide styles */
/* Navigation UI */
/* Responsive adjustments */
/* Print styles for PDF export */
</style>
</head>
<body>
<div class="deck">
<div class="slide" id="slide-1">...</div>
<div class="slide" id="slide-2">...</div>
<!-- Slide with paper figure -->
<div class="slide" id="slide-5">
<div class="paper-figure">
<img src="data:image/png;base64,..." alt="..." />
<figcaption>...</figcaption>
</div>
</div>
<!-- Slide with D3 chart -->
<div class="slide" id="slide-8">
<div class="d3-chart" id="chart-8"></div>
</div>
<!-- Slide with Anime.js diagram -->
<div class="slide" id="slide-12">
<div class="anime-diagram" id="diagram-12">...</div>
</div>
...
</div>
<div class="controls">...</div>
<script>
// Slide engine: navigation, transitions, keyboard handling
// Animation triggers on slide enter/leave
// D3 chart initialization functions
// Anime.js diagram initialization functions
// URL hash management
// Overview/grid mode
// Lazy loading: init visualizations only when slide is active
</script>
</body>
</html>Build a markdown file with detailed speaker notes for each slide:
# Speaker Notes: [Presentation Title]
---
## Slide 1: [Title]
**Key message:** [The one thing the audience should take away]
**Talking points:**
- [Point 1 — with supporting detail]
- [Point 2 — with data/citation]
- [Point 3 — with transition to next slide]
**Visual on screen:** [Description of what the audience sees — paper figure, D3 chart, animation]
**Timing:** ~[X] minutes
**Notes:** [Any delivery tips, audience interaction cues, or demo instructions]
---
## Slide 2: [Title]
...Each slide's notes should include:
Wait for both agents to complete.
After both files are generated:
[topic]-slides.html — the interactive slide deck[topic]-speaker-notes.md — companion speaker notes| File | Description |
|---|---|
[topic]-slides.html | Self-contained interactive HTML slide deck with D3.js charts, Anime.js animations, and embedded paper figures |
[topic]-speaker-notes.md | Markdown speaker notes with timing, talking points, and visual descriptions |
~30 seconds. Free. No account. Every finding cites a rule and a line of evidence.