fix-blog-images
Fix and optimize images in uncommitted blog posts. Use when preparing blog posts for publication, fixing broken image paths, renaming generic image names (image.png), moving images to proper /images/blog/ directory, improving alt text, or checking image references before committing. Trigger on "fix blog images", "check images", "prepare post for publish", or after pasting screenshots into markdown.
When & Why to Use This Skill
This Claude skill automates the management and optimization of images within Markdown-based blog posts. It streamlines the pre-publication workflow by fixing broken paths, renaming generic files to SEO-friendly formats, and ensuring accessibility through improved alt text, helping maintain a professional and search-optimized technical blog.
Use Cases
- Pre-publication Audit: Automatically scan uncommitted blog posts to identify broken image links and missing alt text before committing code.
- SEO Image Optimization: Rename generic image files like 'image.png' to descriptive, date-prefixed names that improve search engine indexing.
- Accessibility Enhancement: Generate and update descriptive alt text for images to comply with web accessibility standards and improve user experience.
- Directory Management: Automatically move pasted screenshots or local images to the centralized '/images/blog/' directory while updating Markdown references to absolute paths.
| name | fix-blog-images |
|---|---|
| description | Fix and optimize images in uncommitted blog posts. Use when preparing blog posts for publication, fixing broken image paths, renaming generic image names (image.png), moving images to proper /images/blog/ directory, improving alt text, or checking image references before committing. Trigger on "fix blog images", "check images", "prepare post for publish", or after pasting screenshots into markdown. |
Fix Blog Images
Fixes image issues in uncommitted blog posts before publishing.
Workflow
- Run the analysis script:
python3 scripts/fix_blog_images.py --json
Review output and for each issue:
- rename_and_move: Move image to
/images/blog/with descriptive name - improve_alt_text: Update alt text to describe the image content
- missing_image: Locate or remove the reference
- rename_and_move: Move image to
Apply fixes:
- Move/rename image files to
packages/blog/public/images/blog/ - Update markdown references to use absolute paths
/images/blog/... - Add descriptive alt text
- Move/rename image files to
Image Conventions
- Location: All images in
packages/blog/public/images/blog/ - Naming:
YYYYMMDD-HHMM-descriptive-name.pngorYYYYMMDD-descriptive-name.png - References: Use absolute paths
/images/blog/filename.png - Alt text: Describe what the image shows for accessibility
Example Fix
Before:
After:
Addtional Notes
Don't try and Optimize Images. a git hook will run image optimization on commit. This skill is just to fix paths, names, and alt text before committing.