ranbot-ai/lookdev
skills/lookdev/SKILL.md
Human-in-the-loop web studio to tune AI-generated output by eye. Stand up a local interactive studio (sliders, pickers, drag handles) or an inline edit/highlight/comment annotation studio for prose &
$ install --global
skillsauthnpx skillsauth add ranbot-ai/awesome-skills lookdevInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Jun 18, 2026, 5:23 AM35.6s1 file scanned
SKILL.md
- name:
- lookdev
- description:
- Human-in-the-loop web studio to tune AI-generated output by eye. Stand up a local interactive studio (sliders, pickers, drag handles) or an inline edit/highlight/comment annotation studio for prose &
- category:
- Document Processing
- source:
- antigravity
- tags:
- [python, react, node, markdown, api, claude, ai, agent, workflow, design]
- url:
- https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/lookdev
When to Use
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 "show me, I'll pick" beats asking the user to specify a number, and whenever you'd otherwise hand back a static grid or a wall of prose for review.
Source: connerkward/lookdev-studio-skill (MIT).
Lookdev
When the user says "lookdev" — or any of: tune, dial in, iterate on the look of, compare variations of, let me adjust, let me edit/annotate/mark up, review this post/doc/copy — they mean build an interactive in-browser tool the user directly manipulates. Not a static grid of N variations. Not a Q&A where they specify numbers. Not a wall of prose they're asked to read and reply to in chat. A real-time studio where they act on the artifact and the change is captured.
Two studio shapes — pick by what's being tuned:
- Visual-parameter lookdev — the artifact's look is set by numbers/choices (color, type, layout, image treatment, animation, 3D). Controls = sliders, pickers, drag handles. This is the bulk of this skill (below).
- Text & media lookdev — the artifact is a document, blog post, copy, or media set and the user is editing/curating it: rewriting sentences, cutting boring paragraphs, highlighting, leaving margin comments, flagging "diagram goes here" / "wrong image, replace." Controls = direct inline editing + selection highlight + anchored comments + media annotation. See the dedicated section below. A blog post / doc / script review IS this mode — never hand back a long markdown file and ask the user to react in chat. Stand up the annotation studio.
What it covers
Any visual decision the user picks by feel, not by spec. Expand this list as needed:
- Image processing — dither, halftone, posterize, ASCII, blur, edge, quantize, mosaic, color-grade
- Color — palette extraction (show coverage %), per-band pickers, saturation / contrast / gamma curves, harmony presets, theme tokens
- Typography — font selector, size / weight / leading / tracking / measure, live sample text, fallback stack
- Layout, positioning, framing, spacing — draggable & selectable elements; resize handles; margin / padding rulers; alignment guides; snap-to-grid; aspect-lock toggles
- Crop & framing — draggable crop rectangle with aspect lock; live cropped preview at production size
- Animation / transitions — easing curve editor, duration sliders, scrubber, replay
- Component variants — render hover / focus / disabled / loading / dark side by side on one page
- Iconography — stroke weight, corner radius, glyph on canvas
- AI-generated content — prompt input + param sliders + side-by-side regeneration grid
- Anything else where "show me, I'll pick" beats "ask me to specify a number"
Controls must stay reachable while inspecting
If the studio shows a list, grid, or scroll-long set of variations, controls must be visible from every scroll position. The user has to be able to drag a slider while looking at row 14, not scroll back to the top each time.
Two approaches, pick by layout:
- Sticky bar (
position: sticky; top: 0) at the top of the scroll container. Keep the bar visually distinct — paper background + blur backdrop + bottom border — so it doesn't muddy the specimens scrolling behind it. Sticky pins relative to the nearest scrolling ancestor with a defined boundary; if you nest it inside a sized parent (a<header>withmargin-bottom, a<div>with a fixed height), it stops sticking at that parent's bottom edge. Lift it to be a direct child of<body>(or the page-wrap) so stickiness spans the whole page. - Floating overlay (
position: fixed) for hotkey-toggled controls — e.g. pressdto reveal. The portfolio's.debug-ctlpattern is this: pinned top-left, transparent until summoned. Use when the controls shouldn't occupy permanent screen real estate (final viewers shouldn't see them; the author can summon on demand).
Anti-pattern: a top-of-page control panel that the user scrolls past and never sees again. They will tune blindly, give up, or guess. Either keep the controls in view or duplicate a compact control bar next to each variation row.
Text & media lookdev — direct edit, highlight, comment, annotate
When the artifact is a blog post, doc, copy deck, script, or media set, the user is not turning knobs — they're marking up the work the way an editor marks a manuscript. The studio renders the real artifact WYSIWYG (the actual rendered blog with its real components/media, not a raw-markdown textarea) and lets the user act on it directly. Building this for a doc review is mandatory: do not paste a long file into chat and ask "what do you think?" — that's the boring wall of text the user is rejecting. Stand up the
Related Skills
ranbot-ai/grok-delegate
tools
VerifiedTrustedCommunity
Delegate coding tasks to the Grok Build CLI only when the user explicitly requests it, while the orchestrator retains review and landing responsibility.
6SKILL.mdUpdated Aug 31, 2026
ranbot-ai/skills/graceful-shutdown
development
VerifiedTrustedCommunity
--- name: graceful-shutdown description: Implement graceful shutdown for servers and workers: drain connections, finish in-flight work, release resources, and exit cleanly on SIGTERM/SIGINT. category: AI & Agents source: antigravity tags: [python, typescript, node, api, claude, ai, template, docker, kubernetes] url: https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/graceful-shutdown --- # Graceful Shutdown ## Overview A skill for implementing graceful shutdown in server
6SKILL.mdUpdated Aug 31, 2026
ranbot-ai/skills/falsify
development
VerifiedTrustedCommunity
--- name: falsify description: The scientific thinking protocol for AI agents. Use when facing complex, ambiguous, or high-stakes questions where guessing is costly: hypothesis → attempt to break it → evidence → calibrated co category: Creative & Media source: antigravity tags: [markdown, claude, ai, agent, llm, template, design, security, rag, cro] url: https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/falsify --- # Falsify — The Scientific Thinking Protocol > Think like
6SKILL.mdUpdated Aug 31, 2026
ranbot-ai/delegate-setup
tools
VerifiedTrustedCommunity
Configure approved delegation lanes across installed implementer CLIs, including optional model and effort choices, then write global or project config only after explicit user approval.
6SKILL.mdUpdated Aug 31, 2026