pixel-art

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

Updated Apr 21, 2026
One-click install
npx skills add https://github.com/Shallow-W/llm-wiki --skill pixel-art-shallow-w
Or copy as Structured Prompt for Agent
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.