# Creative Visual Production

> Use when creating visual artifacts such as diagrams, Excalidraw files, HTML mockups, design references, p5.js sketches, pixel art, Manim animations, or DESIGN.md specs.

- Skill: `peterfile/creative-visual-production` (Agent Skill)
- Install (CLI): `npx skillmds@latest add peterfile/creative-visual-production`
- Raw SKILL.md: https://api.skillmd.com/api/skills/peterfile/creative-visual-production/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: MIT
- Author: PeterFile (https://skillmd.com/u/peterfile)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/peterfile/creative-visual-production

---


# Creative Visual Production

## Overview
Use this umbrella for visual deliverables. Choose the medium, create a real file or renderable output, and verify by opening, exporting, screenshotting, or running the renderer.

## When to Use
- Architecture or infra diagrams in SVG/HTML.
- Hand-drawn diagrams in Excalidraw JSON.
- HTML landing pages, mockups, prototypes, or design explorations.
- p5.js generative art, shaders, interactive, or 3D sketches.
- Pixel art assets with constrained palettes.
- Manim math or algorithm animations.
- DESIGN.md token specifications.

## Medium Selection
- Architecture diagrams: structured SVG/HTML with clear labels.
- Excalidraw: valid `.excalidraw` JSON.
- HTML/CSS mockups: produce variants when comparison helps.
- p5.js: build runnable sketches and verify in browser/local server.
- Pixel art: respect palette, resolution, tile size, and export format.
- Manim: render scenes and inspect the output.
- DESIGN.md: validate token schema and exports.

## Workflow
1. Clarify dimensions, medium, and audience only when material.
2. Generate source files in the workspace.
3. Run renderer, validator, or export where available.
4. Return artifact path or URL and verification result.

## Common Pitfalls
1. Delivering prose instead of a file.
2. Forgetting aspect ratio, palette, or export target.
3. Producing invalid JSON/HTML/JS without running it.

## Verification Checklist
- [ ] Medium selected.
- [ ] Source and viewable/exported artifact produced.
- [ ] Syntax/render/export verified.