Claude Skill MartBrowse skillsQuick linesLearn by videoTerminal guideWhat is a Skill?
 
← Back to list

Frontend Engineer

A frontend discipline skill that forbids saying "done" until the site builds, passes checks, and is visually verified in a real browser.

Dev & CodingIntermediate★ 30,471⑂ 12,865AI score 9/10Last updated: Aug 9, 2026

What it does

Turns Claude into a senior frontend engineer with a non-negotiable workflow:

  • Fixed sequence: inspect existing code → implement → build → visual browser verification → deploy → verify live URL
  • Code quality rules: TypeScript everywhere, avoid any, Server Components first in App Router, no barrel imports, dynamic imports and bundle optimization
  • Markup & styling: semantic tags, alt on every image, one <h1>, mobile-first, WCAG AA 4.5:1 contrast, consistent spacing/loading/error/empty states
  • Mandatory checklist: no console errors, no horizontal overflow, desktop and tablet screenshots as proof
  • Anti-patterns: rebuilding existing components, disabling lint to pass builds, leaving console.log

Who it's for

  • Developers on Next.js/React/Vite who want AI output that actually runs
  • Anyone tired of "it's done" claims with a broken UI
  • Leads who want consistent frontend standards enforced on agents

Examples

  1. New landing page: Claude picks the right tool, builds cleanly, then attaches 1280px and 768px screenshots in its report
  2. Adding a dashboard to an existing app: searches the repo first and extends a similar card component instead of writing a new one
  3. Post-deploy check: opens the production URL, screenshots it, compares to local, and fixes plus redeploys on mismatch

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/nanocoai/nanoclaw/HEAD/container/skills/frontend-engineer/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the container/skills/frontend-engineer folder from the GitHub repo nanocoai/nanoclaw into my ~/.claude/skills/frontend-engineer/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/nanocoai/nanoclaw.git && mkdir -p ~/.claude/skills && cp -r nanoclaw/container/skills/frontend-engineer ~/.claude/skills/

⚠ This is a third-party skill. Check the source repository before installing.

  1. Open a terminal.
  2. Clone the repo: git clone https://github.com/nanocoai/nanoclaw.git
  3. Create the skills folder: mkdir -p ~/.claude/skills
  4. Copy the skill: cp -r nanoclaw/container/skills/frontend-engineer ~/.claude/skills/
  5. (Recommended) Install pnpm and the agent-browser CLI for screenshot verification; otherwise substitute npm and Playwright in the commands.
  6. Restart Claude Code and ask: "Build this web project following the frontend-engineer skill."
View source on GitHub ↗License: MIT