pixel-art

Generate pixel-art SVG illustrations on a 7px grid for README visuals.

Updated Apr 21, 2026

Search Tags:#readme #svg #illustration #pixel art #hero image #chat bubbles

Ready to run

npx skills add https://github.com/Shallow-W/llm-wiki --skill pixel-art-shallow-w

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: pixel-art
Source: https://github.com/Shallow-W/llm-wiki/tree/main/.claude/skills/pixel-art
Command: npx skills add https://github.com/Shallow-W/llm-wiki --skill pixel-art-shallow-w

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It solves the problem of creating consistent, adorable pixel-art visuals for READMEs and documents without manual SVG drawing or design work.

Core Features & Use Cases

Pixel-grid SVG generation: Builds illustrations from a 7px pixel grid using compact <rect>-based primitives.
Scene layouts: Supports common compositions such as chat-dialogue hero images, labeled portraits, and small group scenes.
Reusable character structure: Encourages positioning with <g transform="translate(x,y)"> and uses a small, controlled palette for readability.

Quick Start

Ask it to generate an SVG pixel-art hero image for a README with two characters in a left/right chat layout and a specified color theme.

Frequently Asked Questions about pixel-art

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

FAQPage Schema

How do I generate pixel art SVG illustrations for a README?▼

To generate pixel art SVG illustrations for a README, you need a tool that builds graphics from a 7px pixel grid using compact <rect>-based primitives. This approach creates consistent, adorable visuals without manual SVG drawing or design work.

Can I create chat dialogue hero images using SVG pixel art?▼

Yes, you can create chat dialogue hero images using SVG pixel art by applying composition rules for arrows and bubbles. This supports common layouts like left/right chat-dialogue scenes specifically for documentation visuals.

Does pixel art generation support labeled portraits and group scenes?▼

Pixel art generation supports labeled portraits and small group scenes by positioning characters with <g transform="translate(x,y)">. It uses a small, controlled color palette to ensure visual readability in documentation.

What is the best way to add cute pixel icons to documentation?▼

The best way to add cute pixel icons to documentation is generating valid SVG files on a 7px pixel grid. This method ensures consistent style and readability across your docs without requiring manual design effort.

How does a 7px pixel grid work for SVG generation?▼

A 7px pixel grid for SVG generation works by constructing illustrations from compact <rect>-based primitives. This enforces a structured, blocky aesthetic and ensures the output remains a valid, lightweight SVG file.