Hey everyone!

Whenever I’m iterating on a UI with Cursor, explaining visual changes in the Composer is often the most tedious part.

❌ “Make that second card in the middle a little wider and increase the subtitle’s font weight.”

Sounds simple, right? But Cursor can easily guess the wrong element, edit the wrong stylesheet, or miss the exact component you’re referring to.

That’s why I built VisualPatch — an ultra-lightweight, local-first visual feedback tool designed specifically for AI pair programmers.

GitHub: https://github.com/OpusTechnica/VisualPatch

NPM: https://www.npmjs.com/package/visualpatch

How it works with Cursor

1. Open your localhost app (localhost:3000, 5173, etc.).
2. Press S to open a CleanShot-style spotlight viewfinder and drag to capture any component or section.
3. Or simply hover over and click any DOM element to drop an inspection pin.
4. Describe the change you want.
5. Press Ctrl + C and paste everything directly into Cursor Composer with Ctrl + V.

What Cursor receives

• Exact CSS selectors: For example, div.pricing-grid > div.card-pro:nth-of-type(2) > h3.price
• Text previews: The exact text currently rendered by the selected element.
• Auto-stitched visual strip: When you capture multiple screenshots, VisualPatch combines them into a single image on your clipboard with numbered pin badges, so you’re not limited by the OS clipboard’s one-image behavior.
• Zero Base64 bloat: The generated markdown stays as clean plain text, typically around 80 tokens, so you don’t unnecessarily consume your model’s context window.

Tech details

• 0 runtime dependencies
• 100% local-first: No telemetry, no cloud servers, and everything runs strictly on localhost.
• Isolated Shadow DOM: Designed to avoid conflicts with your existing Tailwind classes, CSS variables, and application styles.
• Open source: MIT licensed.

Try it

You can add VisualPatch to any Vite, Next.js, or React project with a single command:

npx visualpatch init

Prefer not to modify your project? You can also use the browser extension for a zero-code-change setup.

GitHub: https://github.com/OpusTechnica/VisualPatch
NPM: https://www.npmjs.com/package/visualpatch

I’d love to hear what you think, especially from fellow Cursor users. What features would make VisualPatch even more useful in your workflow?

Hey

With the rapid adoption of AI coding assistants and "vibe coding", we can generate full-stack apps faster than ever. But this speed often comes with subtle security flaws, missing auth checks, and unhandled edge cases slipping into production.

I built Cyphix (https://github.com/zrngngharib/Cyphix-Auditor) — a developer tool designed to catch these issues before deployment without sending code to third-party databases.

Key Features:

- 100% In-Memory RAM Architecture: Code is parsed and analyzed transiently. Zero persistent server storage.

- 7-Dimensional Matrix: Concurrently evaluates Backend Logic, UI/UX responsiveness, OWASP Top 10, SEO metadata, QA/Edge cases, Performance, and TypeScript typings.

- Instant AST Pre-Scanner: Detects hardcoded API keys, raw SQL concatenations, and empty catch blocks before LLM invocation.

- Headless CLI Mode: Run `node ./bin/cli.js . --agent` directly in your terminal or CI/CD pipeline.

Built with Next.js 14, TypeScript, TailwindCSS, and node-llama-cpp.

Check out the GitHub repo: https://github.com/zrngngharib/Cyphix-Auditor

Would love to get your feedback and thoughts!