// Create a new blog post for the Squabbit website. Use when the user asks to write, add, or create a blog post or blog entry.
Use when adding, removing, or renaming entries in the site nav (`header-nav.html`) — covers the manual second step required for pages that build.js excludes (index.html, advertise.html, branding.html, privacyPolicy.html), plus running `node build.js` for everything else.
Use when creating or updating any help page, article page, or content page on the Squabbit website. Defines the standard layout, colors, typography, hover effects, and page structure that all pages must follow.
Take a screenshot from a connected Android emulator, resize it, and convert to WebP for use in help articles or web pages. Use when the user asks to capture, screenshot, or snap the emulator screen.
Use when creating a help article for a golf game format or scoring type. Covers the full process - HTML article creation, SEO metadata, articles.json entry, and group page link.
Use when editing header-nav.html, footer-content.html, or creating new HTML pages. Inlines shared nav and footer into all site pages.
| name | blog-post |
| description | Create a new blog post for the Squabbit website. Use when the user asks to write, add, or create a blog post or blog entry. |
| argument-hint | [topic or feature name] |
| allowed-tools | Read, Grep, Glob, Edit, Write, Bash |
| user-invocable | true |
Create a new blog post about: $ARGUMENTS
Blog posts live in blog/entries/<postName>/ with an HTML file and associated images.
Read blog/entries/publicLeaderboards/publicLeaderboards.html to match the current style and HTML template.
Directory: blog/entries/<postName>/
File: blog/entries/<postName>/<postName>.html
Template structure:
/css/article.css, meta description, canonical URL, OG tags, Twitter cards, and BlogPosting JSON-LD#header-placeholder div (will be replaced by build script).container.mt-5.pt-5 > .content-container wrapper<h1> title<p class="c2"> for paragraphs and <p class="c1"> for spacing<p class="text-center"> and inline <span> wrapper#footer-placeholder div (will be replaced by build script)Image sizing: Display phone screenshots at approximately 230x516px. Adjust proportionally if the source image has a different aspect ratio.
Leave <!-- TODO: description --> comments with placeholder image references (PLACEHOLDER_name.webp) where screenshots are needed. Then use the /emulator-screenshot skill to capture each one:
/emulator-screenshot blog/entries/<postName>/<imageName>.webpEdit blog.html to add a new entry card at the top (newest first):
<a href="/blog/entries/<postName>/<postName>.html" class="blog-entry-link">
<div class="blog-entry">
<img src="/blog/entries/<postName>/thumb.webp" alt="Blog Image" class="blog-image">
<div class="blog-content">
<h2 class="blog-title">Post Title</h2>
<p class="blog-date">Mon DD, YYYY</p>
<p class="blog-blurb">Short one-line description</p>
</div>
</div>
</a>
Create a thumbnail for the blog index card. Use 640px width since the thumbnail is also used in the app and needs to stay sharp:
magick blog/entries/<postName>/<image>.webp -resize 640x blog/entries/<postName>/thumb.webp
Add the new post URL to sitemap.xml:
<url>
<loc>https://www.squabbitgolf.com/blog/entries/<postName>/<postName>.html</loc>
<changefreq>yearly</changefreq>
<priority>0.6</priority>
</url>
Run node build.js to inline the header and footer into the new post.