bahayonghang/article-cover
content/skills/visual-media-design/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'. Do not use it for full-scene illustrations, photo editing, or slide theme work.
$ 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 28, 2026, 5:28 AM149.7s2 files 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'. Do not use it for full-scene illustrations, photo editing, or slide theme work.
- version:
- 1.1.0
- category:
- visual-media-design
- tags:
- [svg, graphics, cover-image, blog, design, banner, og-image, social-media, thumbnail]
- argument-hint:
- [article-title-or-topic]
- allowed-tools:
- Read, Write
Article Cover SVG Generation
Use this skill to turn an article topic into a clean, reusable SVG cover asset.
When To Use
- Blog or docs header images
- OG / social preview art
- Publication thumbnails or article hero graphics
Do Not Use
- Full illustrations, raster image editing, or photo compositing
- Slide-deck themes or multi-slide styling
- Flowcharts, technical diagrams, or whiteboard sketches
Inputs
- Required: article title, topic, or article file path
- Optional: subtitle, output path, aspect ratio, color mood, publication/brand context
Workflow
- Check
$ARGUMENTS. If the request does not include a usable topic or file path, ask for the article title or topic before generating anything. - Resolve the output target:
- if the user gave an explicit filename, use it
- if the user gave an article file path, save alongside it or inside a nearby
assets/directory as{article-slug}-cover.svg - otherwise save as
{article-slug}-cover.svgin the active working directory
- Read
$SKILL_DIR/references/DESIGN_SYSTEM.mdbefore choosing shapes, color, or composition. - Distill the topic into:
- a main title
- an optional subtitle or kicker
- one dominant visual metaphor
- a layout pattern: Comparison, Flow, Centered Concept, or Typography-First
- Draft the SVG using the design system rules for hierarchy, color contrast, and spacing. Favor one clear focal idea over decorative clutter.
- Include SVG essentials in the generated file:
- root
xmlns="http://www.w3.org/2000/svg" - a valid
viewBox - accessible
<title>and<desc>tags when practical - explicit
font-familyon text elements
- root
- Write the SVG to the resolved path.
- Validate the result before finishing:
- tags close correctly
- title remains readable at thumbnail size
- text does not overflow the canvas
- contrast is strong enough against the background
Output Contract
Return:
- the final SVG file path
- the chosen layout pattern
- a one-sentence rationale for the visual direction
Do not paste the full SVG into chat unless the user explicitly asks for inline code.
Troubleshooting
- If the topic is too broad, ask the user to narrow the angle instead of generating a generic cover.
- If text renders incorrectly, use
font-family="Arial, sans-serif"for reliable cross-platform and CJK support. - If contrast is low, simplify the palette and re-check against the design system guidance.
- If the SVG displays blank in a browser, verify the root namespace,
viewBox, and that visible elements are inside the canvas bounds. - If the user actually wants a scene illustration or raster artwork, hand off to an image-generation skill instead of forcing SVG.
Final Checklist
- Output path is explicit
- Layout choice matches the article angle
- SVG is valid and viewable in a browser
- Title is legible at social-preview scale
Related Skills
bahayonghang/goal-meta-skill
development
VerifiedTrustedCommunity
Turn vague or complex Codex tasks into strong `/goal` commands with outcome, verification, constraints, boundaries, iteration policy, completion evidence, and pause/block conditions. Use when the user asks for Codex goal instructions, Goal 指令, 目标指令, `/goal` prompts, 中文 Goal 模板, plan-to-goal interviews, success criteria, verification commands, or bounded agent work definitions.
15SKILL.mdUpdated Jun 13, 2026
bahayonghang/ast-grep
tools
VerifiedTrustedCommunity
Write, debug, and validate ast-grep structural code search rules. Use this skill when the user needs syntax-aware code search, AST pattern matching, structural refactor discovery, language-construct queries, or searches that plain text tools like rg can miss, such as finding functions with particular descendants, calls inside specific contexts, missing error handling, React hook shapes, decorators, or other Tree-sitter-backed code structures.
15SKILL.mdUpdated Jun 9, 2026
bahayonghang/goudi
development
VerifiedTrustedCommunity
Use when the user asks to ground an ambitious proposal, avoid over-grand designs, make a bold direction executable, pressure-test feasibility, prevent "too much vision and too little landing", or turn a strategy/refactor/product idea into the smallest verifiable first move with stop rules. Trigger for requests such as 落地, 先落地, 别太飘, 收一收, 可执行, 可验证, 止损, and for follow-ups after geju-style big-picture thinking. Do not trigger for ordinary code review or implementation unless the user explicitly asks to ground or shrink the plan first.
15SKILL.mdUpdated Jun 7, 2026
bahayonghang/geju
development
VerifiedTrustedCommunity
Use when the user explicitly asks to think bigger, open up the design space, challenge conservative design, avoid over-indexing on backward compatibility, escape local-detail fixation, or make a bold high-level product or architecture direction call. Use for strategic reframing, not for ordinary code review, PRD writing, implementation planning, or adversarial risk review.
15SKILL.mdUpdated Jun 7, 2026