| name | image-writer |
| description | Create new "image" entries - visual content with brief captions. Use when the user says "add an image", "new image", "post an image", or mentions wanting to share a screenshot, photo, or visualization. |
| allowed-tools | ["Write","Read","Bash"] |
Image Writer
This skill creates new "image" entries - visual content with brief captions that appear in the homepage feed alongside your thoughts, ideas, and articles.
File Locations
- Content files:
src/content/images/
- Physical images:
/public/images/
Order of Operations:
- First, place the physical image file in
/public/images/
- Then, create the content entry in
src/content/images/
If the user provides an image path that doesn't exist yet, ask them to place the image first or help them do so.
Filename Format
Use the format YYMMDD.md where:
YY = 2-digit year (e.g., 25 for 2025)MM = 2-digit month (e.g., 01, 12)DD = 2-digit day (e.g., 05, 31)
Example: 260114.md for January 14, 2026
Image File Naming
For the physical image in /public/images/, use descriptive names like:
YYMMDD_description.ext (e.g., 260114_dashboard.png)YYMMDD_screenshot.ext (e.g., 260114_terminal.png)YYMMDD_photo.ext (e.g., 260114_conference.jpg)
This keeps things organized and makes images easy to find.
Frontmatter Schema
---
date: YYYY-MM-DD
imageUrl: /images/filename.ext
draft: false
author: Nikola Balić
---
Field details:
date: Required, YYYY-MM-DD format.imageUrl: Required, path to image in /public/images/. Must start with /images/.draft: Optional, defaults to false.author: Optional, defaults to "Nikola Balić".
Content Style Guidelines
Image captions should be brief and contextual:
- Length: 1-2 sentences typical (can be longer if needed)
- Purpose: Contextualize what the image shows
- Style: Conversational, can include links and emojis
- Content: Explain the "why" behind the image, not just "what" it is
Examples
Social media mention:
---
date: 2025-05-19
imageUrl: /images/250523_oreillyandkentbeck.jpeg
---
Apparently, @timoreilly considered it [noteworthy to highlight](https://www.oreilly.com/radar/takeaways-from-coding-with-ai/) that I agree with @KentBeck 🤷♂️ honored and humbled!
Dashboard visualization:
---
date: 2025-05-26
imageUrl: /images/apnea-comprehensive_dashboard.png
---
Claude 4 Sonnet loves complex dashboard visualisations. I have been playing with my Garmin data to better understand agentic future of data science research.
Screenshot/photo with context:
---
date: 2025-05-23
imageUrl: /images/250523_claude4imagecritic.jpeg
---
Claude 4 as image critic.
When to Use Images vs Other Content Types
| Type | When to use | Format |
|---|
| Image | Visual content (screenshot, photo, chart) with brief caption | date + imageUrl, YYMMDD.md |
| Thought | Quick insight, observation, philosophical reflection | Minimal frontmatter, blockquote style |
| Idea | Product/service concept with marketing flair | Structured frontmatter, pitch style |
| Now Entry | Life update with multiple focus areas | YYMMDD.md, ## sections |
| Article | Full blog post with narrative/technical depth | Complete frontmatter (tags, topics, etc.) |
How It Works
- Images appear on the homepage (
/) in the main feed
- Integrated with search at
/search
- Displayed with image and caption together
- Sorted chronologically (newest first)
Process
When the user wants to add an image:
- Confirm the image file exists in
/public/images/
- Get the image filename for the
imageUrl field
- Determine today's date for the filename (YYMMDD.md) and frontmatter (YYYY-MM-DD)
- Ask what context/caption they want to add
- Draft the caption following the style guidelines
- Create the file in
src/content/images/
- Confirm creation with the user
Important Reminders
- Always verify the physical image exists in
/public/images/ first
- The
imageUrl must start with /images/ (not /public/images/)
- Image files can be any format:
.jpg, .png, .jpeg, .gif, .webp, etc.
- Keep captions brief - this isn't a blog article, just context for the visual
