Installation

You need a project with shadcn/ui set up (a components.json), Tailwind v4 and React 19.

1. Add the registry

Add the @asciicn namespace to components.json, so components can find the engine:

{
  "registries": {
    "@asciicn": "https://asciicn.sumak.dev/r/{name}.json"
  }
}

2. Add components

pnpm dlx shadcn@latest add @asciicn/ascii-image @asciicn/ascii-background

The first one also writes the engine to lib/ascii/. Components land in components/ascii/.

Engine and agent skill

To build your own effects, or let your coding agent do it, install the skill. It brings the engine with it:

pnpm dlx shadcn@latest add @asciicn/asciicn-skill

That writes .claude/skills/asciicn/SKILL.md and .agents/skills/asciicn/SKILL.md, which Claude Code, Codex, Cursor and other Agent Skills tools read. Commit them so every teammate and agent sees the same version.

Using another agent, or want the skill in every project? The skills CLI asks which agents you use and writes to each one’s folder (add -g for global). It installs the skill only, so add the engine with @asciicn/ascii-core as well:

pnpm dlx skills add https://asciicn.sumak.dev

Engine only:

pnpm dlx shadcn@latest add @asciicn/ascii-core

Updating

The engine is source in your repo and never updates by itself. To refresh it, copy out local edits, delete lib/ascii and add @asciicn/ascii-core again.