skills.rest
paulrobello
paulrobelloCOMMUNITY
Explore all skills by this author →
Website𝕏@probelloGitHub

desk-accessory

Generate tintable desk accessory sprites for PixiJS from grayscale images.

487|106|Updated Jan 22, 2026
Search Tags:#workflow#sprite#pixel-art#tinting#grayscale#desk-accessory#office-visualizer
One-click install
npx skills add https://github.com/paulrobello/claude-office --skill desk-accessory
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: desk-accessory
Source: https://github.com/paulrobello/claude-office/tree/main/.claude/skills/desk-accessory
Command: npx skills add https://github.com/paulrobello/claude-office --skill desk-accessory

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires magick, and includes scripts (resource) components.

What problem does it solve?

Provides a workflow to create grayscale/white desk items (mugs, staplers, plants, lamps) that can be tinted at runtime, ensuring visual consistency across the Claude Office Visualizer.

Core Features & Use Cases

  • Tintable desk items: white/gray sprites designed for runtime tinting to support color variation without creating multiple assets.
  • Orientation and scale guidance: assets oriented to face NORTH-WEST and sized for 16-bit pixel art readability in a top-down view.
  • End-to-end workflow: from AI-generated concept art to PNG sprites compatible with PixiJS, including a tint-ready processing script.

Quick Start

Generate a grayscale desk accessory image and run the tintable processor to produce a PixiJS-ready sprite.

Frequently Asked Questions about desk-accessory

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

FAQPage Schema
How do I create tintable pixel art sprites for PixiJS?▼

You create tintable pixel art sprites for PixiJS by generating a grayscale image and running a processing script that applies a magenta-removal pipeline to output transparent RGBA sprites ready for runtime color application.

What is a grayscale sprite workflow for runtime tinting?▼

A grayscale sprite workflow for runtime tinting involves generating white or gray assets and converting them into transparent PNGs, allowing a rendering engine like PixiJS to apply color variations dynamically without creating multiple image files.

Do I need ImageMagick to process transparent PNG sprites?▼

Yes, you need ImageMagick installed, as the processing script depends on it to execute the multi-pass magenta-removal pipeline and scale images down to the correct sprite dimensions.

How do I convert AI generated concept art into scalable desk accessories?▼

You convert AI generated concept art into scalable desk accessories by running the image through a processing script that removes backgrounds, extracts RGBA channels, and scales the output to 16-bit pixel art dimensions for top-down visualizers.

What orientation should desk accessory sprites use for a top-down visualizer?▼

Desk accessory sprites should be oriented to face NORTH-WEST and be sized specifically for 16-bit pixel art readability to ensure they read well in a top-down office visualizer view.

Why does my sprite processing pipeline leave a magenta outline?▼

A magenta outline occurs when the multi-pass magenta-removal pipeline fails to fully strip background colors, requiring you to verify your ImageMagick configuration and ensure the script correctly isolates the RGBA channels.

Related Skills

Explore More Design & Creative Skills→
ThedouglerThedougler

image-manipulation-image-magick

Resize, convert, and extract metadata from images using ImageMagick.

Community
Intermediate
paulrobellopaulrobello
487

office-sprite

Generate 2D office sprites with transparent PNG backgrounds using ImageMagick and FFmpeg.

Community
Intermediate
gtpgg1013gtpgg1013

pixel-art-sprites

Design pixel-art sprites, tilesets, and palettes for retro-style games.

Community
Advanced
maystudiosmaystudios
15

2d-pixel-asset

Generate 2D pixel art assets from prompts and reference images via Chrome automation.

Community
Advanced