pixel-art

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

Updated May 29, 2026
One-click install
npx skills add https://github.com/Mang30/myskills --skill pixel-art-mang30
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pixel-art
Source: https://github.com/Mang30/myskills/tree/main/skills/pixel-art
Command: npx skills add https://github.com/Mang30/myskills --skill pixel-art-mang30

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Pixel-art SVGs are hard to create quickly, so your READMEs, docs, and slides end up missing clear, consistent visuals.

Core Features & Use Cases

  • Pixel-art SVG generation: Produces a self-contained SVG illustration based on your prompt, using a consistent 7px grid and tight viewBox sizing.
  • Scene composition options: Supports single-character portraits with labels, group scenes, and chat-style dialogue layouts with speech bubbles and arrows.
  • Brand- and palette-aware styling: Applies a simple 3–5 color palette per character and allows clothing colors to match your project’s brand color for cohesion.

Quick Start

Ask for an image by saying: "Generate a pixel art SVG hero image for my README showing two characters having a short chat, matching my brand blue (#4A9EDA), and include chat bubbles and arrows."

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 SVGs for README documentation?▼

Generate pixel art SVGs for README documentation by prompting for a scene description. The tool outputs a self-contained SVG illustration using a consistent 7px grid and tight viewBox sizing, ready to embed in docs.

Can I create chat-style dialogue scenes with speech bubbles in SVG?▼

Yes, you can create chat-style dialogue scenes in SVG. The generator supports single-character portraits, group scenes, and dialogue layouts, automatically including speech bubbles and directional arrows when requested.

How do I match pixel art illustration colors to my brand color?▼

Match pixel art colors to your brand color by specifying the hex code in your prompt. The SVG generator applies a 3-5 color palette per character and adjusts clothing colors to match your project's brand color for visual cohesion.

What is the best way to add visual badges to presentation slides?▼

The best way to add visual badges to presentation slides is generating a self-contained pixel-art SVG. It uses rect-based pixels on a 7px grid, ensuring clear, consistent visuals that scale without distortion across slide decks.

Does the SVG generator support reusable grouped character elements?▼

Yes, the SVG generator supports reusable grouped character elements. It produces valid SVG code using rect-based pixels, allowing you to easily reuse, duplicate, or reposition character elements across different documentation assets.