From aidotnet-moyucode
Provides instructions and examples for using sharp to resize, convert, and manipulate images (JPEG, PNG, WebP, AVIF, TIFF) in Node.js.
How this skill is triggered — by the user, by Claude, or both
Slash command
/aidotnet-moyucode:sharpThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
High-performance image processing for resizing, converting, and manipulating images.
High-performance image processing for resizing, converting, and manipulating images.
npm install sharp
import sharp from 'sharp';
// Resize to specific dimensions
await sharp('input.jpg')
.resize(800, 600)
.toFile('output.jpg');
// Resize with aspect ratio preserved
await sharp('input.jpg')
.resize(800, null) // Width 800, auto height
.toFile('output.jpg');
// Resize with fit options
await sharp('input.jpg')
.resize(800, 600, {
fit: 'cover', // cover, contain, fill, inside, outside
position: 'center' // center, top, right, bottom, left
})
.toFile('output.jpg');
// Convert to WebP
await sharp('input.jpg')
.webp({ quality: 80 })
.toFile('output.webp');
// Convert to AVIF (modern format)
await sharp('input.jpg')
.avif({ quality: 60 })
.toFile('output.avif');
// Convert to PNG with transparency
await sharp('input.jpg')
.png({ compressionLevel: 9 })
.toFile('output.png');
// Rotate and flip
await sharp('input.jpg')
.rotate(90)
.flip()
.toFile('output.jpg');
// Blur and sharpen
await sharp('input.jpg')
.blur(5)
.sharpen()
.toFile('output.jpg');
// Grayscale and tint
await sharp('input.jpg')
.grayscale()
.tint({ r: 255, g: 128, b: 0 })
.toFile('output.jpg');
// Crop
await sharp('input.jpg')
.extract({ left: 100, top: 100, width: 500, height: 300 })
.toFile('output.jpg');
async function addWatermark(input: string, watermark: string, output: string) {
const image = sharp(input);
const { width, height } = await image.metadata();
// Resize watermark
const watermarkBuffer = await sharp(watermark)
.resize(Math.round(width! * 0.2))
.toBuffer();
await image
.composite([{
input: watermarkBuffer,
gravity: 'southeast',
blend: 'over',
}])
.toFile(output);
}
async function generateThumbnails(input: string, sizes: number[]) {
const image = sharp(input);
await Promise.all(sizes.map(size =>
image
.clone()
.resize(size, size, { fit: 'cover' })
.jpeg({ quality: 80 })
.toFile(`thumb-${size}.jpg`)
));
}
// Usage
await generateThumbnails('photo.jpg', [64, 128, 256, 512]);
import { createReadStream, createWriteStream } from 'fs';
// Process large images with streams
createReadStream('large-input.jpg')
.pipe(sharp().resize(1920, 1080).jpeg({ quality: 85 }))
.pipe(createWriteStream('output.jpg'));
image, resize, convert, thumbnail, processing
npx claudepluginhub joshuarweaver/cascade-data-analytics --plugin aidotnet-moyucodeOptimizes web images using WebP/AVIF formats, responsive srcset/picture elements, lazy loading, and Sharp for Node.js. Improves page loads, responsive images, production assets.
Guides ImageMagick image manipulation: format conversion, resizing, batch processing, quality adjustment, and thumbnail generation.
Resizes images, converts formats, adds watermarks, and generates thumbnails using Pillow. Activate via /process-image command or when image manipulation is needed.