release-post

Generates an X release announcement with a bento-grid card rendered to PNG via headless Playwright.

1|Updated Feb 14, 2026
One-click install
npx skills add https://github.com/robritacca-dotcom/design-system --skill release-post-robritacca-dotcom
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: release-post
Source: https://github.com/robritacca-dotcom/design-system/tree/main/.claude/skills/release-post
Command: npx skills add https://github.com/robritacca-dotcom/design-system --skill release-post-robritacca-dotcom

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright.

What problem does it solve? Announcing an npm release on X requires assembling accurate release facts, designing an on-brand image, and writing copy that fits the character limit — a manual, error-prone process that often drifts from the design system's actual tokens and content rules. ## Core Features & Use Cases - Fact-grounded release summary: Pulls the headline features from the git tag message and commit log, never from memory, so the announcement matches what actually shipped. - Token-accurate release card: Draws a 1200×675 bento-grid HTML card using real values read from the design system's token CSS files, then renders it headlessly with Playwright at 2x scale into a paste-ready PNG. - On-voice post copy: Writes announcement copy that follows the project's content guide — sentence case, no emoji, no exclamation marks, within the 280-character limit. - Use Case: After tagging v0.9.0 of @robr0/design-system, ask for the release post and receive a design-QA'd PNG card plus ready-to-paste X copy naming the real shipped components. ## Quick Start Ask the assistant to make the release post for the version you just tagged, and it will gather the release facts, render the card PNG, and draft the announcement copy.

Frequently Asked Questions about release-post

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a release announcement image for an npm package?

Author an HTML card at 1200×675 using your design system's token values, then render it headlessly with Playwright using deviceScaleFactor 2 for a crisp 2400×1350 PNG. Wait for document.fonts.ready before screenshotting so custom fonts load correctly.

How to render HTML to PNG with Playwright headlessly?

Launch Chromium headless, set the viewport to your target size with deviceScaleFactor 2, navigate with waitUntil 'networkidle', await document.fonts.ready, then screenshot the element. On Windows, import Playwright via an absolute file:// URL since ESM ignores NODE_PATH.

Does the release card use real design token values?

Yes, all colours, type sizes, and radii are read from the token CSS files (tokens-primitives.css, tokens-dark.css, tokens-typography.css) during the session. No hex value or font size is written from memory, so the card cannot drift from the live system.

Why does my Playwright screenshot show fallback fonts?

The screenshot fires before web fonts finish loading. Add await page.evaluate(() => document.fonts.ready) plus a short settle delay after navigation, and use waitUntil 'networkidle' so the Google Fonts link resolves before capture.

What are the limits of the generated X post copy?

Copy must fit the 280-character limit, follow the project's content guide (sentence case, no emoji, no exclamation marks), and name real shipped components from the release diff. Posting itself is manual; the skill delivers only the PNG and copy.