Add Frontman middleware/plugin to dev server config.
Start local dev server.
Open browser preview and sign in with Frontman.
Connect Claude, ChatGPT, or OpenRouter API key.
Select a rendered element and ask for a visual code change.
Auth And Keys
Hosted Frontman accounts use GitHub or Google OAuth. AI provider access is bring-your-own-key. Read https://frontman.sh/docs/api-keys/ before connecting provider credentials.
Safety
Frontman is designed for development workflows. It creates source edits that should be reviewed with normal git and pull-request process before production deployment.
1---2name: frontman-installation3description: Frontman Installation4---5# Frontman Installation67Use this skill when helping a developer install Frontman in a web project.89## Supported Integrations1011- Next.js: https://frontman.sh/docs/integrations/nextjs/12- Astro: https://frontman.sh/docs/integrations/astro/13- Vite: https://frontman.sh/docs/integrations/vite/14- WordPress beta: https://frontman.sh/docs/integrations/wordpress/1516## Quickstart Flow17181. Open https://frontman.sh/docs/installation/.192. Pick framework integration.203. Add Frontman middleware/plugin to dev server config.214. Start local dev server.225. Open browser preview and sign in with Frontman.236. Connect Claude, ChatGPT, or OpenRouter API key.247. Select a rendered element and ask for a visual code change.2526## Auth And Keys2728Hosted Frontman accounts use GitHub or Google OAuth. AI provider access is bring-your-own-key. Read https://frontman.sh/docs/api-keys/ before connecting provider credentials.2930## Safety3132Frontman is designed for development workflows. It creates source edits that should be reviewed with normal git and pull-request process before production deployment.
Run npx skillmds@latest add frontman-ai/frontman-installation in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
Frontman Installation It is listed under Marketing & Growth on SkillMD.
This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
frontman-ai (@frontman-ai) published this skill. Their other Agent Skills are listed on their SkillMD profile.
frontman-ai