soumyachk101

soumyachk101/VibeLens

Plugin Claude Code

VibeLens — visual debugging tools that let AI coding assistants see your localhost.

soumyachk101/VibeLens

MCP server Claude CodeCodexCursor

VibeLens — an MCP server that gives AI coding assistants eyes on localhost: screenshots, console errors, and a token-optimized DOM snapshot. Runs locally from the mcp-vibelens npm package.

soumyachk101/VibeLens

Instructions file

Claude Code instructions for soumyachk101/VibeLens, covering claude.md — working on vibelens, what this project is, stack, architecture and invariants — do not break these.

soumyachk101/VibeLens

Plugin Claude Code

Gives Claude eyes on localhost. Captures a screenshot, console/network errors and a token-optimized DOM snapshot of your dev server so UI bugs get fixed from evidence instead of guesswork.

soumyachk101/VibeLens

Agent

Judges whether a running localhost UI reads as deliberately designed or as machine-generated, and reports the specific tells with evidence. Delegate when the user says a page looks generic, bland, unfinished, "AI-generated", "like a template" or "not designed", asks for a design critique or a taste check, or wants an…

soumyachk101/VibeLens

Agent

Builds new frontend work — a screen, a component, a design foundation — with tokens established before components, every interactive and data state implemented, and each screen captured before it is called done. Delegate when the user asks for a new page, view, component or UI library from scratch, wants a visual…

soumyachk101/VibeLens

Agent

Evidence-driven frontend debugger for a running localhost app. Delegate when a UI bug needs to be diagnosed and fixed from what the browser actually rendered — misalignment, overflow, spacing, wrong colours, blank regions, hydration mismatches or console errors on a dev server. Requires the dev server to be running…

soumyachk101/VibeLens

Agent

Reviews a finished frontend implementation against its stated intent by capturing the running page at desktop, tablet and mobile and reporting defects with evidence. Delegate after a UI feature or fix is implemented and you want an independent check before calling it done, or when the user asks for a UI review or a…

soumyachk101/VibeLens

Hook

Runs after a tool call finishes for Write, Edit, Write and Edit tool calls, running an inline shell check (2 commands). From soumyachk101/VibeLens.

soumyachk101/VibeLens

Skill Claude CodeCodex

Run a heuristic accessibility audit of a localhost page from its screenshot and DOM — missing alt text, controls with no accessible name, unlabelled inputs, broken heading order, low contrast, small tap targets. Use when the user asks about accessibility, a11y, screen readers, WCAG, alt text, labels, contrast or…

soumyachk101/VibeLens

Skill Claude CodeCodex

Prove a UI change worked by capturing the page before the edit and again after it with identical capture parameters, then reporting a concrete diff. Use when the user asks you to verify, confirm or show that a fix landed, wants a before/after comparison, or doubts that a change had any effect.

soumyachk101/VibeLens

Skill Claude CodeCodex

Inspect a running localhost page and fix what is visually or functionally broken. Use when the user says the UI looks wrong, is misaligned, overflowing, has spacing or colour problems, or asks you to check/verify a page in the browser.

soumyachk101/VibeLens

Skill Claude CodeCodex

Audit and fix colour on a running localhost page — whether the accent is the framework default, hardcoded hex values instead of tokens, pure black and white, a flat neutral ramp, weak contrast on text and controls, and colour used as the only signal of state. Use when the user mentions colour, palette, theme, accent…

soumyachk101/VibeLens

Skill Claude CodeCodex

Capture a localhost page and triage only its console errors, uncaught exceptions and failed network requests — group them by root cause, map each to a source file, fix by severity and re-capture to prove the console is clean. Use when the user mentions console errors, warnings, a hydration mismatch, a red screen, a…

soumyachk101/VibeLens

Skill Claude CodeCodex

Judge whether a localhost page looks designed or machine-generated, and fix what gives it away — no type scale, the framework default accent, one radius everywhere, uniform spacing, no empty or loading states, invisible focus, pure black/white, placeholder copy. Use when the user says the UI looks generic, bland…

soumyachk101/VibeLens

Skill Claude CodeCodex

Audit the structure and spacing of a localhost page — spacing scale consistency, whether spacing groups related content, container width and line measure, optical alignment, grid versus flex misuse, magic z-index values and overflow. Use when the user mentions spacing, padding or margins, says a layout feels cramped…

soumyachk101/VibeLens

Skill Claude CodeCodex

Audit the interaction states of every control on a localhost page — hover, active, focus-visible, disabled, loading, selected, error — plus feedback timing, optimistic updates, destructive-action confirmation, validation timing and mobile touch targets. Use when the user mentions hover or focus states, buttons that…

soumyachk101/VibeLens

Skill Claude CodeCodex

Audit and fix the animation on a running localhost page — durations, easing, which properties are animated, reduced-motion handling and missing exit transitions — then propose a named duration and easing token set. Use when the user mentions animation, transitions, motion, easing, timing, something feeling…

soumyachk101/VibeLens

Skill Claude CodeCodex

Run the last-10% polish checklist on a localhost page — focus rings, selection colour, scroll behaviour, tabular numbers, heading wrap balance, paragraph measure, skeletons, empty and error states, hover/active/disabled states, cursors, icon sizing and stroke, favicon and title, 404 and offline. Use when the user asks…

soumyachk101/VibeLens

Skill Claude CodeCodex

Audit a localhost page across mobile, tablet and desktop viewports and fix responsive breakage. Use when the user mentions responsive design, mobile layout, breakpoints, or asks how a page looks on phones.

soumyachk101/VibeLens

Skill Claude CodeCodex

Audit and fix typography on a running localhost page — how many distinct sizes are in use, whether there is a scale, line length, line height, letter-spacing at display sizes, tabular numerals, and font loading shift. Use when the user mentions typography, fonts, font sizes, text hierarchy, line height, leading…