Skills
.Work. You
Rest

Image Upload

Community

Optimize local image uploads for docs.

Software Engineering#next.js#webp#sharp#tiptap#image upload#document editor
Authorarunoda
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill streamlines the process of adding images to documents within the application, ensuring they are optimized for web display and seamlessly integrated into the editor.

Core Features & Use Cases

  • Local Image Upload: Allows users to upload images directly from their device for use in the document editor.
  • WebP Conversion: Automatically converts uploaded images (JPEG, PNG, GIF, etc.) to the efficient WebP format using sharp for faster loading and reduced file sizes.
  • Seamless Editor Integration: Integrates with the TipTap editor via slash commands, drag-and-drop, and paste functionality.
  • Use Case: When writing a new document, you can easily drag and drop a screenshot into the editor, and it will be automatically converted to WebP and embedded, ready for use.

Quick Start

Upload the image file 'diagram.png' into the document editor.

Dependency Matrix

Required Modules

None required

Components

scriptsreferences

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: Image Upload
Download link: https://github.com/arunoda/OkBrain/archive/main.zip#image-upload

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.