code-card-news-generator_skill

Overview

This skill generates polished code explanation cards with syntax highlighting for tutorials and educational content. It produces a title card and one or more explanation cards containing a short description, a runnable code snippet, and a brief explanation. The output is optimized for 1080x1080 social posts with specified dark/pink styling and monospace code rendering.

How this skill works

You provide a topic and a list of functions or concepts to explain. The skill builds one title card and one explanation card per item, formatting each card with a numbered header, a concise description, a code block (max 5–7 lines), and a short explanation. It can run an automated script to export PNG files and returns download links after generation.

When to use it

• Creating bite-sized code tutorial posts for social media
• Generating teaching assets for live workshops or screencasts
• Preparing visual study cards for documentation or onboarding
• Converting list of library functions into quick reference cards
• Making multilingual support cards by providing translated descriptions

Best practices

• Keep one concept per card to maintain clarity
• Limit code examples to 5–7 lines so they fit the canvas
• Use concise descriptions and simple, working examples
• Include short inline comments in code to aid comprehension
• Test code snippets before generation to avoid runtime confusion

Example use cases

• React Router Hooks: generate cards for useNavigate, useParams, useLocation
• Array methods: create cards for map, filter, reduce with examples
• Python built-ins: cards for enumerate, zip, lambda with usage notes
• CSS utilities: explain flex-direction, justify-content, align-items visually
• Git quick reference: commit, push, pull, merge cards for new contributors