webp-images

📁 manuelvillarvieites/n8n-and-claude 📅 Today

总安装量

周安装量

#77914

全站排名

安装命令

npx skills add https://github.com/manuelvillarvieites/n8n-and-claude --skill webp-images

Agent 安装分布

amp 1

cline 1

opencode 1

cursor 1

continue 1

kimi-cli 1

Skill 文档

Image Implementation

Convert and implement images into page sections.

Workflow

User provides: page route, source folder, image-to-section mapping
Run WebP conversion script
Replace CDN placeholders with Next.js <Image>
Add alt text keys to i18n files

Convert Images

./scripts/convert-to-webp.sh [input_dir] [output_dir]

Default paths:

Input: /public/raw/[page]/
Output: /public/images/[page]/

Generates responsive variants: 640w, 1024w, 1920w

Replace Patterns

See references/nextjs-patterns.md for code examples.

Quick Reference

Image Type	Props	Use Case
Fixed size	`width`, `height`	Testimonials, logos
Fill container	`fill`, `sizes`	Hero, project thumbnails
Above fold	`priority`	First visible image
Object fit	`className="object-cover"`	Cropped images

i18n Alt Text

Add to messages/de.json and messages/en.json:

{
  "hero": {
    "imageAlt": "Beschreibung des Bildes"
  },
  "projects": {
    "items": {
      "0": { "imageAlt": "Projekt 1 Beschreibung" }
    }
  }
}

Checklist

Images converted to WebP
Responsive variants generated
CDN URLs replaced with local paths
<img> tags converted to <Image>
Alt text added to i18n
priority set for above-fold images
sizes prop set for responsive images

GitHub 仓库 ↗ ← 返回陌讯 Skills 聚合平台