locuslisted
Install: claude install-skill jord0-cmd/jord0.skills
# LOCUS — Interactive Image Toolkit
*Four original techniques for making static AI-generated images interactive.*
Developed by [jord0-cmd](https://github.com/jord0-cmd). These techniques were invented to solve real problems that existing tools don't address: how do you add hover states to AI art? How do you map HTML onto a perspective-distorted screen in a generated image? How do you define clickable zones on irregular shapes? LOCUS answers all of these.
**Requirements**: React 18+ environment. Components use hooks, refs, and modern React patterns. Works with any React framework (Next.js, Vite, Remix, etc.) or standalone React.
---
## Usage
Describe what you want to make interactive — hover states, perspective-warped content, polygon hotspots, or before/after comparisons. LOCUS provides the four techniques (CSI, IQM, HQW, ADT) and the collaborative human-in-the-loop workflow to map coordinates visually.
---
## How This Works — The Human-in-the-Loop
**CRITICAL**: LOCUS is a collaborative toolkit. You (Claude) build the pages and components. The **user** does the visual work in their browser. Do NOT guess coordinates — they will be wrong.
### The Core Loop
```
1. USER describes what they want ("overlay text on that monitor screen")
2. YOU build a tuner/tool page with the right LOCUS component
3. YOU start a dev server and give the user the URL
4. USER opens browser, visually positions/draws/drags things
5. USER copies the output (JSON coordinates) and pastes it back