You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: .claude/skills/create-blog-post/SKILL.md
+94-16Lines changed: 94 additions & 16 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -30,8 +30,8 @@ Automates conversion of a draft markdown file with metadata into a production-re
30
30
## Required Files in `create-blog-post/` Directory
31
31
32
32
1.**Draft markdown file** (any .md filename)
33
-
2.**`art.webp`** - Hero/OG image (required)
34
-
3.**`image2.png`, `image3.png`, etc.** - Additional images (optional, will be converted to WebP)
33
+
2.**`art.*`** - Hero/OG image (required, any common image format: `.webp`, `.png`, `.jpg`, `.jpeg`)
34
+
3.**`image2.*`, `image3.*`, etc.** - Additional images (optional, any common image format)
35
35
36
36
## Draft File Format
37
37
@@ -84,32 +84,63 @@ Creates a production-ready blog post at:
84
84
85
85
## Conversion Process
86
86
87
-
### 1. Parse Metadata
87
+
### 1. Pre-process Draft
88
+
89
+
Before doing anything else, strip out embedded base64 image data from the draft file using a shell command. **Do not read the draft file before this step** — the base64 data can make the file extremely large.
90
+
91
+
Google Docs markdown exports include image references like `![][image1]` in the content body, with corresponding base64 definitions at the bottom of the file in the format:
92
+
93
+
```text
94
+
[image1]: <data:image/png;base64,iVBORw0KGgo... (potentially megabytes of data)>
95
+
```
96
+
97
+
Run this `sed` command via the Bash tool to strip them in-place:
98
+
99
+
```shell
100
+
sed -i '/^\[image[0-9]*\]: <data:/d'"create-blog-post/draft.md"
101
+
```
102
+
103
+
- This removes all lines matching the base64 image definition pattern
104
+
- The `![][image1]` references in the content body are preserved — they will be replaced with proper image paths later
105
+
- Only after this command completes should you read the draft file
106
+
107
+
### 2. Parse Metadata
88
108
89
109
- Extract blog title, author, publish date, category (convert to YAML list), Social/OpenGraph title and description
90
110
- Auto-generate URL slug from blog title (lowercase, hyphens for spaces, remove special characters)
91
111
- Remove "# Blog notes/preparations" section and all content under it (up to "# Blog content")
92
112
- Remove all lines that start with ☝️ emoji (instruction lines)
93
113
- Convert `### **– Summary break / Read more –**` marker to `<!--more-->`
94
114
95
-
### 2. Process Images
115
+
### 3. Process Images
116
+
117
+
Before processing images, ensure the `cwebp` tool is installed. If not, install it:
118
+
119
+
```shell
120
+
# Check if cwebp is available, install if missing
121
+
which cwebp || sudo apt-get install -y webp
122
+
```
96
123
97
-
**Hero image (`art.webp`):**
124
+
**Hero image (`art.*`):**
98
125
99
-
- Move to `source/images/blog/YYYY-MM-slug/art.webp`
126
+
- Find the `art` image in `create-blog-post/` (any extension: `.webp`, `.png`, `.jpg`, `.jpeg`)
127
+
- If the source is already `.webp`, copy it to `source/images/blog/YYYY-MM-slug/art.webp`
128
+
- If the source is any other format, convert to WebP: `cwebp -resize 1200 630 -q 85 input -o source/images/blog/YYYY-MM-slug/art.webp`
129
+
- The OG image must be exactly 1200x630 pixels — the source image should already be this size, so use `-resize 1200 630` to ensure correctness
100
130
- Replace `![][image1]` reference in "# Blog content" section with: `<img src="/images/blog/YYYY-MM-slug/art.webp" alt="Blog Title" style="border: 0;box-shadow: none;">`
101
131
- CRITICAL: Use double quotes for all HTML attributes (prevents breaking on apostrophes in alt text)
102
132
- Alt text uses the Social/OpenGraph title or blog title
103
133
- No wrapper tags (no `<p>` tag)
104
134
105
135
**Additional images (if any):**
106
136
107
-
- Find `image2.png`, `image3.png`, etc. in `create-blog-post/` directory
@@ -120,13 +151,28 @@ Creates a production-ready blog post at:
120
151
121
152
- Keep as Markdown links: `[text](/path)`
122
153
123
-
### 4. Clean Content
154
+
### 5. Device List (Works with Home Assistant posts only)
155
+
156
+
If the blog post category is `Works-with-Home-Assistant`, look for a section that lists certified/supported devices. Replace any manually written device list with the dynamic device list shortcode:
157
+
158
+
```liquid
159
+
{% include integrations/device_list.html brand="brandname" %}
160
+
```
161
+
162
+
- The `brand` value must match a brand in `source/_data/wwha_devices.json` (for example: `"eve"`, `"heatit"`, `"shelly"`, `"zooz"`)
163
+
- The brand name is typically the lowercase company/brand name from the draft
164
+
- If the draft contains a manually listed set of devices (often as a bullet list or table), replace that list with the shortcode
165
+
- Keep any introductory or closing text around the device list — only replace the list itself
-**Text content**: Do not change the author's wording, phrasing, or writing style. The blog text should stay as-is. If you spot obvious typos or locale spelling issues (such as British English instead of American English), do not fix them silently — collect them and ask the user for confirmation before applying any changes.
173
+
-**Emojis**: Preserve all emojis that appear in the blog content. Do not strip them out.
-`cwebp` tool is required — the skill will auto-install it via `sudo apt-get install -y webp` if not already present
164
211
165
212
**Content processing:**
166
213
167
214
- Remove "# Blog notes/preparations" section entirely
168
215
- Remove all lines starting with ☝️ emoji (instruction lines)
169
216
- Convert `### **– Summary break / Read more –**` to `<!--more-->`
170
217
218
+
**Device lists (Works with Home Assistant posts):**
219
+
220
+
- WWHA blog posts (category `Works-with-Home-Assistant`) typically include a list of certified devices in the draft (as bullet points, tables, or similar)
221
+
- Strip out the manually written device list entirely and replace it with: `{% include integrations/device_list.html brand="brandname" %}`
222
+
- The `brand` value must match an entry in `source/_data/wwha_devices.json` — verify the brand exists in that file before using it
223
+
- Keep any surrounding text that introduces or follows the device list (for example "Here's what's made the cut from Heatit:") — only replace the device list itself
224
+
171
225
**Output format:**
172
226
173
227
- Filename: `YYYY-MM-DD-slug.markdown`
@@ -178,3 +232,27 @@ This would create:
178
232
179
233
- Only `www.home-assistant.io` and `home-assistant.io` stay as Markdown links
180
234
- All other domains/subdomains → HTML `<a>` tags with `target="_blank" rel="noopener"`
235
+
236
+
## Post-processing summary
237
+
238
+
After the blog post has been created, output a summary to the user covering:
239
+
240
+
**Metadata:**
241
+
- Title, author (and whether they were verified in `people.yml`), date, category
242
+
243
+
**Images:**
244
+
- Each source image, its original dimensions/format, and where it was output (with the conversion applied)
245
+
246
+
**Content transformations:**
247
+
- A bulleted list of every notable transformation applied, such as:
248
+
- Sections/content removed (base64 data, blog template, notes, instruction lines)
249
+
- Image references replaced
250
+
- Summary break conversion
251
+
- Device list replacement (if WWHA, including brand used and number of devices)
252
+
- Link conversions (external to HTML, internal to relative markdown)
**Proposed text changes (requires user approval):**
258
+
- If any typos or locale spelling issues were spotted (such as British to American English), list each one and ask the user whether to apply them. Do not apply these changes until the user confirms.
0 commit comments