ape-present

Solid

Converts a blog post into a single self-contained HTML document -- a visual-heavy, readable walkthrough with custom animated diagrams, short and crisp bullet points, and a natural explanation flow from first principles. Trigger on "ape present", "make this presentable", or "turn this post into a doc I can walk people through".

Data & Documents 40 stars 3 forks Updated today MIT

Install

View on GitHub

Quality Score: 83/100

Stars 20%
54
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
80
License 10%
100
Description 5%
100

Skill Content

# Present Skill Takes a blog post and produces one self-contained HTML file designed for intuitive learning: a clean header, short crisp bullet points, and visual-first explanations. Diagrams take center stage, featuring custom animations that visually demonstrate the underlying mechanics, followed by numbers set large and wire layouts or pseudocode where relevant. It is a document, not a deck. No full-screen hero sections, no scroll-snapping, and no slide feel. Single file, comfortable reading width (`--measure`), full theme support, and a fixed section skeleton -- illustration, context, body, sources -- so every document has a coherent shape. It is not the blog either. The post merely recorded or explained; this document **teaches**. Write it as an expert engineer explaining the concept to a sharp peer: - **Visuals carry the heavy lifting**: Every idea is anchored by a diagram, custom animation, code snippet, or layout. - **Short, crisp bullet points**: No verbose paragraphs or walls of text. Use punchy, high-signal bullets that explain the invariant, the causal steps, and the trade-off. - **Custom animations**: You are free and encouraged to design custom SVG/CSS animations tailored directly to what the concept needs to make the mechanism click. - **Natural, causal flow**: Ideas progress logically, where each section resolves a constraint or trade-off raised by the previous one. Audience: practicing engineers. Ground explanations in first principles and systems realiti...

Details

Author
arpitbbhayani
Repository
arpitbbhayani/ape-skills
Created
3 months ago
Last Updated
today
Language
CSS
License
MIT

Similar Skills

Semantically similar based on skill content — not just same category

AI & Automation Listed

present

Turn what's being communicated into a crafted single-page HTML explainer with diagrams. Triggered by 'present this', 'make this visual', 'show me this as a page'.

24 Updated today
tomcounsell
Data & Documents Listed

eliviz

Parse data files of many formats — CSV/TSV, Excel (.xlsx), SQLite, JSONL/NDJSON, JSON, Markdown, plain text, and log files — and generate a stunning, self-contained, single-file HTML experience that visualizes the data: a Three.js animated hero, GSAP scroll animations, Tailwind styling, column-profiled data tables with search/sort/pagination, histograms and time-series charts, a markdown reading view with outline navigation, a filterable log viewer, and a collapsible tree explorer for arbitrary JSON. Use this skill whenever the user uploads or points at a data file (spreadsheet, export, database, document, log) and wants to "visualize", "explore", "browse", "display", "make a dashboard/report/viewer/UI for", or "turn into a webpage" that data — even if they don't say "HTML" explicitly. Ships a five-style design bank (dark glass, editorial light, brutalist, terminal CRT, neon cyberpunk) that is auto-picked per dataset, and pairs with the design-adapter agent for custom branding, new moods, or blended styles.

0 Updated today
Doreenperemptory25
AI & Automation Listed

interactive-explainer

Build single-file interactive HTML explainers/explorers that visually explain systems — cycles, workflows, pipelines, dependency graphs, state machines, architectures, timelines. Use when asked for an "interactive explainer", "HTML explorer", "explain this visually", "make an interactive diagram of how X works", or when a markdown explanation of structure (who calls what, what depends on what, what loops back) is getting long. Produces a self-contained, offline-safe .html with focus+context highlighting, step-through narration, and copy that passes the copy rules.

3 Updated today
eric-sabe