---
name: pixel-craft
description: Use when crafting pixel art and optional retro effects.
version: 0.1.0
author: Chris (cygnostik), Hermes Agent
license: LicenseRef-ProDyn-Private
platforms: [linux, macos, windows]
metadata:
  hermes:
    tags: [pixel-art, illustration, color, lighting, retro, craft]
    related_skills: []
---

# Pixel craft

Create intentional pixel-based illustrations, scenes and contained visual treatments. Design a readable story, coherent light and material response, then make the pixels serve it. Contemporary editorial hybrids and native-grid artwork are different deliverables; label them honestly. The optional retro vocabulary is a set of tools, not one combined style.

## When to use

- Art direction or creation of editorial pixel illustrations, detailed native-grid scenes, pixel-based product stories and purposeful retro-sci-fi imagery.
- Palette, value, lighting, cluster, scaling or material problems in such work.
- Deliberate VHS, CRT or digital-glitch treatments inside nonessential media, or choosing among synthwave and other retro directions.
- Don't activate this entire workflow for ordinary web copy, an unrelated UI fix, a photo mosaic request or a sprite-sheet task with its own established engine contracts. A request for one technique does not authorize the rest.
- Suggest this style only when it advances a project's story. Recommend one relevant opportunity at a time. Do not retrofit other projects or identities without authorization.

## Prerequisites and portable capabilities

Read/modify local files, run Python/Node when using the examples, inspect actual images, and inspect a real browser when delivering interactive work. Optional generation requires the user's approved image tool; never switch vendors, buy access or upload private references by inference. If visual inspection or an editor is unavailable, state the missing capability and keep the result at that evidence level.

The static demo has no build step, CDN, font or runtime package dependency. Python studies require Pillow; developer browser tests require Node and Playwright. See [README.md](README.md) for exact setup and commands, [adapters](references/adapters.md) for agent/runtime mapping, and [notices](NOTICES.md) before sharing. Test evidence is not proof of every operating system, browser, display or pixel editor.

## Start with the smallest useful brief

1. **Outcome:** identify audience, surface, one action/metaphor, intended display size and editable deliverable. Use [the brief](templates/art-brief.md) when several choices matter. Resolve only ambiguity that changes the result.
2. **Read the reference:** distinguish medium, layout, composition, palette, lighting, materials and signal/display artifacts. Do not infer creator, AI authorship, historical hardware, native grid or exact software from a screenshot. Use [craft fundamentals](references/craft.md).
3. **Choose a route:** native-grid drawing for exact clusters/sprites; editorial hybrid for detailed illustrations; concept-to-grid redraw when concept speed and precise finishing both matter. Downsampling is a constraint operation, not automatic craftsmanship. See [production](references/production.md).
4. **Choose one art direction and, only if useful, one treatment:** editorial, clean native, retro-sci-fi, restrained 1980s or synthwave; separately select none, VHS, CRT or glitch. [Retro directions](references/style-selection.md) and [effect mechanisms](references/retro-effects.md) explain the distinctions. A warm daylight scene is as valid as neon night.

Completion: a compact brief states what will be built, what must remain unchanged and how it will be judged. Do not multiply outputs to avoid committing to an artistic decision.

## Author light, palette and form

5. Block silhouettes and three-to-five **value groups** before detail. Check the story at thumbnail and target size; isolate hand/tool/object or gripper/component contact where it carries meaning.
6. Make a light map: key direction, source size/color, ambient or bounce, receiving planes, occlusion and emissive objects. Keep local material color separate from illumination. Warm-key/cool-shadow is a recipe, not a law. Use [color and lighting](references/color-light.md).
7. Assign material-specific ramps and reserved semantic accents. Broad matte planes, sharp metal highlights and translucent/emissive parts need different treatment. Avoid additive glow everywhere. Preserve enough neutral/dark area for colored light to read.
8. Draw connected clusters and rhythmic contours on the chosen grid. Remove accidental isolated pixels, contour banding, pillow shading and texture that competes with the action. Use selective dithering only for a stated transition/material purpose.
9. Preserve a clean master. For an exact palette, validate decoded pixel membership and reserve small eyes/LEDs/warnings before adaptive reduction. For exact grid output, inspect the logical source and integer nearest-neighbor replication; CSS `pixelated` alone is not proof.
10. For generated work, give references explicit style/identity/layout roles, keep text and real brand marks separate, and edit the failed relationship or medium specifically. Recheck whole-image drift. A prompt requesting a palette, dimensions or layers does not establish them.

Completion: inspect both native/close-up detail and the intended display composition. Declare whether the output is hand-refined, procedurally drawn, generated hybrid or merely converted.

## Integrate without compromising the host

11. Keep essential copy, navigation, controls, logos and state colors outside illustration effects. Let the host own identity. The [ProDyn adapter](adapters/prodyn.md) is opt-in; the portable demo itself is neutral and contains no ProDyn fonts or logo.
12. Put degradation after the clean art stage. For VHS manipulate signal-style luma/chroma behavior; for CRT describe display scan/phosphor behavior; for digital glitch use bounded data/block displacement. These demos are artistic approximations, not calibrated device emulators. Follow [effects techniques](references/retro-effects.md).
13. Preserve an ordinary still and an Off state. Animation is deliberate and opt-in; honor live reduced-motion changes, pause hidden/offscreen work, cancel obsolete loads and release resources on destroy. Avoid strobing and fake operational failures. Test source-content changes, not just moving controls.
14. Export lossless clean art and, when asked, a clearly labelled treatment export. State actual file dimensions, color mode and working/output color space. Distinguish **palette fidelity**, **perceptual coherence**, **physical plausibility** and **measured colorimetric accuracy**. A screen inspection does not certify a calibrated monitor or a physically accurate renderer.

Completion: inspect the actual host at narrow and wide-phone widths plus desktop, keyboard/no-JS/reduced modes, then read back the delivered files.

## Learn from sources, then transform

Read the [inspiration atlas](references/inspiration.md) and [retro inspiration](references/style-selection.md) by mechanism, not by artist-name imitation. Record the principle, why it works, a different subject/context, what you deliberately reject and a test that could expose failure. No source image or artist's signature composition is a free redistribution asset.

Use [practice and review](references/mastery-practice.md) for changed-context exercises and a durable critique loop. Run one meaningful transfer task and one relevant failure/correction exercise when extending the capability; ordinary established use does not need the entire curriculum. Keep task findings in the owning project. Incorporate general lessons here only after verifying them.

## Pitfalls

- “16-bit-inspired” is a visual description, not console compatibility. Three-quarter perspective is not necessarily isometric; visible squares do not make an image voxel art.
- A technically correct indexed image can have worse anatomy, accents and cluster design. A generated scene can have compelling lighting but inconsistent logical pixels. Don't let one metric stand for quality.
- Never describe every 1980s influence as synthwave, every scanline as VHS, or every chromatic fringe as a tape defect. Separate art direction, acquisition/storage, transmission and display.
- Do not multiply gamma-encoded colors as if they were linear light. Conversely, a physically motivated calculation still needs artistic selection and quantization to form good pixel clusters.
- Don't darken a shadow by reducing saturation indiscriminately; reflected illumination and material matter. Don't hue-shift every material identically.
- Exact brand accent values belong to the clean semantic/UI layer. A tinted or degraded illustration may use a related color family, but must not be called an exact token rendering.
- No copyrighted reference artwork, unlicensed fonts, private archive or credentials belong in a portable package merely because they informed the study.
- A passing test suite is bounded evidence. Animation authoring, manual editor proficiency, broadcast accuracy, physical-display fidelity and production use require their own demonstrations.

## Verification

Use the [critique checklist](templates/critique.md) and `references/production.md` export checks. Exercise included tools with real files and inspect their outputs. The package's `EVIDENCE.md` separates demonstrated behavior from researched guidance and unresolved limits. Re-run affected tests after changing a script, color path, browser lifecycle, export or adapter; do not manufacture an enormous verification ceremony for an unchanged ordinary image.

Deliver the actual artifact, a concise account of the key art-direction choices, source/rights notes where relevant, and material remaining limits. Keep broader research in the skill and project rather than overwhelming the handoff.