/rueca · a skill for coding agents
Rueca is a skill for coding agents. Point your agent at a prototype and it builds the design tool around it: an inspector of sliders and knobs, a timeline, layers, presets, undo, a share link and export. The prototype stops being a picture and starts being an instrument.
I named it Rueca, Spanish for spinning wheel. Raw fibre goes in, thread comes out.
Why I made it
More and more of what I make for clients are instruments: prototypes, asset generators, demos they can drive themselves. Every one needed the same controls, and I kept redesigning them from scratch.
So I wrote a skill to do it for me, pulled out of a motion study for one of my clients. I used it on everything after, including the brand tools for Trove. Rueca is that skill rebuilt properly, to work in any setup and to be open source. The rebuild took three days and 90 commits, with about ten Claude sessions running side by side, each with a job: the kit, packaging, brand, the logo, copy.
How it works
You describe what you need, bring your design, then tune it and export.
Underneath, the agent writes a schema first, one line per knob. That one list drives the inspector, defaults, presets, undo, A/B compare, the share link, and an export that copies your settings back as a prompt for the agent. It wraps your prototype instead of rebuilding it, so it works with canvas, WebGL and three.js, SVG, React, or a page that already exists.
Shells
It ships with 19 example tools the agent can borrow from: a motion study, a gradient studio, a 3D scene, a photo developer, a node editor, a drum machine and more.
Does it help?
I ran the same tasks with and without the skill, three runs each, scored from 0 to 1.
| Task | With Rueca | Without |
|---|---|---|
| Build a tuning tool | 0.92 | 0.00 |
| Make a client view | 1.00 | 0.00 |
| Make layers undoable | 1.00 | 0.33 |
| Wrap an existing page | 1.00 | 0.83 |
| Sign-off tool for a three.js scene | 1.00 | 1.00 |
| Leave a typo fix alone | 1.00 | 1.00 |
Where the agent already does fine on its own, the skill stays out of the way. Trimming the instructions afterwards cut the cost of a full run by 44% with every score held.
The brand
My toxic trait is I can't build a tool without also making an entire brand identity for it. So I made Rueca's identity, its launch video and its site, rueca.dev.
Install
npx skills add rueca/ruecaOr in Claude Code, add the marketplace, then install:
/plugin marketplace add rueca/rueca/plugin install rueca@ruecaThen ask your agent for a tool: “add sliders to this”, “make this a little editor”.