Optimizes image performance and enforces best practices using Astro's built-in asset management system.
This skill guides Claude in implementing high-performance image handling within Astro and MDX files by mandating the use of the astro:assets module. It ensures that images are properly imported from the source directory rather than the public folder, enabling automatic resizing, modern format conversion (WebP/AVIF), and lazy loading. By enforcing standardized patterns and providing linting support, it prevents common pitfalls like unoptimized raw HTML tags, layout shifts, and broken production paths.
주요 기능
01Automated migration from raw <img> tags to optimized <Image> components
02Enforcement of src/assets/ import patterns for maximum performance
03Automatic conversion of images to modern formats like WebP and AVIF
04Integration with asset linting to catch unoptimized images early
05Comprehensive support for both .astro components and .mdx content
061 GitHub stars
사용 사례
01Converting existing Astro projects from /public image storage to optimized assets
02Standardizing image handling across a large team of developers
03Debugging image 404 errors or performance issues in production builds
