← ClaudeAtlas

locuslisted

INVOKE THIS SKILL when: making AI-generated images interactive, mapping clickable zones onto generated artwork, warping HTML content onto perspective surfaces in images, defining freeform polygon hotspots, creating hover/click states for elements in AI art, or performing surgical edits on specific regions of generated images. Contains four original techniques: CSI, IQM, HQW, and ADT.
jord0-cmd/jord0.skills · ★ 0 · AI & Automation · score 73
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