skills.rest
FranciscoMoretti
FranciscoMorettiCOMMUNITY
Explore all skills by this author →
Website𝕏@franmoretti_GitHub

generate-code-snippet

Generates base64url-encoded code snippet URLs for code.franciscomoretti.com sharing.

1.2k|117|Updated Mar 22, 2025
Search Tags:#presentation#TSX#social sharing#code snippet#base64url#URL generation#code image
One-click install
npx skills add https://github.com/FranciscoMoretti/sparka --skill generate-code-snippet
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: generate-code-snippet
Source: https://github.com/FranciscoMoretti/sparka/tree/main/.agents/skills/generate-code-snippet
Command: npx skills add https://github.com/FranciscoMoretti/sparka --skill generate-code-snippet

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Sharing code on social media or in presentations often requires manually formatting, screenshotting, and styling snippets. This Skill automates the creation of a styled, shareable code snippet URL that renders the code as an image-ready page.

Core Features & Use Cases

  • Snippet URL Generation: Base64url-encodes a code snippet and builds a complete code.franciscomoretti.com URL with theme, dark mode, padding, and language parameters.
  • Formatting Guidance: Enforces concise snippets of up to 15 lines with real imports, a short opening comment, and a preferred language (tsx, shell, or json).
  • Use Case: When preparing a tweet or conference slide showing a TypeScript pattern, ask for a snippet and receive both the fenced code block and a ready-to-share link rendering it with the sparka theme.

Quick Start

Ask the assistant to generate a shareable code snippet URL for a short TypeScript example using the generate-code-snippet skill.

Frequently Asked Questions about generate-code-snippet

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a shareable code snippet link for Twitter or X?▼

Provide a short code sample and the skill base64url-encodes it, then builds a code.franciscomoretti.com URL with theme, dark mode, padding, and language parameters. The returned link renders the snippet as a styled image-ready page.

What is the maximum length for a code snippet?▼

Snippets are kept to 15 lines unless you explicitly request otherwise. Each snippet should show one self-contained concept with real imports and a short opening comment.

Which programming languages does the snippet generator support?▼

The skill prefers tsx for TypeScript React code, and uses shell or json when those formats are more appropriate. The chosen language is passed as a parameter in the generated URL.

How is the code snippet encoded in the URL?▼

The snippet is base64url-encoded without padding and placed in the code fragment of the URL. Additional query parameters control the sparka theme, dark mode, 64-pixel padding, and language.

When should I not use a snippet URL for sharing code?▼

Avoid it for long multi-file examples or code exceeding 15 lines, since the format targets single concise concepts. For larger samples, link to a repository or gist instead.

Related Skills

Explore More Software Engineering Skills→
CDO-07-NewCDO-07-New

article-writing

Draft long-form articles and guides from notes into polished copy.

Official
Intermediate
huangservahuangserva
155

illustration-generator

Generate cover images and inline illustrations from article content.

Community
Intermediate
kostja94kostja94
872

twitter-cards

Generate Twitter Card meta tags for link previews on X.

Community
Basic
mkurmanmkurman
321

ray-so-code-snippet

Generate styled code snippet images via ray.so with configurable themes and backgrounds.

Community
Advanced