skills.rest
OpenLAIR
OpenLAIROFFICIAL
Explore all skills by this author →
GitHub

aris-pixel-art

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

1.1k|116|Updated Feb 26, 2026
Search Tags:#svg#generate#diagram#illustration#pixel art#hero image#ReadMe
One-click install
npx skills add https://github.com/OpenLAIR/dr-claw --skill aris-pixel-art
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: aris-pixel-art
Source: https://github.com/OpenLAIR/dr-claw/tree/main/skills/aris-pixel-art
Command: npx skills add https://github.com/OpenLAIR/dr-claw --skill aris-pixel-art

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Creating cute, on-brand pixel art illustrations for README hero images, documentation, or slides normally requires design tools and manual effort. This Skill generates pixel art directly as SVG code with a consistent grid system, color palette, and composition recipes.

Core Features & Use Cases

  • Pixel Grid System: Builds characters from 7px <rect> pixels on a strict grid, with a reusable character template covering hair, face, body, and legs.
  • Scene Composition Recipes: Provides ready-made layouts for chat dialogue scenes, single-character portraits with labels, and group scenes, including chat bubbles, tails, and directional arrows.
  • Iterative Refinement Workflow: Generates the SVG, previews it with the system open command, and iterates on user feedback for spacing, arrows, and sizing.
  • Use Case: You need a hero image for your project README showing two characters exchanging messages. Describe the scene, and the Skill produces a compact SVG with brand-matched colors, dialogue bubbles, and arrows ready to embed.

Quick Start

Ask the assistant to draw a pixel art SVG of two characters chatting about your project for the README hero image.

Frequently Asked Questions about aris-pixel-art

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

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

Describe the characters and scene you want, and the Skill writes an SVG file built from 7px rect pixels on a grid. It then opens the file for preview and iterates on your feedback before you embed it in the README.

What size and grid does pixel art SVG use?▼

Each pixel is a 7px rect with no gaps, and characters are typically 8-10 pixels wide and 8-12 pixels tall. The viewBox is kept tight to the actual content with about 10px of padding.

Can I make a chat dialogue scene with speech bubbles in SVG?▼

Yes, the Skill includes a dialogue layout recipe with two characters, alternating chat bubbles with polygon tails, and directional arrows using orient="auto" markers. Bubble rows need 38-44px vertical spacing to avoid overlap.

Why does my SVG arrow point the wrong direction?▼

Arrowheads using orient="auto" follow the line direction, so a line drawn right-to-left produces a left-pointing arrowhead. Check that x1 and x2 match the intended direction of the arrow.

How many colors should a pixel art character use?▼

Keep it to 3-5 colors per character: a skin tone, eye color, hair color, a clothing color matched to your brand, and a neutral for shoes or accessories. The Skill provides a default palette with hex values for each role.

Related Skills

Explore More Design & Creative Skills→
OpenElementsLabsOpenElementsLabs

open-elements-brand-guidelines

Apply Open Elements brand colors, typography, and logo usage to artifacts.

Official
Basic
pedrohcgspedrohcgs
1.5k

deploy

Render Quarto slides to HTML and sync them to docs for GitHub Pages deployment.

Community
Intermediate
openaiopenai
5.3k

accessibility-and-inclusive-visualization

Review and improve charts, diagrams, and dashboards for accessibility and inclusive design.

Official
Intermediate
jasrajtulsijasrajtulsi

generate-image

Generate or edit images from text prompts via OpenRouter models.

Community
Intermediate