lookdev

What it does

The skill builds an in-browser studio that lets a user tune AI-generated output by eye. It supports two shapes: visual-parameter lookdev (sliders, pickers, drag handles) and text/media lookdev (direct inline editing, highlights, anchored comments, and media annotation). It covers many visual decisions (color, typography, layout, image processing, animation, and AI-generated content) and enforces that controls stay reachable during inspection. It also specifies that for text/media lookdev the artifact is rendered in-place (WYSIWYG) and edits/highlights/comments are exported as a single machine-readable patch object. It includes hotkeys and a motion-capture style management for gesture-based controls, with a focus on real-time in-browser manipulation rather than static grids or chat-based edits. It requires running locally on a free port, rendering the real artifact, and keeping edits in a patch that can be re-applied.

How it works

• When the user triggers lookdev (e.g., by saying words like "lookdev", "tune", "iterate on the look of"), the agent builds a real-time in-browser studio for direct manipulation instead of returning static variations.
• Two studio shapes are available: Visual-parameter lookdev (controls are sliders, pickers, drag handles) and Text & media lookdev (direct inline editing, selection highlight, anchored comments, and media annotation).
• For visual lookdev, controls drive properties such as image processing, color, typography, layout, cropping, animation, and component variants. The layout of controls prioritizes persistent visibility (sticky bar or floating overlay) to stay reachable during inspection.
• For text/media lookdev, the agent renders the actual artifact (MDX/React blog, document, or media set) and enables: direct inline editing, selection highlights, anchored comments, and media annotations. It exports edits, highlights, comments, and media flags as a single patch JSON blob and applies changes back to the source.
• It implements a patch round-trip: edits, highlights, comments, and media flags are exported as a patch blob, ingested by the agent, and re-served as the updated artifact.
• The instructions specify rendering the real content, using Selection/Range for text offsets, and ensuring hotkeys (e.g., highlight, comment) are available. It mandates that editing mode, highlighting mode, and commenting mode are distinct to avoid accidental edits.
• It defines control patterns and layout guidance (sticky vs floating controls), plus coherence rules for paired controls (min/max) to avoid crossing boundaries, with debounced live re-rendering on inputs.

When to use it

Use when the user says "lookdev" or asks to tune/dial in/iterate on the look of something, compare variations by feel, or review/edit/annotate a blog post, doc, copy, or media set. Use whenever a numeric specification is less desirable than interactive exploration, and a static grid or prose wall would be rejected.

What it can touch

• Tools listed: cla ude-code, antigravity, cursor, gemini-cli, codex-cli. It specifies live rendering and per-block editing using contentEditable or textarea, selection ranges, and a local storage patch export. The skill requires rendering the artifact locally and applying edits back via a patch structure. It references blocks by IDs, offsets, and media IDs for annotation and flagging.

Caveats

• The approach relies on a local HTML/JS single-page app with no build step, using vanilla JS to render and manage state, and a patch export/import workflow. It requires that the export blob captures edits, highlights, comments, and media flags, and that the app can re-serve the updated artifact after baking changes. It emphasizes that no markup may exist that isn’t in the export blob and that the UI should keep controls reachable and synchronized with bounds during interactions. The skill license is MIT and risk is safe.