bahayonghang/article-cover
content/skills/media-skills/article-cover/SKILL.md
Generate article cover images as SVG. Use when creating cover/banner/header graphics for blogs, documentation, social media cards, or OG images. Trigger this skill whenever the user mentions article covers, blog banners, post thumbnails, social sharing images, or any visual header for written content — even if they don't explicitly say 'SVG'.
$ install --global
skillsauthnpx skillsauth add bahayonghang/my-claude-code-settings article-coverInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 20, 2026, 3:21 PM3.3s1 file scanned
SKILL.md
- name:
- article-cover
- description:
- Generate article cover images as SVG. Use when creating cover/banner/header graphics for blogs, documentation, social media cards, or OG images. Trigger this skill whenever the user mentions article covers, blog banners, post thumbnails, social sharing images, or any visual header for written content — even if they don't explicitly say 'SVG'.
- version:
- 1.0.0
- category:
- content-creation
- tags:
- [svg, graphics, cover-image, blog, design, banner, og-image, social-media, thumbnail]
- argument-hint:
- [article-title-or-topic]
- allowed-tools:
- Write, Read
Article Cover SVG Generation
- Check if
$ARGUMENTSis provided. If empty, prompt the user for the article title or topic. - Analyze the topic to determine the main title, subtitle, and layout pattern.
- Read
$SKILL_DIR/references/DESIGN_SYSTEM.mdfor SVG templates, color systems, and design rules. - Choose a layout pattern (Comparison, Flow, Centered Concept, or Typography-First) based on the topic. Layout selection directly impacts visual communication efficiency — a mismatched layout weakens the cover's ability to convey the article's core message at a glance.
- Generate the SVG content following the visual hierarchy and color contrast rules defined in the design system.
- Write the output to a file named
{article-slug}-cover.svgin the appropriate directory (e.g., alongside the article or in anassets/folder). - Validate the generated SVG: ensure all tags are properly closed,
viewBoxattribute is present on the root<svg>element, and all<text>elements have afont-familyattribute.
Output
- A valid, visually striking SVG file containing the article cover.
- Notify the user that the file can be opened in a browser or converted to PNG via Inkscape/browser screenshot.
Troubleshooting
- If text renders incorrectly, ensure
font-family="Arial, sans-serif"is used for better cross-platform and CJK support. - If contrast is low, verify that gradients and background colors follow the guidelines in the design system.
- If the SVG displays as blank in the browser, check that the root
<svg>element has a validviewBoxattribute and thexmlns="http://www.w3.org/2000/svg"namespace is present.
Related Skills
bahayonghang/codex-dynamic-workflows
development
VerifiedTrustedCommunity
Use only when the user explicitly asks for swarm, subagents, parallel agents, dynamic workflow, multi-agent orchestration, 多智能体编排, or when the task truly needs coordinated research plus implementation plus review plus verification packets. Do not use for ordinary code review, planning-only work, single-line bugfixes, routine audits, or migrations unless orchestration is requested or at least two independent workflow dimensions are present.
15SKILL.mdUpdated Jun 4, 2026
bahayonghang/code-quality-review
development
VerifiedTrustedCommunity
Run a code quality review focused on maintainability, structure, abstraction quality, file growth, branching complexity, boundary cleanliness, and refactoring opportunities. Use when the user asks for code quality review, code review, maintainability review, architecture quality review, PR code quality feedback, 代码质量审查, 代码质量 review, 可维护性审查, 架构质量审查, or review comments about code structure. Do not use for pure security review, formatting-only review, performance profiling, or implementation tasks unless the user also asks for a code quality review.
15SKILL.mdUpdated Jun 4, 2026
bahayonghang/spark
development
VerifiedTrustedCommunity
Plan-first brainstorming workflow that turns an idea into an approved Markdown implementation plan by default. Use when the user wants to brainstorm, design, scope, or plan a feature/spec before implementation. Spark explores project context, asks only blocking questions, writes the plan under the project root's .plannings/YYYY-MM-DD-feature-slug.md path, self-reviews it, and waits for user approval. Create an HTML or visual plan/spec only when the user explicitly asks for HTML, browser-viewable, or visual output; save the paired .html beside the Markdown plan.
15SKILL.mdUpdated May 29, 2026
bahayonghang/code-quality-review
development
VerifiedTrustedCommunity
Run a code quality review focused on maintainability, structure, abstraction quality, file growth, branching complexity, boundary cleanliness, and refactoring opportunities. Use when the user asks for code quality review, code review, maintainability review, architecture quality review, PR code quality feedback, 代码质量审查, 代码质量 review, 可维护性审查, 架构质量审查, or review comments about code structure. Do not use for pure security review, formatting-only review, performance profiling, or implementation tasks unless the user also asks for a code quality review.
15SKILL.mdUpdated May 29, 2026