New: 97,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Frontend Engineer Workflow

by nanocoai in nanocoai/nanoclaw

Sets a build, test and verify routine for web projects: write typed, accessible code and never call work done until it is checked in a real browser with screenshots.

MITAuto-check passedFrontend & Design

Install Frontend Engineer Workflow

skills CLI
$ npx skills add nanocoai/nanoclaw --skill frontend-engineer -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install nanocoai/nanoclaw frontend-engineer --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/nanocoai/nanoclaw.git skills-src && mkdir -p .claude/skills && cp -r skills-src/container/skills/frontend-engineer .claude/skills/frontend-engineer && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
frontend-engineer
GitHub stars
31k
Token cost
~1.5k tokens
SKILL.md length
731 words
Files
1
Skills in repo
59
Repo updated
First seen
Licence
MIT

At a glance

Sets a build, test and verify routine for web projects: write typed, accessible code and never call work done until it is checked in a real browser with screenshots.

  • Works in 6 steps: Understand Before Coding → Write Quality Code → Build Before Deploying → …
  • Building a new website or web app that must be tested and responsive
  • SKILL.md covers Core Rule, Build Workflow, Iteration Protocol and Anti-Patterns — Never Do These, plus 1 more section
  • Calls pnpm and vercel

What it does

The agent acts as a senior frontend engineer whose core rule is that nothing is done until it has been checked visually in a real browser, with screenshots as proof. Each task starts by reading existing patterns, components and design tokens, or choosing a tool for a new project, such as Next.js for full apps, Vite for single-page apps or plain HTML and CSS for simple pages, and by searching the codebase before creating any new component.

The code rules cover TypeScript with explicit prop and return types and few `any` values, React and Next.js App Router habits such as Server Components by default, no components defined inside components, `Suspense` fallbacks, dynamic imports and `Promise.all` for independent calls, direct imports instead of barrel files, semantic HTML with alt text and a single `h1`, and mobile-first CSS. It pairs with a deployment skill such as `vercel-cli` when one is installed.

When your agent uses it

  • Building a new website or web app that must be tested and responsive
  • Changing an existing frontend without duplicating components
  • Checking a finished page visually before reporting it done
  • Reviewing React or Next.js code for performance and accessibility habits

Example prompts

  • “Build a landing page for our bakery in plain HTML and CSS and screenshot it on a phone-sized viewport.”
  • “Add a pricing table to the Next.js site, reusing existing components where possible.”
  • “Review this React page for components defined inside other components and missing alt text.”

Requirements

  • A browser the agent can drive to take screenshots

Workflow steps

6 steps, taken from the step headings in SKILL.md.

  1. Understand Before Coding
  2. Write Quality Code
  3. Build Before Deploying
  4. Visual Verification (MANDATORY)
  5. Deploy
  6. Production Verification

What it can do on your machine

Read from SKILL.md and the folder at commit 66f0823. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • pnpm
    • vercel

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use pnpm and vercel, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Frontend Engineer Workflow loads about 1.5k tokens when it runs. Until then it costs about 76 tokens; SKILL.md has 731 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~76
When it runs · the whole SKILL.md, loaded when a task matches
~1.5k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from nanocoai/nanoclaw at commit 66f0823, republished under its MIT licence (© nanocoai). 731 words, ~1,505 tokens.

Download SKILL.mdSave it as .claude/skills/frontend-engineer/SKILL.md (or your agent's skills folder).
name
frontend-engineer
description
Pro frontend engineering discipline. Enforces build-test-verify workflow for every web project. Never declare done until the site is built, tested, responsive, accessible, and visually verified in a real browser. Pairs with a deployment skill such as vercel-cli, where one is installed.

Frontend Engineer

You are a senior frontend engineer. You build production-quality websites and web applications. You do not cut corners. You do not declare work done until everything is tested and working.

Core Rule

Never say "done" until you have visually verified the result in a real browser. Screenshots are your proof. If you can't take a screenshot, you're not done.

Build Workflow

Every frontend task follows this sequence. Do not skip steps.

1. Understand Before Coding
  • For existing projects: read package.json, check existing patterns, components, and design tokens before changing anything
  • For new projects: pick the right tool (Next.js for full apps, Vite for SPAs, plain HTML/CSS for simple pages)
  • Search the codebase before creating any new component. If an existing component does 80% of what you need, extend it with props. If two components share the same pattern, extract a shared component.
2. Write Quality Code

TypeScript:

  • Use TypeScript for all code
  • Avoid any — prefer unknown with type guards. If any is genuinely the simplest correct approach (e.g. third-party lib interop), use it sparingly
  • Annotate return types; explicit interfaces for all props and API responses

React / Next.js (when using App Router):

  • Server Components by default — minimize use client, useEffect, setState
  • Never define components inside other components (causes remounts, lost focus, broken state)
  • Use Suspense with fallback for client components
  • Dynamic import for non-critical components: const Heavy = dynamic(() => import('./Heavy'))
  • Wrap only small leaf components with use client, not entire page trees
  • Use Promise.all() for independent async operations — never create waterfalls

Imports / Bundle Size:

  • Import directly from source files, never from barrel/index files (saves 200-800ms per import)
  • Use optimizePackageImports in next.config for icon/UI libraries (lucide-react, @mui/material, etc.)
  • Defer third-party scripts; lazy load below-the-fold content

HTML:

  • Semantic tags: <header>, <nav>, <main>, <section>, <footer> — not div soup
  • Every <img> gets an alt attribute; use Next.js Image component for optimization
  • One <h1> per page, then <h2>, <h3> in order
  • Every page gets <title> and <meta name="description">

CSS / Styling:

  • Mobile-first responsive design by default
  • Use design system tokens or Tailwind classes when a design system exists. For standalone projects, establish consistent values early and reuse them
  • Prefer the design scale over arbitrary values — but if the design genuinely calls for a specific value, use it
  • Consistent spacing across similar elements (don't mix p-3, p-4, p-5 on the same content type)
  • Smooth transitions on interactive elements (200-300ms, use transform/opacity for GPU acceleration)
  • Aim for 4.5:1 contrast ratio for text (WCAG AA)

Consistency:

  • Similar pages must follow the same layout pattern
  • Loading states are consistent everywhere (don't mix spinners, skeletons, and shimmer)
  • Error states follow one pattern across the app
  • Empty states look the same everywhere
Show full SKILL.md (291 more words)Show less
3. Build Before Deploying

Run the build and fix ALL errors:

bash
pnpm run build 2>&1

If it fails, fix it. Do not deploy broken builds. Do not disable ESLint rules or TypeScript checks to make it pass.

4. Visual Verification (MANDATORY)

Start the dev server and test in a real browser:

bash
pnpm run dev &
DEV_PID=$!
sleep 3

Then use agent-browser to verify:

bash
# Desktop (1280px)
agent-browser open http://localhost:3000
agent-browser screenshot desktop.png

# Tablet (768px)
agent-browser eval "window.resizeTo(768, 1024)"
agent-browser screenshot tablet.png

Always verify:

  • Page loads without errors
  • Console has no errors: agent-browser eval "JSON.stringify(window.__errors || [])"
  • No horizontal scrollbars or layout overflow

Verify when relevant to the change:

  • Text is readable — correct fonts, sizes, contrast
  • Images load (no broken icons)
  • Links and navigation work
  • Tablet view (~768px) doesn't break (if touching layout)
  • Interactive elements have hover/focus states (if adding them)
  • Forms submit correctly (if applicable)
5. Deploy

Only after all checks pass:

bash
vercel deploy --yes --prod --token placeholder --cwd /path/to/project
6. Production Verification

After first deploy or major changes, verify the LIVE URL:

bash
agent-browser open <deployed-url>
agent-browser screenshot production.png

If anything looks broken compared to local, fix it and redeploy.

Iteration Protocol

If something doesn't look right:

  1. Identify the specific issue from the screenshot
  2. Fix the code
  3. Rebuild and re-test
  4. Take a new screenshot
  5. Compare — repeat until it looks professional

Keep iterating until it looks professional. If after 3 iterations the same issue persists, report it as a known limitation and move on.

Anti-Patterns — Never Do These

  • Building a component from scratch when a similar one exists in the codebase
  • Using different spacing across the same content type
  • Leaving console.log in production code
  • Importing entire libraries for one function (e.g., all of lodash for debounce)
  • Suppressing warnings or disabling lint rules to make builds pass
  • Defining components inside other components

Reporting

When reporting results, always include:

  • What you built (tech stack, pages, features)
  • The live URL (if deployed)
  • Screenshots of the final result (desktop minimum)
  • Any known limitations or follow-up needed

© nanocoai, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in container/skills/frontend-engineer of nanocoai/nanoclaw.

Open the folder on GitHubat commit 66f0823

Compare with similar skills

Frontend Engineer Workflow next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Frontend Engineer Workflow compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Frontend Engineer Workflow this skillnanocoai/nanoclaw31k—~1.5kAutomated safety check: PassMIT
Frontend Design UltimateaAAaqwq/AGI-Super-Team1052 repos~2.7kAutomated safety check: PassMIT
Senior Frontendborghei/Claude-Skills874—~1.7kAutomated safety check: PassMIT
React Best Practicesryokun6/ryos1.3k—~2kAutomated safety check: PassMIT
NEAR dApp Builderinternet-court/internet-court-skill6.4k1 repos~684Automated safety check: PassCustom licence
Senior Frontendalirezarezvani/claude-skills28k5 repos~3.9kAutomated safety check: PassMIT

Similar skills

  • Frontend Design Ultimate

    aAAaqwq/AGI-Super-Team

    Create distinctive, production-grade static sites with React, Tailwind CSS, and shadcn/ui — no mockups needed.

    105 GitHub starsUsed in 2 repos~2.7k tokens
    Frontend & DesignAuto-check passed

  • Senior Frontend

    borghei/Claude-Skills

    Frontend development for React, Next.js, TypeScript, and Tailwind CSS.

    874 GitHub stars~1.7k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • React Best Practices

    ryokun6/ryos

    React performance optimization guidelines from Vercel Engineering (vercel-labs/agent-skills).

    1.3k GitHub stars~2k tokensUpdated today
    Frontend & DesignAuto-check passed

  • NEAR dApp Builder

    internet-court/internet-court-skill

    Scaffolds new NEAR dApps with create-near-app or adds NEAR wallet sign-in, contract calls and transaction signing to an existing React or plain JavaScript app.

    6.4k GitHub starsUsed in 1 repo~684 tokens
    Frontend & DesignAuto-check passed

  • Senior Frontend

    alirezarezvani/claude-skills

    Frontend development skill for React, Next.js, TypeScript, and Tailwind CSS applications.

    28k GitHub starsUsed in 5 repos~3.9k tokens
    Frontend & DesignAuto-check passed

  • Next.js Developer

    Jeffallan/claude-skills

    Builds Next.js 14+ apps on the App Router with server components, server actions, explicit caching, SEO metadata, loading and error boundaries and Vercel deployment.

    12k GitHub stars~1.4k tokensUpdated 4 days ago
    Frontend & DesignAuto-check passed

More from nanocoai/nanoclaw

All 59 skills in this repo

  • Iron Proxy Gateway for NanoClaw

    nanocoai/nanoclaw

    Installs or refreshes Iron Proxy and its Iron Control web console for NanoClaw, with a local Docker setup, database, credentials and a human approval bridge.

    31k GitHub stars~4.6k tokensUpdated yesterday
    Auto-check: notes

  • Agent Browser

    nanocoai/nanoclaw

    Drives a web browser from the shell with the agent-browser CLI: open pages, read an element snapshot, click and fill by reference, grab text and screenshots.

    31k GitHub starsUsed in 3 repos~1.6k tokens
    Auto-check passed

  • NanoClaw OneCLI Gateway Installer

    nanocoai/nanoclaw

    Installs or refreshes OneCLI as the gateway provider for NanoClaw, copying the adapter files, registering the provider and running the setup script.

    31k GitHub stars~1.1k tokensUpdated yesterday
    Auto-check: notes

  • OpenClaw to NanoClaw Migration

    nanocoai/nanoclaw

    Guides a conversational migration from an OpenClaw install to NanoClaw v2, carrying over identity, channel credentials, scheduled tasks and workspace files.

    31k GitHub stars~6k tokensUpdated yesterday
    Auto-check: notes

  • Add A Second Dial Phone Number

    nanocoai/nanoclaw

    Wires up an additional phone number onto an already-installed Dial channel, so one NanoClaw install answers SMS and AI voice calls on more than one line.

    31k GitHub starsUsed in 1 repo~1.5k tokens
    Auto-check passed

  • NanoClaw LLM Wiki Setup

    nanocoai/nanoclaw

    Adds a persistent wiki knowledge base to a NanoClaw group following Karpathy's LLM Wiki pattern, with folders, a tailored container skill and a CLAUDE.md section.

    31k GitHub starsUsed in 1 repo~1.3k tokens
    Auto-check passed

Works with

Categories

Questions about Frontend Engineer Workflow

What does Frontend Engineer Workflow do?

Sets a build, test and verify routine for web projects: write typed, accessible code and never call work done until it is checked in a real browser with screenshots. The agent acts as a senior frontend engineer whose core rule is that nothing is done until it has been checked visually in a real browser, with screenshots as proof.js for full apps, Vite for single-page apps or plain HTML and CSS for simple pages, and by searching the codebase before creating any new component.

When should I use Frontend Engineer Workflow?

Frontend Engineer Workflow fits situations like: building a new website or web app that must be tested and responsive; changing an existing frontend without duplicating components; checking a finished page visually before reporting it done; reviewing React or Next.js code for performance and accessibility habits.

How do I install Frontend Engineer Workflow in Claude Code?

Run `npx skills add nanocoai/nanoclaw --skill frontend-engineer -a claude-code`. Or copy the skill folder (container/skills/frontend-engineer in nanocoai/nanoclaw) into .claude/skills/frontend-engineer in your project. Claude Code loads it when a task matches its description.

How do I install Frontend Engineer Workflow in Codex?

Run `npx skills add nanocoai/nanoclaw --skill frontend-engineer -a codex`. Or copy the skill folder (container/skills/frontend-engineer in nanocoai/nanoclaw) into .agents/skills/frontend-engineer in your project. Codex loads it when a task matches its description.

Can I use Frontend Engineer Workflow in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add nanocoai/nanoclaw --skill frontend-engineer -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/frontend-engineer, .gemini/skills/frontend-engineer, .github/skills/frontend-engineer and .opencode/skills/frontend-engineer in your project.

What does Frontend Engineer Workflow need to run?

Going by SKILL.md and its folder, Frontend Engineer Workflow needs the command-line tools its instructions call (pnpm and vercel). Our summary lists: A browser the agent can drive to take screenshots.

Does Frontend Engineer Workflow access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Frontend Engineer Workflow safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Frontend Engineer Workflow use?

Frontend Engineer Workflow is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Frontend Engineer Workflow use?

About 1.5k tokens (SKILL.md is roughly 6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Frontend Engineer Workflow?

Skills that share tags, products or a category with Frontend Engineer Workflow: Frontend Design Ultimate (aAAaqwq/AGI-Super-Team, 105 stars), Senior Frontend (borghei/Claude-Skills, 874 stars), React Best Practices (ryokun6/ryos, 1.3k stars) and NEAR dApp Builder (internet-court/internet-court-skill, 6.4k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Frontend Engineer Workflow?

nanocoai (a GitHub organization) maintains it in nanocoai/nanoclaw, which has 30,883 GitHub stars. The repository holds 59 skills in this directory. The repository was last updated on October 6, 2026.

Source: nanocoai/nanoclaw on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.