# RuiC Card Skill ships its own acceptance test, and the test compares rendered frames

> An agent skill that turns one sentence into a holographic trading card: four generated layers, a Blender scene with real parallax depth, a single-file Three.js viewer, and an editable project handed back. The unusual part is the last stage, where the pipeline launches its own headless browser and checks that the card actually moves.

**HRuiCcc/RuiC-card-skill** — 全息闪卡 Codex Skill：一句话生成可拖转、会流光、带层次景深的 3D 闪卡网页，附可编辑 Blender 工程

- Repository: https://github.com/HRuiCcc/RuiC-card-skill
- Stars: 459 · Forks: 36
- Language: JavaScript
- License: NOASSERTION
- Published: 2026-09-17 · Updated: 2026-09-17 · Language: en
- Canonical page: https://hysenlabs.com/projects/hruiccc-ruic-card-skill

## The repository description calls it a Codex skill and the README refuses to pick a host

There is a mismatch in the very first line a visitor sees.

The repository description calls it a Codex Skill, a term associated with one agent host. The README takes the opposite position and describes it as a general-purpose agent skill that does not choose a host, because the pipeline requires the model to draw the four layers itself and then open a rendered frame to judge whether the result is right. Any multimodal model that can both generate an image and look at one can run it, in any host that reads SKILL.md.

The installation is therefore a directory copy rather than a package install. Put the folder in the host's skills directory, where the directory name is the skill name, and the general convention given is ~/.agents/skills/ with other hosts using their own equivalent.

There are two readmes. README.md is the Chinese original and README.en.md is linked from its first line as the English version, which is unusual for a project of this size and tells you something about who the audience is.

The body of the skill is only code and text, which is what makes the copy approach viable.

## The acceptance test compares real rendered frames, not slider readings

Most of this pipeline is ordinary. The last stage is not.

A verification script is invoked against the finished project:

```bash
node scripts/verify_web.mjs <项目>
```

It starts a headless browser and a local service, then works through the checklist in order: dragging, flipping, zooming, keyboard input, the five sliders, the four card finishes, screenshot download, a 390 pixel narrow viewport, and a reduced-motion pass.

The distinguishing detail is what it compares. It checks real rendered frames rather than only confirming that a slider readout changed, so a card that moves its layers but renders white passes nothing. The report and the per-angle screenshots are written into a verification/ directory.

It runs on macOS, Windows and Linux, and the README calls out headless containers and root specifically. On Linux the script adds --no-sandbox and --disable-dev-shm-usage to the browser itself, which is what makes the root and container cases work without configuration.

One caveat worth checking yourself. The scripts directory listing in the README shows eight Python files and does not include verify_web.mjs, even though the feature list names it. Confirm it is present before planning on that stage.

## Pointing at a mirror means trusting it for the checksum as well

Blender is not something you install yourself. The pipeline fetches the official portable build, verifies it by SHA-256, and unpacks it into the project's own tools directory so nothing touches the system environment.

The project-local installation is the right default for reproducibility: two projects on the same machine get independent copies and cannot collide.

The override exists for networks where the official source is unreachable. RUIC_BLENDER_BASE points the download at a mirror, and an aliyun mirror URL is given as the example.

The detail the README is honest about is where the checksum comes from. The digest is taken from the same source as the archive. Setting RUIC_BLENDER_BASE therefore changes who verifies the artefact as well as who serves it, and the README says plainly that you have to trust the mirror yourself.

That is the correct trade to state out loud rather than hide. It means the SHA-256 check protects you against a corrupted or truncated download, and it does not protect you against a mirror that serves a different archive with its own matching digest.

If that matters for your use, supply the digest yourself and skip the fetch.

## glTF cannot carry the material graph, so the shader is rebuilt in the browser

The web viewer and the Blender scene have to look identical, and the obvious way to get a web scene out of Blender does not work.

The export produces card.glb, and what it carries is geometry plus a contract of material names. Blender's custom shader node graphs cannot be transferred through glTF, so the browser rebuilds the shader from the same formulas rather than importing it.

That constraint is stated as the reason for a second decision: the viewer is bundled into a single file with three and the icons inlined. A page that requests a dozen small modules is exactly what an ad blocker breaks, so a single file has nothing to block.

There is a fallback for the other common failure. If the browser has hardware acceleration disabled, the viewer falls back to CSS 3D with layered planes, so the page does not go blank. The claim is that it will never show a white screen.

The phase of the holographic laser follows the viewpoint rather than the clock, which is the difference between a surface that flashes and one that glints as you turn it. Four finishes are offered: gold foil, silver foil, pearlescent, and the original artwork.

## Parallax is a signed depth offset on the UV, and the defaults are documented

The stated reason the layers look separated is that it is not simple texturing.

The method is described in three steps. The view direction is transformed into the card's surface coordinate system, divided by a bounded normal component, and then used to apply a signed depth offset to the UV. That is what produces layers sliding against each other as the card turns, rather than a plane image tilting in space.

All four layers, subject, background, lineart and text, are composited with one shared UV formula in both Blender and the browser. The claim is that what you see in the editor is what you get on the page.

The defaults are given as numbers. The subject layer sits at scale 1.25 and depth 0.4, so it comes forward. The background sits at depth -0.25, so it recedes. The README says to raise the values if you want more movement.

There is also a before and after in the demonstration section. The earlier version spaced the layers further apart and they visibly separated on rotation, and the tighter spacing shown afterwards is now the factory default, with the depth retained. Both demo videos were produced with DeepSeek V4.1 Flash, which is the model credit given rather than a claim about the skill's output.

## The model has to be multimodal for two separate reasons, and Python 3.9 is a real floor

The environment requirements are stricter than they first appear.

The model must be multimodal, and the reason is given as two distinct capabilities rather than one. It has to generate images for the four layers, and it has to view a rendered frame and judge whether the render is correct. A text-only model cannot do the second step, so the pipeline cannot complete without image understanding even if it could draw.

Python is 3.9 or newer with Pillow, and the reason is a single method call: ensure_blender.py uses Path.is_relative_to, which errors out on 3.6 and 3.8. Node.js and npm are also required for the web build and the verification step.

The browser for the acceptance test is flexible. A system Chrome, Edge or Chromium works, a Playwright cached Chromium is accepted, and RUIC_BROWSER or a --browser flag can point at a specific path.

Blender itself is the one thing you do not install. The pipeline fetches the official portable build and puts it in the project directory, which is also why the skill can claim it leaves the system environment alone.

Two of these requirements interact badly. A multimodal model with image generation plus a Python environment plus Node plus a Chromium build is a heavy chain to satisfy for a single card.

## The text layer gets no parallax, which is why the card frame stays put

One deliberate asymmetry in the parallax is worth knowing before you adjust the layers yourself.

The card frame and the text are both in text.png, and the web page applies no parallax to the text layer. The consequence is that the frame stays pinned to the card edge while the subject and background move.

That is the correct behaviour for a border. A frame that slid against the card edge while the artwork shifted would look broken, so the design trades one layer's motion for the whole card's coherence.

The effects layer is separate again. assets/effects.png is optional and carries its own depth, exposed in the web page as the effects depth slider. It is layered above the character and below the text, which places petals, sparks or thorns in front of the subject without crossing the lettering.

The remaining knobs are shader parameters: laser stripe density, distortion and angle, plus a pink to yellow to blue to white gradient. Lineart glow has an intensity and a mask density that runs from a faint outline to a neon edge. Starlight has a Voronoi scale and animation noise going from a few scattered points to a full sky.

The Blender interface language defaults to Simplified Chinese and is stored in a project-local configuration, so it can be changed with one sentence.

## You get a project directory back, and the skill itself ships as a text-only zip

The delivery is a directory rather than a file, which is the point of the editable claim.

What comes back: a local web page at 127.0.0.1:4173 for dragging, turning, flipping and pulling sliders; card.blend for continuing to adjust materials, change lighting and produce renders in Blender; an assets directory of the four layers, so swapping one layer means rerunning the pipeline rather than starting over; card-config.json for the name, number and rarity; a rendered image to publish; and the verification/ directory holding the acceptance report and the per-angle screenshots.

The card itself is thin by design. The skill body contains only code and text, no binaries, no credentials and no cache, which is what makes it distributable as a single archive:

```bash
python scripts/package_skill.py RuiC-card-skill --out ~/Desktop/RuiC-card-skill.zip
```

That script works from a whitelist of text files, so the archive contains what is needed and nothing else.

Everything you generate stays in your own output project. Nothing is written back to the skill, so several cards can be produced side by side from one installation with no shared state.

## Conclusion

This fits someone producing a small number of collectible cards or card art and who wants a real Blender scene rather than a CSS trick, with the option to keep editing afterwards. It does not fit batch work, since the model has to generate and then judge every layer, and the output is a project directory rather than a service. Two things to know before you start. First, the official Blender download is checksummed against the same source it is fetched from, so pointing RUIC_BLENDER_BASE at a mirror means trusting that mirror for both the archive and its digest. Second, the acceptance script is a Node file that the directory listing does not show, so confirm it ships before planning on the verification stage. The last push is dated 2026-09-30 and there are no releases.

## FAQ

### What does the RuiC Card Skill need in order to run?

A multimodal model that can both generate images and view rendered frames, Python 3.9 or newer with Pillow, Node.js with npm, and a Chromium-family browser for the verification step. Blender is not needed on your machine because the pipeline downloads the official portable build into the project directory.

### Which agents can use the RuiC Card Skill?

The README describes it as host-agnostic: any agent that reads SKILL.md and runs a multimodal model. Copy the folder into the host's skills directory, where the directory name becomes the skill name, with ~/.agents/skills/ given as the general convention. The repository description, however, calls it a Codex skill.

### What does verify_web.mjs check?

It launches a headless browser and a local service, then exercises dragging, flipping, zooming, keyboard input, the five sliders, the four card finishes, screenshot download, a 390 pixel narrow viewport and a reduced-motion pass. It compares real rendered frames rather than only slider readings, and writes a report plus per-angle screenshots into verification/.

### How does the RuiC Card Skill handle a blocked Blender download?

Set RUIC_BLENDER_BASE to a mirror, with an aliyun mirror URL given as an example. The default path downloads the official portable build and verifies it by SHA-256 into the project directory. The digest is taken from the same source as the archive, so the README states you have to trust the mirror yourself.

### Why is the RuiC card viewer bundled as a single file?

Blender's custom material node graphs cannot be transferred through glTF, so the browser rebuilds the shader from the same formulas. The viewer is then inlined into one file because a page making many small module requests is what ad blockers break, and there is a CSS 3D fallback if the browser has hardware acceleration disabled.

### What do I get back from a RuiC card run?

A local page at 127.0.0.1:4173, an editable card.blend, the four layered images in assets/, a card-config.json for the name, number and rarity, a rendered image, and a verification/ directory with the acceptance report and screenshots. The card frame and text share text.png and receive no parallax, so the frame stays pinned to the edge.

## Sources

- [HRuiCcc/RuiC-card-skill on GitHub](https://github.com/HRuiCcc/RuiC-card-skill)
- [Issues](https://github.com/HRuiCcc/RuiC-card-skill/issues)
- [README](https://github.com/HRuiCcc/RuiC-card-skill/blob/main/README.md)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/hruiccc-ruic-card-skill