菜单
Implement images into page sections. Converts from /public/raw/[page]/ to WebP with responsive variants, replaces CDN placeholders with Next.js Image component. Use after midjourney-prompts skill. Triggers on "implement images", "add images to page", "replace placeholder images".
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Build pages by installing shadcnblocks sections and implementing i18n. Use for each page after branding is defined. Takes page route and list of sections to install. Installs sections in order, creates page file, extracts text to de.json/en.json, and adds useTranslations.
Add smooth scrolling for same-page anchor links only. Uses JavaScript to handle
Add cinematic lerp-based smooth scrolling for all scroll inputs (mouse wheel, trackpad, touch). Creates butter-smooth momentum scrolling like premium agency websites. Works alongside existing smooth-scroll anchor links.
Define brand styling for website projects. Updates globals.css with CSS color variables (oklch format), typography (h1-h6, p, a, blockquote), and container styles. Use at the start of a project after sitemap is created. Requires primary, secondary, and accent colors plus font choice.
Add elegant page transition overlay using 3 staggered color layers. Overlay covers screen during navigation and reveals once new page is loaded. Use during /init or standalone.
Configure footer navigation links for SEO completeness. Sets up all pages (Homepage, Services, About, Contact, Impressum, Datenschutz) in organized groups. Dynamically finds footer*.tsx component. Updates i18n with all footer keys.
| name | webp-images |
| description | Implement images into page sections. Converts from /public/raw/[page]/ to WebP with responsive variants, replaces CDN placeholders with Next.js Image component. Use after midjourney-prompts skill. Triggers on "implement images", "add images to page", "replace placeholder images". |
Convert and implement images into page sections.
<Image>./scripts/convert-to-webp.sh [input_dir] [output_dir]
Default paths:
/public/raw/[page]//public/images/[page]/Generates responsive variants: 640w, 1024w, 1920w
See references/nextjs-patterns.md for code examples.
| 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 |
Add to messages/de.json and messages/en.json:
{
"hero": {
"imageAlt": "Beschreibung des Bildes"
},
"projects": {
"items": {
"0": { "imageAlt": "Projekt 1 Beschreibung" }
}
}
}
<img> tags converted to <Image>priority set for above-fold imagessizes prop set for responsive images