Responsive image

Skill a5c-ai/babysitter/library/specializations/ux-ui-design/skills/responsive-image

Babysitter enforces obedience on agentic workforces and enables them to manage extremely complex tasks and workflows through deterministic, hallucination-free self-orchestration

Install

npx -y skills add a5c-ai/babysitter --skill responsive-image

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

What its author says it does

Copied from the file, not written here

Generate responsive image sets with srcset, WebP/AVIF conversion, and art direction

SKILL.md

2.7 KB, as published. Nobody here has run it

Responsive Image Skill

Purpose

Generate responsive image sets for optimal performance across devices, including srcset variants, modern format conversion, and art direction.

Capabilities

Generate srcset image variants at multiple resolutions
Convert to WebP and AVIF formats
Calculate art direction crops for different viewports
Generate picture element markup
Create responsive image configuration
Optimize images for performance

Target Processes

responsive-design.js
component-library.js

Integration Points

Sharp for image processing
ImageMagick for advanced transformations
libvips for high-performance operations

Input Schema

{
  "type": "object",
  "properties": {
    "inputPath": {
      "type": "string",
      "description": "Path to source image"
    },
    "outputPath": {
      "type": "string",
      "description": "Output directory"
    },
    "widths": {
      "type": "array",
      "items": { "type": "number" },
      "default": [320, 640, 960, 1280, 1920]
    },
    "formats": {
      "type": "array",
      "items": { "type": "string" },
      "default": ["webp", "avif", "jpg"]
    },
    "quality": {
      "type": "number",
      "default": 80
    },
    "artDirection": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "breakpoint": { "type": "number" },
          "crop": { "type": "object" }
        }
      }
    },
    "generateMarkup": {
      "type": "boolean",
      "default": true
    }
  },
  "required": ["inputPath"]
}

Output Schema

{
  "type": "object",
  "properties": {
    "generatedImages": {
      "type": "array",
      "description": "List of generated image files"
    },
    "srcset": {
      "type": "string",
      "description": "srcset attribute value"
    },
    "pictureMarkup": {
      "type": "string",
      "description": "HTML picture element markup"
    },
    "sizeSavings": {
      "type": "object",
      "description": "File size comparison"
    }
  }
}

Usage Example

const result = await skill.execute({
  inputPath: './hero-image.jpg',
  outputPath: './responsive',
  widths: [320, 640, 960, 1280, 1920],
  formats: ['webp', 'avif', 'jpg'],
  generateMarkup: true
});