Generate professional dark-themed release announcement posters for GitHub releases. Use when the user wants to create a release poster, announcement image, changelog graphic, or visual summary for software releases. Triggers include "create release poster", "make announcement image", "generate release graphic", "版本发布海报", or when given a GitHub release URL with a request to visualize it. Automatically adapts to different categories, content lengths, and release note structures.
Generate professional, dark-themed release announcement posters from GitHub release notes with automatic adaptation to varying content structures.
Fetch the release notes from the GitHub URL:
# Use WebFetch to extract release content
result = webfetch(github_url, prompt="Extract complete release notes including all sections and bullet points")
Parse the extracted content to identify:
For each section found in the release notes:
references/category-styles.md)Common categories:
For unknown categories: Generate appropriate styling by:
references/icon-generation.mdCreate the poster using the template structure:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>{project_name} {version} 正式发布</title>
<style>
/* Deep dark theme with glassmorphism effects */
body {
background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 50%, #0a0e27 100%);
}
.content-tray {
background: linear-gradient(180deg, rgba(15, 23, 42, 0.85) 0%, rgba(15, 23, 42, 0.75) 100%);
backdrop-filter: blur(30px);
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6),
0 0 0 1px rgba(59, 130, 246, 0.25),
inset 0 2px 0 rgba(255, 255, 255, 0.1);
}
/* Dynamic accent colors for each category */
.block-{category} {
--accent-color: {color};
--glow-color: {color with alpha};
}
</style>
</head>
<body>
<!-- Hero section with title, version, date -->
<!-- Timeline sections (alternating left/right layout) -->
<!-- Footer with GitHub URL -->
</body>
</html>
Key styling principles:
nth-child(even) flex-direction reversalFor each category, create an appropriate SVG icon (see references/icon-generation.md for templates):
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad-{name}">
<stop offset="0%" style="stop-color:{color1}"/>
<stop offset="100%" style="stop-color:{color2}"/>
</linearGradient>
</defs>
<g>
<!-- Icon elements using the gradient -->
</g>
</svg>
Icon design principles:
Different category counts: The timeline structure automatically adapts. Each category becomes a feature-block with alternating layout.
Variable content length:
New/unknown categories:
references/icon-generation.mdMissing standard categories: Skill works with any combination of categories found in the release notes.
CRITICAL: Always use the actual release date from GitHub, NOT the current date.
Extract date from GitHub release metadata or tag creation date. Format as YYYY年MM月DD日.
Save the complete HTML to /sessions/vigilant-trusting-galileo/mnt/outputs/{project}-{version}.html
Provide the computer:// link to user. User can:
Preserve original language mixing (Chinese titles, English technical terms). This is typical for Chinese software documentation.
Keep code snippets, version numbers, technical abbreviations in original form (e.g., "W8A8-int8", "MoE", "310P").
For releases with 8+ categories, maintain the same structure. The alternating timeline layout handles any number of sections gracefully.
If default icon seems inappropriate:
Complete mapping of common release note categories to accent colors, gradients, and icon recommendations. Consult when styling categories.
SVG icon templates and generation patterns for creating new icons that match the poster's aesthetic. Use when encountering unknown categories.
The final poster should:
npx skills add opensourceways/github-release-poster下载完整 Skill 目录，包含 SKILL.md 及所有相关文件
Category:other