Skip to content
Get packs

Frontend Engineer Workflow

Makes the agent build, test, and visually check web pages in a real browser before calling them done.

Source Download skill
Repository
nanocoai/nanoclaw
Stars
31,072
Licence
MIT
Files
1 file

What it does

This skill gives the agent a strict checklist for building websites and web apps. Before saying a job is finished, the agent must run a build, start a local dev server, open the page in a browser, take screenshots at desktop and tablet sizes, check for console errors and layout overflow, and then optionally deploy to Vercel and check the live site. It also sets coding standards such as TypeScript types, semantic HTML, mobile-first CSS, and accessibility contrast.

Great for

  • Developers who want an AI agent to produce web pages that are checked rather than just written
  • Teams with an existing React, Next.js, or Tailwind codebase who want consistent components and styling
  • Non-experts building a simple landing page who want the agent to verify it visually

Skip it if

  • Quick throwaway edits where the full build, screenshot and deploy cycle is unnecessary overhead
  • Projects that are not web frontends (the rules are React/Next.js and HTML/CSS specific)
  • Anyone expecting the skill to make deployments safe: it includes a deploy command with a placeholder token value, which will fail or need correcting, and deploying to production runs real changes on a live site

Try asking

  • “Build a responsive landing page for my bakery in Next.js and check it on desktop and tablet before you deploy”
  • “Review this React project's components and fix any console errors, then take screenshots to prove it works”
  • “Add a contact form to my existing site, follow the design tokens, and verify it submits correctly”
Step-by-step guide: how to use Frontend Engineer WorkflowInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 1 original files, the MIT licence and an attribution note.

    frontend-engineer.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip frontend-engineer.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip frontend-engineer.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Point the agent at a real project folder so it can read package.json and existing components before writing new code
  • Replace the placeholder Vercel token with your own secret stored in an environment variable, and ask for a preview deploy before production
  • Ask for a short list of known limitations if the agent cannot fix a visual issue after a few iterations

What's inside

  • SKILL.md

Redistributed unmodified from nanocoai/nanoclaw under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.