skills.rest
Lingjie-wang
Lingjie-wangCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

pixel-art

Generate pixel art SVG illustrations for READMEs, documentation, and slides.

Updated Jul 9, 2026
Search Tags:#documentation#graphics#readme#svg#generate#illustration#pixel art
One-click install
npx skills add https://github.com/Lingjie-wang/autoRL --skill pixel-art-lingjie-wang
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pixel-art
Source: https://github.com/Lingjie-wang/autoRL/tree/main/Auto-claude-code-research-in-sleep/skills/pixel-art
Command: npx skills add https://github.com/Lingjie-wang/autoRL --skill pixel-art-lingjie-wang

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Creating custom pixel art illustrations for README hero images, documentation, or slides normally requires design tools and manual drawing, which slows down developers who just want a cute visual for their project. ## Core Features & Use Cases - Pixel Grid SVG Generation: Builds characters and scenes from 7px <rect> pixels with a defined color palette and reusable character templates. - Scene Composition Recipes: Provides ready-made layouts for chat dialogue scenes, single-character portraits, and group scenes, including chat bubbles, arrows, and labels. - Iterative Preview Workflow: Writes the SVG to a file, opens it for preview, and refines it over 2-4 feedback iterations. - Use Case: You need a hero image for your project README showing two characters exchanging messages — describe the scene and get a hand-tuned SVG with brand-matched colors. ## Quick Start Ask the assistant to draw a pixel art SVG of two characters chatting for your README hero image, then preview and iterate on the result.

Frequently Asked Questions about pixel-art

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

FAQPage Schema
How do I create a pixel art SVG for my README?▼

Describe the characters, scene type, and colors you want, and the skill generates an SVG built from 7px rect pixels on a grid. It writes the file, opens it for preview, and iterates based on your feedback before finalizing.

How to make a chat dialogue scene in SVG?▼

Place two characters on the left and right, add rounded rect bubbles with polygon tails pointing toward each speaker, and connect them with arrows using orient="auto" markers. Keep 38-44px vertical spacing between bubble rows to avoid overlap.

What size should pixel art characters be in SVG?▼

Characters are typically 8-10 pixels wide and 8-12 pixels tall, with each pixel rendered as a 7px rect. Use a g element with transform translate to position and reuse character groups across the scene.

Why does my SVG arrow point the wrong direction?▼

The orient="auto" marker follows the line direction, so a line drawn right-to-left produces a left-pointing arrowhead. Check that x1 and x2 match your intended direction before adjusting the marker definition.

How do I prevent text overflow in SVG chat bubbles?▼

Monospace text at 13px averages about 7.8px per character and emoji about 14px, so measure the message length before setting bubble width. Add padding and verify the text fits within the rect bounds during preview.

Related Skills

Explore More Design & Creative Skills→
BluebagAIBluebagAI
28

brand-guidelines

Apply Anthropic's official colors and typography rules to documents, designs, and UI assets.

Official
Intermediate
M-Abdullah07M-Abdullah07
1

mermaid-graph-renderer

Convert Mermaid diagram syntax into SVG, PNG, or PDF images.

Community
Intermediate
Owl-ListenerOwl-Listener
2.0k

illustration-style

Define a cohesive illustration system with visual language, color rules, and governance.

Community
Intermediate
PsychQuantPsychQuant

creative-router

Route image editing tasks to specialized MCP servers by content type.

Official
Intermediate