# Pixelart > Generate pixel art as self-contained HTML files. Pure code, zero dependencies. Supports 8x8 icons to full landscape scenes, game tilesets, and procedural assets. - **Type:** Skill - **Install:** `agentstack add skill-sbname-yoyopixel-pixelart` - **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior - **Seller:** [SbName](https://agentstack.voostack.com/s/sbname) - **Installs:** 0 - **Category:** [AI & ML](https://agentstack.voostack.com/c/ai-and-ml) - **Latest version:** 0.1.0 - **License:** MIT - **Upstream author:** [SbName](https://github.com/SbName) - **Source:** https://github.com/SbName/yoyopixel/tree/main/.claude/skills/pixelart - **Website:** https://sbname.github.io/yoyopixel/ ## Install ```sh agentstack add skill-sbname-yoyopixel-pixelart ``` Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent. ## About Generate a pixel art HTML file based on the user's request: $ARGUMENTS ### Input Modes **Mode 1 — Single asset (default):** Parse input to extract **size** (e.g. `16x16`, `32x32`, `192x128`) and **prompt**. If size is omitted, default to `16x16`. ``` /pixelart 32x32, a wizard with a glowing staff /pixelart 80x85, stone cottage with red tile roof /pixelart 50x40, a fox sitting in grass ``` **Mode 2 — Tileset:** When prompt contains **"tileset"**, **"sprite sheet"**, or **"asset pack"**, generate a complete sheet of related assets on a single canvas. ``` /pixelart tileset, medieval village /pixelart tileset, dungeon crawler /pixelart tileset, forest nature pack /pixelart tileset, farm animals ``` --- ## Output A single, complete, self-contained `.html` file. No external images or dependencies. --- ## Auto-Decision Rules ### Size → Detail Level | Size | Detail | Max Colors | Shading | |-----------------|---------|-----------|----------------------------------------| | 8×8 | minimal | 3–5 | Flat colors, no shading | | 12×12 | standard| 5–8 | 1 shadow tone per material | | 16×16 | standard| 8–12 | 1 shadow tone per material | | 16×24, 24×24 | detailed| 10–16 | Highlight + base + shadow per material | | 32×32+ | detailed| 12–20 | Highlight + base + shadow, texture hints| | 48×48+ | ultra | 15–25 | Multi-layer shading, dithering | | 96×64+ (canvas) | ultra | Unlimited | Procedural FBM noise, Bayer dithering | | 48×96+ (asset) | ultra | Unlimited | Procedural texture engine, region-based | ### Prompt → Rendering Method | Prompt implies... | Method | |-------------------------------|----------------------------------------| | Simple icon / item / emoji | **CSS box-shadow** (zero JS, static) | | Character / sprite | **CSS Grid + JS** (per-pixel control) | | "animated", movement, effects | **Grid + animation JS** | | Landscape, scene, environment | **Canvas** (procedural generation) | | Building, tileset, game asset | **Canvas** (procedural texture engine) | | Animal, creature, organic | **Canvas** (procedural organic textures)| ### Prompt → Auto Animations & Atmosphere | Content in prompt | Auto-add | |-------------------------|-------------------------------------------------| | Character with weapon | `breathe` + `gleam` (weapon shine) | | Character with hair/cloth| `breathe` + `wind` (flutter) | | Has eyes | `blink` (periodic) | | Night / dark scene | Stars, moon, mist | | Fire / lava | Ember particles, glow | | Water / lake / ocean | Water reflection animation | | Rain / storm | Rain particles | | Cherry blossom / spring | Falling petals | | Snow / winter | Snowflake particles | | Magic / glow / neon | Glow pulse on emissive pixels | | City / urban | Building silhouettes, lit windows | | Any character | `fade-in` (staggered pixel reveal) | If nothing suggests effects, output static art. --- ## Output Formats ### Small art (≤48×48): String-array data + HTML renderer ```html {{name}} · Pixel Art * { margin:0; padding:0; box-sizing:border-box; } body { min-height:100vh; display:flex; align-items:center; justify-content:center; background:#1a1a2e; font-family:'Courier New',monospace; } .pixel-grid { display:grid; gap:0; image-rendering:pixelated; } /* animation keyframes as needed */ const ART = { name: '{{name}}', width: {{W}}, height: {{H}}, palette: { '.': 'transparent', // semantic single-char keys → hex colors }, pixels: [ // each string = one row, each char = one pixel ] }; // Render with CSS Grid or box-shadow // Add animations based on auto-decision rules ``` ### Large art (≥64px): Canvas-based procedural generation Use `` with pixel buffer, FBM noise engine, ordered dithering, and layered rendering: ```javascript // Core engine function hash2D(x, y) { /* integer hash → 0-1 */ } function valueNoise(x, y) { /* smoothstep interpolated */ } function fbm(x, y, octaves) { /* fractal Brownian motion */ } function ridgeNoise(x, y, octaves) { /* sharp ridge lines */ } // Bayer 4×4 ordered dithering const BAYER = [[0,8,2,10],[12,4,14,6],[3,11,1,9],[15,7,13,5]]; function ditherColor(x, y, c1, c2, ratio) { /* pick c1 or c2 based on threshold */ } // PixelBuffer class with: set, get, blend, tri, rect, line // Layer functions: drawSky, drawSun, drawStars, drawMountains, drawTrees, drawWater, drawBuildings, drawMist... // Render to canvas with imageSmoothingEnabled = false ``` --- ## Design Rules ### Palette - `.` = transparent (always) - Semantic mapping: `S` skin, `H` hair, `E` eyes, `B` body, `M` mouth, `A` armor, `G` gold, `R` red, `W` white, `D` dark - Uppercase = dark/base, lowercase = light/highlight - Light source: top-left (consistent) ### Character Composition | Canvas | Head | Body ratio | Border | |---------|--------|-----------|--------| | 8×8 | 4×4 | 1:1 | 0–1px | | 12×12 | 5×5 | 1:1.2 | 1px | | 16×16 | 6×6 | 1:1.5 | 1–2px | | 24×24 | 8×8 | 1:2 | 2px | | 32×32 | 10×10 | 1:2.2 | 2–3px | | 48×48 | 14×14 | 1:2.5 | 3–4px | - Head proportionally oversized (pixel art convention) - At least 1px transparent border - Break perfect symmetry (hair, weapon, pose) - At 24×24: 2-3 recognizable details > anatomical accuracy (visor line, weapon silhouette, distinct hair) ### Drawing Order 1. Silhouette first → get shape right 2. Base colors → one flat color per material 3. Shadows → darker on bottom-right 4. Highlights → lighter on top-left 5. Details → eyes, accessories, weapon 6. Readability check → zoom out, is shape recognizable? ### Animation Implementation | Effect | Implementation | |---------|-------------------------------------------------------------| | breathe | Container `translateY(0→-2px)`, 4s infinite | | gleam | Per-pixel `brightness(1→3→1)`, sweep top→bottom, 5s | | wind | `sin(time*2 + x*0.5)` brightness on hair/cloth | | fade-in | Per-pixel `opacity 0→1`, delay `x*0.02 + y*0.04`s | | blink | Eye pixels opacity toggle, 4s cycle | | glow | `box-shadow` pulse on emissive pixels | --- ## Pixel Font Reference (MUST USE for text/numbers) When drawing text, numbers, or symbols, do NOT guess pixel placement. Use these exact patterns. ### 3×5 Digits (0-9) ``` 0: ### 1: .#. 2: ### 3: ### 4: #.# 5: ### 6: ### 7: ### 8: ### 9: ### #.# ##. ..# ..# #.# #.. #.. ..# #.# #.# #.# .#. ### .## ### ### ### .#. ### ### #.# .#. #.. ..# ..# ..# #.# .#. #.# ..# ### ### ### ### ..# ### ### .#. ### ### ``` ### 3×5 Letters (A-Z) ``` A: .#. B: ##. C: ### D: ##. E: ### F: ### G: ### H: #.# I: ### J: .## #.# #.# #.. #.# #.. #.. #.. #.# .#. ..# ### ##. #.. #.# ### ##. #.# ### .#. ..# #.# #.# #.. #.# #.. #.. #.# #.# .#. #.# #.# ##. ### ##. ### #.. ### #.# ### ##. K: #.# L: #.. M: #.# N: #.# O: ### P: ### Q: ### R: ##. S: ### T: ### #.# #.. ### ##. #.# #.# #.# #.# #.. .#. ##. #.. ### #.# #.# ### #.# ##. ### .#. #.# #.. #.# #.# #.# #.. #.# #.# ..# .#. #.# ### #.# #.# ### #.. ##. #.# ### .#. U: #.# V: #.# W: #.# X: #.# Y: #.# Z: ### #.# #.# #.# .#. #.# ..# #.# #.# ### .#. .#. .#. #.# .#. ### .#. .#. #.. ### .#. #.# #.# .#. ### ``` ### 5×7 Digits (larger, more readable) ``` 0: .###. 1: ..#.. 2: .###. 3: .###. 4: #..#. 5: ##### 6: .###. 7: ##### 8: .###. 9: .###. #...# .##.. #...# #...# #..#. #.... #.... ....# #...# #...# #...# ..#.. ....# ....# #..#. #.... #.... ...#. #...# #...# #...# ..#.. .###. ..##. ##### ####. ####. ..#.. .###. .#### #...# ..#.. #.... ....# ...#. ....# #...# ..#.. #...# ....# #...# ..#.. #.... #...# ...#. #...# #...# .#... #...# #...# .###. .###. ##### .###. ...#. .###. .###. .#... .###. .###. ``` ### Usage rules for text in pixel art: 1. **Always copy from the reference above** — never approximate 2. Use 3×5 for small art (≤16px canvas), 5×7 for larger (≥24px) 3. Leave 1px gap between characters 4. Align to pixel grid — no half-pixel offsets --- ## Core Utility API (for Canvas-based rendering) Standard helper functions used across all procedural generation. When writing Canvas-based pixel art, include these utilities: ### Deterministic Hash ```javascript function H(x, y) { let n = ((x|0)*374761393 + (y|0)*668265263 + 1013904223)|0; n = (((n>>13)^n)*1274126177)|0; return (((n>>16)^n)>>>0) / 4294967296; } ``` Same (x,y) always produces same value 0–1. Foundation for all procedural textures. Enables reproducible, tileable results without seed management. ### Color Manipulation ```javascript function hx(s) { return [parseInt(s.slice(1,3),16), parseInt(s.slice(3,5),16), parseInt(s.slice(5,7),16)]; } function dk(c, a) { return c.map(v => Math.max(0, (v*(1-a))|0)); } // darken function lt(c, a) { return c.map(v => Math.min(255, (v+(255-v)*a)|0)); } // lighten function nz(c, x, y, r) { // noise inject const n = (H(x*7, y*13) - 0.5) * r; return c.map(v => Math.max(0, Math.min(255, (v+n)|0))); } function pk(pal, x, y) { return [...pal[Math.floor(H(x,y)*pal.length) % pal.length]]; } // palette pick function mix(a, b, t) { return a.map((v,i) => Math.round(v + (b[i]-v) * t)); } // color mix ``` ### Noise Range Guidelines Different materials need different noise amounts for best results: | Material | `nz()` range | Why | |-------------------|-------------|-----| | Stone, walls | 8–10 | High variance, natural appearance | | Wood, planks | 6–8 | Moderate grain texture | | Cloth, fabric | 6–8 | Moderate fold variation | | Metal, polished | 4–5 | Subtle, preserves shine | | Neon, electronics | 15–20 | High flicker, suggests energy | | Foliage, leaves | 10–12 | Organic irregularity | | Sand, dirt | 4–6 | Gentle speckle | | Water | 4–5 | Subtle wave variation | ### PixelBuffer Class ```javascript class PB { constructor(w, h) { this.w = w; this.h = h; this.rgb = new Uint8ClampedArray(w * h * 3); this.mask = new Uint8Array(w * h); } set(x, y, r, g, b) { x |= 0; y |= 0; if (x = this.w || y = this.h) return; const i = (y * this.w + x) * 3; this.rgb[i] = r; this.rgb[i+1] = g; this.rgb[i+2] = b; this.mask[y * this.w + x] = 1; } setC(x, y, c) { this.set(x, y, c[0], c[1], c[2]); } get(x, y) { x |= 0; y |= 0; if (x = this.w || y = this.h) return null; if (!this.mask[y * this.w + x]) return null; const i = (y * this.w + x) * 3; return [this.rgb[i], this.rgb[i+1], this.rgb[i+2]]; } has(x, y) { x |= 0; y |= 0; return x >= 0 && x = 0 && y Math.max(0, Math.min(255, (v * light)|0))); // Edge darkening: darken pixels adjacent to empty space const edges = [!pb.has(x-1,y), !pb.has(x+1,y), !pb.has(x,y-1), !pb.has(x,y+1)]; const ec = edges.filter(Boolean).length; if (ec > 0) c = dk(c, ol * ec * 0.4); out.setC(x, y, c); } return out; } ``` **Typical values**: `pp(pb, 0.5, 0.3)` — moderate shadow + outline. Use `pp(pb, 0.8, 0.4)` for dramatic lighting, `pp(pb, 0.3, 0.2)` for subtle/flat items. For assets needing more control, use the extended multi-pass pipeline: ``` pp(pb, { ao: 0.12, light: 0.1, specular: [{cx,cy,r,intensity}], outline: 0.28 }) ``` - **passAO** — ambient occlusion at region boundaries - **passLight** — directional light from top-left - **passSpecular** — highlights for metal, crystal, glass - **passOutline** — edge darkening ### Composition System **RGBA PixelBuffer** — All pixels have alpha channel. Supports semi-transparent effects (glow halos, glass, cloth veils). **`blitAlpha(src, dst, dx, dy, opts)`** — Alpha-aware blit with contact shadow: ```javascript blitAlpha(sack, scene, 10, 20, { contactShadow: true, // auto-generate shadow below source shadowOffset: [1, 2], // shadow displacement shadowAlpha: 0.18, // shadow opacity alpha: 1.0 // global source opacity }); ``` **`blit(src, dst, dx, dy)`** — Simple copy for tileset assembly: ```javascript function blit(src, dst, dx, dy) { for (let y = 0; y 1) continue; // outside ellipse ``` Use for: tree canopies, character heads, shields, gems, barrel tops, cloud shapes. Avoids explicit alpha — shapes defined by mask test. ### Building Construction Order When generating buildings/structures, always layer in this order: 1. **Walls** — `texStone` / `texWood` / `texStucco` for the main body 2. **Roof** — `texRoof` / `texTiles` overlaid on top, often with triangle geometry 3. **Openings** — `fillRect` for door/window holes, then fill with appropriate material 4. **Frames** — `texWood` for door/window frames, `outline()` for borders 5. **Details** — chimney, signs, decorative elements, potted plants 6. **Post-processing** — `pp()` for directional light + edge outline ### Per-Material Shading Guidance | Material | Tones | Shading pattern | |----------|-------|----------------| | Stone | 5 | deep mortar → stone shadow → base → light → highlight chip | | Wood | 4 | grain dark → grain base → grain light → edge highlight | | Cloth | 5 | fold valley → fold shadow → base → fold light → fold peak | | Metal | 6 | dark ambient → base → reflected mid → reflected light → specular edge → specular peak | | Crystal | 5 | core glow → base facet → facet edge → bright facet → specular point | | Bone | 4 | crack shadow → aged base → surface light → dry highlight | ### Dual-Palette Shading Strategy Instead of per-pixel lighting calculations, use **two palettes** (light + dark) for each material: ```javascript // Define light and dark variants const folLight = ['#4a8c30','#5aa040','#68b048','#70c050']; const folDark = ['#2a5018','#3a6a20','#4a7a28','#3a5a20']; // In rendering: pick palette based on position const isTop = dy ` with `PixelBuffer` class. Each pixel is individually addressable. Rendered at configurable scale (3–6x typical) with `image-rendering: pixelated`. --- ## Sprite Template System (for items ≤20px) For small items (potions, books, bowls, weapons, etc.), do NOT use procedural texture fills. Use **character-grid templates** with material zone annotations. The engine auto-shades each zone based on material type. ### Template Format ```javascript const POTION = { grid: [ '..cc..', '..kk..', '.GGGG.', 'GLLLLG', 'GLLLLG', 'GLLLLG', 'GLLLLG', '.GGGG.', ], materials: { c:' … ## Source & license This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code. - **Author:** [SbName](https://github.com/SbName) - **Source:** [SbName/yoyopixel](https://github.com/SbName/yoyopixel) - **License:** MIT - **Homepage:** https://sbname.github.io/yoyopixel/ Install and usage instructions live in the source repository linked above. ## Pricing - **Free** — Free ## Security capabilities Automated source analysis of v0.1.0 — what this tool can access: - **Network access:** no - **Filesystem access:** no - **Shell / process execution:** no - **Environment & secrets:** no - **Dynamic code execution:** no *"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.* ## Versions - **0.1.0** — security scan: passed — Imported from the upstream source. ## Links - Listing page: https://agentstack.voostack.com/l/skill-sbname-yoyopixel-pixelart - Seller: https://agentstack.voostack.com/s/sbname - Browse the marketplace: https://agentstack.voostack.com/browse --- Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.