Enforce Astro Image and Picture components with image.domains configuration.
npx skills add https://github.com/tumes/dotfiles-nvim --skill astro-images-tumes
Please help me install this Agent Skill. Skill: astro-images Source: https://github.com/tumes/dotfiles-nvim/tree/main/claude/skills/astro-images Command: npx skills add https://github.com/tumes/dotfiles-nvim --skill astro-images-tumes
This Skill enforces the use of Astro image components (Image and Picture) and remote-image caching to replace direct <img> usage and ensure optimization.
Replace all <img> tags with Astro's Image or Picture components and configure image.domains in your Astro config to enable remote-image optimization.
High-intent search queries and answers about installing and using this skill.
To optimize remote images in Astro, you must configure the image.domains array in your Astro config file. This enables the framework to fetch, cache, and process remote images using its built-in Image or Picture components.
Use the Astro Picture component for responsive images requiring different viewports and automatic formats. Use the Image component for fixed-size images like icons and logos where responsive scaling is unnecessary.
To enable image optimization inside Astro content collections, use the image() helper function within your collection schema. This allows Astro to process and cache both local and remote images defined in your frontmatter.
The best way to migrate standard HTML img tags to Astro is to replace them with Astro's Image or Picture components. This enforces best practices by automatically handling optimization, caching, and responsive formats.
Yes, Astro requires domain whitelisting for remote image optimization. You must explicitly define all external source URLs in the image.domains property of your Astro configuration to allow image processing and caching.
Astro image components may not render optimized files if image.domains is not configured or if direct <img> tags are used inconsistently. Ensure consistent component usage and proper domain configuration to satisfy optimization best practices.
ZiadNagarBuild content-driven websites with Astro islands architecture and SSR support.
dev-khoiServe breakpoint-specific image variants in Next.js using getImageProps and picture elements.
mattaningramDevelop Astro websites with islands architecture, content collections, hybrid rendering, SSR adapters, and schema validation.
oakossOrganize design assets with directory structures, naming conventions, and Git LFS.
