skills.rest
mattwoodco
mattwoodcoCOMMUNITY
Explore all skills by this author →
Website𝕏@mattwoodcoGitHub

image-editor

Edit images client-side with crop, resize, rotate, flip, filters, and brush masking.

3|Updated Feb 14, 2026
Search Tags:#canvas#client-side#image editing#masking#konva.js#photo editor
One-click install
npx skills add https://github.com/mattwoodco/skills --skill image-editor-mattwoodco
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: image-editor
Source: https://github.com/mattwoodco/skills/tree/main/skills/image-editor
Command: npx skills add https://github.com/mattwoodco/skills --skill image-editor-mattwoodco

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires konva, react-konva, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This skill provides a comprehensive, client-side image editing solution, allowing users to perform common image manipulations directly in the browser without needing external tools or server-side processing.

Core Features & Use Cases

  • Non-destructive Editing: Apply crop, resize, rotate, flip, and filters (brightness, contrast, saturation, blur) without altering the original image data.
  • Masking for AI: Create brush-based masks for targeted image regeneration or inpainting workflows.
  • Use Case: A user wants to prepare an image for a blog post by cropping it to a specific aspect ratio, adjusting its brightness, and then masking a particular object for a future AI-powered edit.

Quick Start

Use the image-editor skill to open the canvas editor for the provided image URL.

Frequently Asked Questions about image-editor

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I do client-side image editing in the browser without a server?▼

Client-side image editing processes images directly in the browser using Konva.js, enabling cropping, resizing, and filtering without uploading files to an external server.

What is the best way to create brush-based masks for AI inpainting?▼

Brush-based masking for AI inpainting applies non-destructive brush strokes to isolate specific image regions, generating mask data URLs for targeted downstream AI regeneration workflows.

Can I apply non-destructive filters like brightness and blur to images using react-konva?▼

react-konva supports non-destructive filter application, allowing you to adjust brightness, contrast, saturation, and blur without permanently altering the original image data.

How do I export flattened PNG or JPEG images after cropping and rotating?▼

Exporting flattened PNG or JPEG images finalizes your canvas edits by merging applied crops, rotations, and filters into a single downloadable image file or data URL.

Does Konva.js support non-destructive photo editing workflows?▼

Konva.js supports non-destructive photo editing workflows by managing canvas layers independently, ensuring crop, resize, and flip operations do not overwrite the original source image.

Related Skills

Explore More Design & Creative Skills→
AJV009AJV009
1

canvas-component-utils

Render HTML content and responsive images in React components with FormattedText and Image.

Community
Intermediate
prime-skillsprime-skills
31

image-edit

Route image editing requests to the appropriate RunComfy model and execute them.

Official
Advanced
caffeinelabscaffeinelabs

extension-authorization

Enforce role-based access control in Motoko canisters and React front-ends.

Official
Advanced
ovachieverovachiever
52

omero-integration

Access OMERO data programmatically via omero-py and BlitzGateway.

Community
Advanced