Article Cover SVG Generation

• Check if $ARGUMENTS is 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.md for 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.svg in the appropriate directory (e.g., alongside the article or in an assets/ folder).

• Validate the generated SVG: ensure all tags are properly closed, viewBox attribute is present on the root <svg> element, and all <text> elements have a font-family attribute.

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 valid viewBox attribute and the xmlns="http://www.w3.org/2000/svg" namespace is present.