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.