# Frontend Engineer

Pro frontend engineering discipline.

- Repository: https://github.com/nanocoai/nanoclaw (31069 stars)
- Category: Design
- License: MIT
- Last updated: 2026-10-30
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add nanocoai/nanoclaw --skill frontend-engineer -g -a claude-code -y`
Codex: `npx skills add nanocoai/nanoclaw --skill frontend-engineer -g -a codex -y`
Cursor: `npx skills add nanocoai/nanoclaw --skill frontend-engineer -g -a cursor -y`
Gemini CLI: `npx skills add nanocoai/nanoclaw --skill frontend-engineer -g -a gemini-cli -y`

## 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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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

The rest: https://github.com/nanocoai/nanoclaw/blob/HEAD/container/skills/frontend-engineer/SKILL.md