An Agent Skill That Emits ASCII Shaders as Inlined TSX

ascii-shader-tsx solves the same problem as a UI component package, but the unit of distribution is the agent’s reference docs — not a versioned npm artifact.

Conventional path: publish @bhanueso/ascii-shader-fx, lock to a React major, ship semver bumps, deal with transitive deps.

Skill path: ship a markdown reference library (SKILL.md + 9 chapter files under references/). When you ask for “matrix rain with CRT scanlines”, the agent reads SKILL.md’s decision tree, loads the matching chapters (generative.md + effects.md), and emits a single .tsx file with the engine code inlined. Zero deps beyond React.

The layout:

SKILL.md                  # orchestrator, decision tree, component contract
references/
├── architecture.md       # canvas hook, ResizeObserver, prefers-reduced-motion
├── rendering.md          # BT.709 luminance, sRGB LUT, 8 color modes
├── dithering.md          # 8 algorithms (Floyd-Steinberg, Atkinson, …)
├── styles.md             # 9 art-style renderers (halftone, braille, particles)
├── generative.md         # simplex noise, fBm, matrix rain, plasma
├── effects.md            # CRT, glitch, bloom, chromatic aberration
├── charsets.md           # 30+ palettes (runes, katakana, math, box-drawing)
├── composition.md        # blend modes, mouse-attract, feedback buffer
└── image-source.md       # image / video / webcam pipeline

Three things this gets you that a package can’t:

One file in your repo. No node_modules touched. The component is fully readable, fully editable. To swap Floyd-Steinberg for Atkinson, you say so and the agent rewrites that block.

Version is your conversation. Updating means regenerating with newer agent context. No semver, no migration guide, no deprecated APIs.

Agent-agnostic. Same markdown works in Claude Code, Cursor, Windsurf, Cline, Gemini CLI — anything that reads files. The “import path” is “load the skill, then ask”.

The decision tree in SKILL.md is the load-bearing part. Without it, the agent reads everything and the context bloats. With it, “webcam-to-braille with Floyd-Steinberg dithering” loads image-source.md + dithering.md + styles.md only — three files, ~40KB of context, instead of all nine.

The companion skill (ascii-dither-shader, the bigger reference for the engine itself) covers the math; this one covers shipping. Both are MIT, both work on any agent that can read a directory.