frontend-engineer
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.
Profile →npx skills add nanocoai/nanoclaw --skill frontend-engineer --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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 inte
- Core Rule
- Build Workflow
- 1. Understand Before Coding
- 2. Write Quality Code
- 3. Build Before Deploying
- 4. Visual Verification (MANDATORY)
- 5. Deploy
- 6. Production Verification
- Iteration Protocol
- Anti-Patterns — Never Do These
- Reporting
pnpm run build 2>&1 pnpm run dev & sleep 3 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 vercel deploy --yes --prod --token placeholder --cwd /path/to/project
What does the frontend-engineer skill do?
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.
How do I install it?
Run `npx skills add nanocoai/nanoclaw --skill frontend-engineer --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From nanocoai/nanoclaw, a repository with 30,426 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.