Kraft Paper Notes
Generate beautiful, single-file HTML sketchnotes with a handwriting aesthetic and spiral-bound notebook styling.
$5
Works with the AI tools you already use
Claude Code
Cursor
Codex CLI
Muse
Dots+22 moreClaude CodeCursorCodex CLIMuseDots
OpenClaw
Manus
Grok
Grok Bot+18 agentsKraft Paper Notes
Example session with this skill installed
Create a kraft-paper note explaining the basics of Docker volumes. Include a section on bind mounts vs named volumes and a summary box.
- Read your context and instructions
- Compiled the kraft paper notes
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Docker Volumes Note</title>
</head>
<body>
<div class="desk">
<div class="notebook">
<h1 class="title">Docker Volumes 101</h1>
<!-- Layouts and content here -->
</div>
</div>
</body>
</html>
Connects securely to your tools. The creator never sees your data.
What you get
About this skill
The problem
Sharing technical documentation or study summaries as raw text or bland PDFs often leads to low engagement. Creating visually appealing, hand-drawn style notes usually requires manual design work in tools like Canva or Photoshop.
What it does
- Generates a single-file, self-contained HTML page styled as a professional kraft-paper notebook.
- Injects specific layouts including ruled backgrounds, spiral bindings, washi-tape decorations, and paperclip elements.
- Applies a curated stack of handwriting fonts (Kalam, Patrick Hand, Zeyada) and Lucide icons for a clean sketchnote aesthetic.
- Produces pure inline CSS and HTML that works offline in any browser without external scripts.
Frameworks & tools
HTML5, CSS3 (Flexbox/Grid), Google Fonts API, and Lucide Icons CDN.
Why this beats prompting it yourself
Getting an LLM to consistently output complex inline CSS for a specific "hand-drawn" aesthetic is prone to failure, often resulting in broken layouts or generic styles. This skill uses a strict 14-point QA checklist and pre-defined layout components to ensure every note is perfectly formatted and visually cohesive.
Use cases
- Creating "cheat sheets" for complex technical topics like Kubernetes networking or TLS handshakes.
- Generating memorable onboarding summaries for new engineers joining a team.
- Building visually distinct "Learning Today" summaries for social media or internal wikis.
- Designing offline-first documentation that looks like a physical field journal.
Known limitations
External dependencies are limited to Google Fonts and Lucide CSS CDNs. The skill does not support JavaScript-heavy interactive components or multi-page navigation.
How to install
Works the same in every agent - Claude, Cursor, Codex, Copilot and 20+ more.
- 1
Download the ZIP
Free skills download straight away. Paid skills unlock right after purchase.
- 2
Unzip into your skills folder
Every agent reads skills from one folder on your machine. Drop the unzipped folder in there.
- 3
Ask your agent to use it
Restart the agent if it was already running. It picks the skill up automatically - no config needed.
Skills folder by agent
Click the path to copy it. Create the folder if it does not exist yet.
Reviews
No reviews yet
Be one of the first to try it. Every listed skill passes our trust checks below.
Security scanned
Passed our 8-point scan before listing
Fresh listing
Recently published to Agensi
30-day refund
Not a fit? Get your money back
Trust & safety
Security scanned
Verified clean 1 month ago
- Passed all security checks, Safe to install
Needs access to
Unpkg
Jsdelivr
Googleapis