A browser coding agent interface for selecting elements and sending instructions directly to Claude Code.
# Add to your Claude Code skills
git clone https://github.com/thetronjohnson/layrrLast scanned: 5/30/2026
{
"issues": [
{
"type": "npm-audit",
"message": "geist: Vulnerability found",
"severity": "medium"
},
{
"type": "npm-audit",
"message": "next: Vulnerability found",
"severity": "medium"
},
{
"type": "npm-audit",
"message": "postcss: PostCSS has XSS via Unescaped </style> in its CSS Stringify Output",
"severity": "medium"
}
],
"status": "PASSED",
"scannedAt": "2026-05-30T15:17:37.222Z",
"npmAuditRan": true,
"pipAuditRan": true
}layrr is an open-source ai agents skill for AI coding assistants such as Claude Code, Codex CLI, and ChatGPT, built by thetronjohnson. A browser coding agent interface for selecting elements and sending instructions directly to Claude Code. It has 255 GitHub stars.
Yes. layrr passed SkillsLLM's automated security scan — a dependency vulnerability audit plus prompt-injection heuristics — with no high-severity issues. You can read the full report in the Security Report section on this page.
Clone the repository with "git clone https://github.com/thetronjohnson/layrr" and add it to your Claude Code skills directory (see the Installation section above).
layrr is primarily written in TypeScript. It is open-source under thetronjohnson on GitHub, so you can review or fork the full source.
Yes. SkillsLLM lists many other AI Agents skills you can browse and compare side by side. Open the AI Agents category from the badge at the top of this page, or use the Related Skills and comparison links further down to weigh layrr against similar tools.
No comments yet. Be the first to share your thoughts!
AI coding tools are powerful, but you still have to describe where to make the change — which file, which component, which line. Layrr skips all of that. You point at the thing on screen, say what you want, and the code changes.
No context-switching. You stay in the browser, looking at the actual app. No jumping between editor tabs, no grepping for the right file, no copy-pasting selectors into a prompt.
Every edit is a git commit. Each AI change is auto-committed with a [layrr] prefix. Preview how the app looked at any past edit, or revert to a previous version in one click. You always have a clean undo path.
Works with any framework. React, Next.js, Vue, Nuxt, Svelte, SvelteKit, Solid, Astro, Vite — Layrr maps clicked elements back to source files across all of them.
Go to layrr.dev and sign up. You can:
You click an element Layrr figures out AI edits the
in the browser → the source file + line → actual code
↓
You see it instantly ← Dev server hot reloads ← Saved & committed
Click any element on the page to select it. Type what you want to change. The AI reads the source file, makes targeted edits, and your dev server hot-reloads the result instantly.
Multi-select — Shift+click to select multiple elements and apply one instruction to all of them.
History — Open the history panel to preview how the app looked at any past edit, or permanently revert to a previous version.
Publish — Push your changes to a GitHub branch when you're ready. Share a live preview link with anyone, protected by a password you set.
Layrr also ships as an open-source CLI you can run against any local dev server.
npx layrr --port 3000
See the CLI docs for setup and options.
MIT — Built by Kiran Johns