ai-agent

Easily Crop Images with vue-cropper

Name: Easily Crop Images with vue-cropper
Author: xyxiao001

Get a simple image clipping plugin for your Vue app, ideal for startup founders and developers.

From the repo · “A simple picture clipping plugin for vue”

4,552 stars705 forksVueGuide quality 8/10 · reviewed Jul 26Updated 3/9/2026100% free · open source

What it does

Vue-cropper is a simple image clipping plugin that allows users to crop and upload images in a Vue application

When to use it

•When you need to add a profile picture upload feature to your application
•When you want to allow users to crop and upload product images
•When you need to add an image editing feature to your application

Ready-to-paste prompt

<VueCropper :img='example.png' :outputType_='png' @cropMoving='moving' @cropEnd='end' />

Heads up: Make sure to import the CSS file of the cropper in your Vue file or main CSS file: `import 'vue-cropperjs/dist/index.css'`

Saves to your device

Use with Claude

New

Skip the builder — one click puts this in Claude, Cursor, Antigravity and more.

✅ Light setup

Installs with a command or two; your AI agent can do it for you.

Try it instantly — no install

Claude Code

mkdir -p ~/.claude/skills/vue-cropper && curl -fsSL https://workflowstacks.com/api/skills/vue-cropper/claude-skill -o ~/.claude/skills/vue-cropper/SKILL.md

Open in another AI app

Opens the app with this repo with the prompt ready to go — no copy-paste needed.

Connect the whole catalog (MCP)

claude mcp add --transport http workflowstacks https://workflowstacks.com/api/mcp

Adds a WorkflowStacks connector to Claude Code: search and load any skill here by chatting.

How Easily Crop Images with vue-cropper works

Codeflow

Free to inspect

Easily Crop Images with vue-cropper is a medium Vue project (~4.3k lines across 15 code files). Setup is light: installs like a normal app. Reading the code is optional. Last commit 7 months ago, MIT license, has a test suite.

Size

Medium codebase

~4.3k lines · 15 code files · 36 min skim

Setup

One-command install

Installs like a normal app. Reading the code is optional.

Runs on

Node.js

No API keys detected

Vue 90%HTML 8%JavaScript 1%TypeScript 1%

Where to start reading

1
README.md
Start here — what it does and how to install it
2
src/index.js
Where the program starts running
3
package.json
Dependencies and the commands it exposes

What's in each folder

src/Core code — the actual logic3 files

docs/Documentation2 files

next/Folder20 files

scripts/Helper scripts1 files

READMEHas testsDocumentedNo CIMIT licenseLast update 7 mo ago

Use with Claude

New

Skip the builder — one click puts this in Claude, Cursor, Antigravity and more.

✅ Light setup

Installs with a command or two; your AI agent can do it for you.

Try it instantly — no install

Claude Code

mkdir -p ~/.claude/skills/vue-cropper && curl -fsSL https://workflowstacks.com/api/skills/vue-cropper/claude-skill -o ~/.claude/skills/vue-cropper/SKILL.md

Open in another AI app

Opens the app with this repo with the prompt ready to go — no copy-paste needed.

Connect the whole catalog (MCP)

claude mcp add --transport http workflowstacks https://workflowstacks.com/api/mcp

Adds a WorkflowStacks connector to Claude Code: search and load any skill here by chatting.

Quick Actions

Details

Creator

xyxiao001

Language

Vue