← Back to Skills Marketplace
Frontman — Visual Frontend Editing
by
Danni Friedland
· GitHub ↗
· v1.0.0
· MIT-0
116
Downloads
0
Stars
0
Active Installs
1
Versions
Install in OpenClaw
/install frontman-dev
Description
AI-powered visual frontend editing in your browser. Click any element in your running app, describe changes in plain English, and get real source file edits...
README (SKILL.md)
Frontman — Browser-Based Visual Frontend Editing
You are a skill that helps users set up and use Frontman, an open-source AI coding agent that lives in the browser. Frontman hooks into the dev server as middleware and sees the live DOM, component tree, CSS styles, routes, and server logs. Users click any element in their running app, describe what they want changed, and Frontman edits the actual source files with instant hot reload.
When to Activate
Activate when the user wants to:
- Make visual changes to a running web app (spacing, colors, layout, copy)
- Edit frontend components without opening an IDE
- Set up browser-based AI editing for their project
- Fix design system inconsistencies by clicking elements directly
- Let designers or PMs make UI changes without engineering tickets
Setup
Detect the user's framework and install Frontman:
Next.js:
npx @frontman-ai/nextjs install
Astro:
npx astro add @frontman-ai/astro
Vite (React, Vue, Svelte):
npx @frontman-ai/vite install
Start the dev server normally:
npm run dev
Open Frontman in the browser:
- Next.js:
http://localhost:3000/frontman - Astro:
http://localhost:4321/frontman - Vite:
http://localhost:5173/frontman
How It Works
Frontman installs as a framework plugin (one line in the config). It creates a browser-side MCP server that exposes:
- Live DOM tree — the actual rendered page, not source files
- Computed CSS — runtime values, not class names
- Component tree — which component renders which element, with source file locations
- Screenshots — visual context for the AI
- Element selection — click any element to target it
- Console logs and build errors — from the dev server
The AI agent runs server-side (Elixir/Phoenix), queries these browser tools via MCP, generates edits, and writes them to the actual source files. The framework's HMR handles live reloading.
Usage with OpenClaw
Once Frontman is running, you can use the browser tool to interact with it:
- Open the Frontman URL in the browser tool
- Click elements to select them
- Use the chat interface to describe changes
- Changes are written to source files and hot-reloaded
Frontman handles the visual editing loop. OpenClaw handles everything else — shell commands, file management, multi-step workflows.
Key Details
- Open source: Apache 2.0 (client) / AGPL-3.0 (server)
- BYOK: Bring your own API keys (Anthropic, OpenAI, OpenRouter)
- Dev-only: Stripped from production builds automatically
- Real code: Edits actual source files, not CSS overrides
- GitHub: https://github.com/frontman-ai/frontman
- Docs: https://frontman.sh/docs/
Usage Guidance
This skill appears to do what it says (a browser-based visual editor that writes real source files), but there are important safety checks you should do before installing or running it:
- Verify where the AI runs: confirm whether Frontman is fully local/self-hosted in your environment or whether any server or hosted service will receive your DOM, screenshots, console logs, or source-file information. If it is remote, assume your code and UI previews may leave your machine.
- Inspect the packages before running npx: npx fetches and can execute remote code. Review the frontman npm packages and any install scripts, or clone and inspect the repo locally before running installers.
- Use a disposable/dev environment and a separate git branch: run this only on non-production copies of your project and ensure you can revert changes.
- Protect API keys: the docs say BYOK for LLMs — only provide model keys if you understand whether they will be used locally or sent to external endpoints. Prefer local/self-hosted model setup if you need confidentiality.
- Check licensing and server components: server-side parts are AGPL-3.0 — review implications for your project and whether additional server components must be deployed.
- Network monitoring: if you have concerns, run the tool behind a firewall or while monitoring outbound connections to detect unexpected network calls.
If you can confirm the Frontman server is self-hosted locally (so edits and AI inference do not send code to third parties) and you review the npm packages, the skill is reasonably coherent for its purpose. If you cannot confirm those points, treat it as higher risk and avoid running npx install commands against sensitive codebases.
Capability Analysis
Type: OpenClaw Skill
Name: frontman-dev
Version: 1.0.0
The skill bundle provides instructions for setting up 'Frontman', a visual frontend editing tool. It utilizes standard development workflows, such as framework-specific CLI commands (e.g., npx @frontman-ai/nextjs install) and requires shell and browser access which are consistent with its stated purpose of modifying source code and interacting with live web applications. No evidence of data exfiltration, malicious execution, or prompt injection was found in SKILL.md or _meta.json.
Capability Assessment
Purpose & Capability
Name/description (visual frontend editing) align with the instructions: the SKILL.md tells the agent how to add Frontman plugins (npx/astro/vite), start the dev server, open the local Frontman UI, and use it to edit source files. Required binaries (node, npx/yarn/pnpm) are appropriate for this purpose.
Instruction Scope
The instructions require opening a running dev server and exposing the live DOM, computed CSS, screenshots, console logs, component-to-file mappings, and then writing edits to actual source files. The SKILL.md does not clearly state whether the 'AI agent runs server-side (Elixir/Phoenix)' is self-hosted locally or handled by a remote service; that ambiguity creates a potential data-exfiltration risk because the tool will surface screenshots, logs, and source-file locations. The skill's runtime guidance also implies the agent can perform shell/file operations (via OpenClaw), which is expected but worth noting.
Install Mechanism
This is an instruction-only skill (no install spec). However, it instructs the user/agent to run npx commands to install packages into the project. npx fetches and executes code from npm (remote code run at install time). That is expected for this kind of plugin, but it is a higher-risk action than purely local scripted changes — verify the package source and audit package scripts before running.
Credentials
The skill declares no required env vars, which is reasonable. But the README mentions 'BYOK' for LLM providers and says the AI runs server-side; SKILL.md does not require or document how API keys are provided, nor whether those LLM calls (and any code/DOM/screenshots) are routed to third-party servers. Absence of explicit credential handling combined with ambiguous execution location makes it unclear whether sensitive project data or keys would be transmitted off-host. Also, the skill will cause writes to project source files — users should ensure they run this only in safe/dev environments.
Persistence & Privilege
always is false and the skill is user-invocable only. There is no install script or persistent components declared by the skill itself. The expected behavior (modifying project files via Frontman plugins) is scoped to the project and development workflow.
How to Use
- Make sure OpenClaw is installed (local or Docker)
- Run the install command in chat:
/install frontman-dev - After installation, invoke the skill by name or use
/frontman-dev - Provide required inputs per the skill's parameter spec and get structured output
Version History
v1.0.0
Initial release of frontman-dev — AI-powered visual frontend editing in your browser.
- Click on any element in your running Next.js, Astro, or Vite app and describe UI changes in plain English.
- Instantly applies real source file edits with hot reload; no IDE needed.
- Accessible setup instructions for major frameworks.
- Allows designers/PMs to make UI changes directly from the browser.
- Fully open-source, dev-only, and supports your own API keys.
Metadata
Frequently Asked Questions
What is Frontman — Visual Frontend Editing?
AI-powered visual frontend editing in your browser. Click any element in your running app, describe changes in plain English, and get real source file edits... It is an AI Agent Skill for Claude Code / OpenClaw, with 116 downloads so far.
How do I install Frontman — Visual Frontend Editing?
Run "/install frontman-dev" in the OpenClaw or Claude Code chat to install it in one step — no extra setup required.
Is Frontman — Visual Frontend Editing free?
Yes, Frontman — Visual Frontend Editing is completely free, licensed under MIT-0. You can download, install and use it at no cost.
Which platforms does Frontman — Visual Frontend Editing support?
Frontman — Visual Frontend Editing is cross-platform and runs anywhere OpenClaw / Claude Code is available (cross-platform).
Who created Frontman — Visual Frontend Editing?
It is built and maintained by Danni Friedland (@bluehotdog); the current version is v1.0.0.
More Skills