/pixel-art-professional

name: Pixel Art Professional
description: Apply advanced pixel art techniques including dithering, palette optimization, shading, antialiasing, and color theory. Use when the user mentions "dithering", "dither", "Bayer", "Floyd-Steinberg", "palette", "colors", "reduce colors", "optimize palette", "color limit", "shading", "shadows", "highlights", "lighting", "light source", "antialiasing", "smooth", "smoothing", "anti-alias", "AA", "color ramp", "gradient", "hue shifting", "saturation", "value", "contrast", or wants to "refine", "polish", "improve", "enhance", "make better", "add depth", "add dimension" to existing pixel art. Trigger on retro palette names (NES, Game Boy, C64, PICO-8), texture terms ("metal", "fabric", "stone", "wood"), and visual quality terms ("professional", "clean", "smooth", "vibrant").
allowed-tools: Read, Bash, mcp__aseprite__get_sprite_info, mcp__aseprite__draw_pixels, mcp__aseprite__set_palette, mcp__aseprite__get_palette, mcp__aseprite__quantize_palette, mcp__aseprite__apply_auto_shading, mcp__aseprite__draw_with_dither, mcp__aseprite__add_layer, mcp__aseprite__flatten_layers

Pixel Art Professional

Overview

This Skill provides advanced pixel art techniques for refining and polishing sprites. It handles dithering patterns, palette optimization, color theory, shading techniques, and antialiasing for professional-quality pixel art.

When to Use

Use this Skill when the user:

• Wants to apply "dithering" or mentions dither patterns
• Asks about "palette optimization" or "color reduction"
• Mentions "shading", "highlights", "shadows", or "lighting"
• Requests "antialiasing", "smoothing", or "edge refinement"
• Talks about "color ramps", "gradients", or "color theory"
• Wants to "polish" or "refine" existing pixel art
• Mentions specific techniques like "Bayer dithering" or "Floyd-Steinberg"

**Trigger Keywords:** dithering, palette, shading, antialiasing, smooth, gradient, color ramp, polish, refine, color theory, quantize

Instructions

1. Understanding Dithering

**Dithering** creates the illusion of additional colors by mixing pixels of available colors in patterns.

**When to Use Dithering:**

• Reducing color count (e.g., 256 colors → 16 colors)
• Creating smooth gradients with limited palettes
• Simulating textures (fabric, metal, stone)
• Retro aesthetic (classic games used dithering extensively)

**Dithering Algorithms:**

**Ordered Dithering (Bayer Matrix):**

• Uses fixed pattern matrix (2x2, 4x4, 8x8)
• Predictable, regular pattern
• Best for: textures, backgrounds, retro look
• Fast and consistent

**Error Diffusion (Floyd-Steinberg):**

• Distributes color error to neighboring pixels
• More organic, less regular pattern
• Best for: gradients, natural images, smooth transitions
• Slower but higher quality

**Common Dithering Patterns:**

• **Checkerboard**: Simple 2-color alternating pattern
• **Bayer 2x2**: Basic ordered dithering
• **Bayer 4x4**: More subtle ordered dithering
• **Bayer 8x8**: Very subtle, near-gradient appearance
• **Floyd-Steinberg**: Error diffusion for smooth gradients

2. Palette Management

**Color Quantization:** Use `mcp__aseprite__quantize_palette` to reduce sprite colors intelligently:

• Analyzes sprite colors
• Finds optimal limited palette
• Remaps pixels to new palette
• Preserves visual quality

**Palette Optimization Workflow:** 1. Get current sprite info and palette 2. Decide target color count (4, 8, 16, 32, 64, 256) 3. Apply quantization with optional dithering 4. Review and adjust palette if needed

**Common Palette Sizes:**

• **4 colors**: Game Boy, ZX Spectrum per-sprite
• **8 colors**: CGA, early arcade
• **16 colors**: NES, Master System, early VGA
• **32 colors**: SNES per-background, Amiga OCS
• **64 colors**: Genesis, PC Engine
• **256 colors**: VGA, SNES full palette, Amiga AGA

**Palette Theory:**

• **Color Ramps**: Gradual transitions from dark to light for shading
• **Hue Shifting**: Changing hue slightly in shadows/highlights for vibrant look
• **Saturation**: Higher saturation in midtones, lower in shadows/highlights
• **Contrast**: Ensure sufficient contrast between key elements

3. Shading Techniques

**Types of Shading:**

**Flat Shading (No Shading):**

• Single color per surface
• Simple, iconic look
• Best for: UI icons, simple sprites, minimalist style

**Cell Shading (Hard Shading):**

• Distinct color bands with hard edges
• 2-3 colors per surface (base, shadow, highlight)
• Best for: cartoon style, bold graphics, readable sprites

**Soft Shading (Dithered Shading):**

• Gradual transitions using dithering
• Smooth appearance with limited colors
• Best for: realistic look, smooth surfaces, gradients

**Pixel Clusters:**

• Manual dithering with strategic pixel placement
• Organic, hand-crafted appearance
• Best for: metal, fabric textures, custom look

**Shading Workflow:** 1. Identify light source direction 2. Determine base color 3. Create darker shade for shadows (hue shift toward blue/purple) 4. Create lighter shade for highlights (hue shift toward yellow/white) 5. Apply shadows on surfaces away from light 6. Apply highlights on surfaces toward light 7. Add reflected light in deep shadows (subtle)

**Common Shading Mistakes:**

• Pure black shadows (use dark hue-shifted colors instead)
• Pure white highlights (use light tinted colors instead)
• No hue shifting (shadows/highlights same hue as base)
• Pillow shading (shading around edges instead of from light source)

4. Antialiasing

**Purpose**: Smooth jagged edges and diagonal lines by adding intermediate colors.

**When to Use Antialiasing:**

• Diagonal lines look jagged
• Curves appear stepped
• Edges need smoothing
• Higher resolution sprites (64x64+)

**When NOT to Use Antialiasing:**

• Very small sprites (16x16 or smaller)
• Intentional pixelated aesthetic
• High-contrast situations (AA reduces contrast)
• Limited palette (need intermediate colors)

**Manual Antialiasing Technique:** 1. Identify jagged edge