skills.rest
microsoft
microsoftOFFICIAL
Explore all skills by this author →
Website𝕏@OpenAtMicrosoftGitHub

chat-pet-sprite-creation

Create VS Code chat pet sprite art, animations, and accessory atlases.

190k|41.9k|Updated Sep 3, 2015
Search Tags:#pixel art#VSCode#Animation#sprite sheet#reduced motion#accessory atlas#chat pet
One-click install
npx skills add https://github.com/microsoft/vscode --skill chat-pet-sprite-creation
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: chat-pet-sprite-creation
Source: https://github.com/microsoft/vscode/tree/main/.github/skills/chat-pet-sprite-creation
Command: npx skills add https://github.com/microsoft/vscode --skill chat-pet-sprite-creation

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Creating chat pet sprites that feel like one continuous character across many states is difficult because each new pose risks breaking the body anchor, baseline, or Stable/Insiders parity. This Skill provides the exact pixel grid, animation contract, and runtime wiring rules so new art integrates cleanly with the existing widget.

Core Features & Use Cases

  • Logical Pixel Art Standards: Enforces an 8x8 source-pixel logical unit, nearest-neighbor rendering, and transparent backgrounds for all sprite sheets and static PNGs.
  • State and Animation Contract: Defines how to author idle, rendering, transient, and reversible states, including frame durations, reduced-motion fallbacks, and DOM-eye overlay rules.
  • Stable/Insiders Parity and Accessories: Requires identical geometry across palette variants and a body-owned attachment rig with a 256x192 or 384x288 atlas for wearable accessories.
  • Use Case: Add a new "love" reaction sprite by deriving the body from the current idle baseline, authoring a horizontal sprite sheet plus reduced-motion PNG, updating chatPetWidget.ts timings, and validating with the ChatPetWidget unit tests.

Quick Start

Read the current implementation under src/vs/workbench/contrib/chat/browser/widget/media/chatPet and chatPetWidget.ts, then author the new sprite by copying the idle baseline, applying the documented logical-pixel grid, and updating every runtime wiring surface listed in the skill.

Frequently Asked Questions about chat-pet-sprite-creation

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

FAQPage Schema
How do I create a new VS Code chat pet sprite state?▼

Copy the current idle or rendering sprite as the baseline, alter only the required parts, and author both a static reduced-motion PNG and a horizontal sprite sheet. Then update ChatPetState, getChatPetSpriteName, frame durations, sprite sources, and the relevant unit tests in chatPetWidget.ts.

What pixel grid should chat pet sprites use?▼

Use an 8x8 source-pixel logical unit on a 96x96 canvas, rendered with nearest-neighbor sampling and no antialiasing. Effects may subdivide the logical pixel only when needed for small details like stars or bubbles, and the subdivision must stay consistent throughout that effect.

How do Stable and Insiders sprite variants stay in sync?▼

Author one geometry master and apply the two established palettes so canvas dimensions, frame count, alpha mask, body anchor, static fallback, and timing remain identical. Any shape difference between Stable and Insiders is treated as a bug unless the product explicitly requires it.

Why does the DOM eye layer conflict with baked pupils?▼

States that use runtime gaze or DOM blinking must leave the sprite eye sockets empty and use eye-less tracking assets. Combining baked pupils with the runtime eye overlay causes visual artifacts, so states with fixed expressions bake the eyes into the art and opt out of cursor tracking.

When should sprite frames be used instead of CSS transforms?▼

Use sprite frames for changes to the pet or prop silhouette, and reserve CSS transforms or the physics loop for translation, rotation, enter/exit motion, drag resistance, and falls. Do not redraw every translated pose into the sheet, and do not fake body deformation with a CSS transform.

What is the accessory atlas contract for chat pet wearables?▼

Wearables use a body-owned attachment rig and one palette-independent atlas per appearance, defaulting to 256x192 with 64x64 cells. A hat needing the full 12-logical-pixel body width may declare atlasCellSize 96 and use a 384x288 atlas, but both tiers still use whole 8x8 logical pixels.

Related Skills

Explore More Design & Creative Skills→
darwinboaventuradarwinboaventura

sessions

Guide Agent Sessions window implementation with layering and layout specs.

Community
Advanced
worm-13worm-13

multi-pet-layout-adjustment

Adjust a single pet's anchor and scale in a multi-pet session state.

Community
Advanced
dtabordadtaborda

contract-testing

Validate JSON contract fixtures against Zod schemas with Vitest.

Community
Intermediate
AbsolutelySkilledAbsolutelySkilled
207

pixel-art-sprites

Design and animate pixel-art sprites for 2D games.

Official
Intermediate