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. Use alongside vercel-cli for production-quality deployments.
Best for Production web development…Works with GitHubLow risk
⌘source
- author
@qwibitai- language
- TypeScript
★28kstars
13kforks
Apr 22, 2026
✦overview.md
Key Features
- ·Enforces build-test-verify workflow for every web project
- ·Requires visual verification in a real browser before completion
- ·Promotes code reuse and component extraction
- ·Uses TypeScript with strict typing practices
- ·Integrates with Vercel CLI for deployments
Use Cases
- →Building a new web application from scratch with proper testing
- →Adding features to an existing project while maintaining code quality
- →Refactoring a codebase to reduce duplication and improve maintainability
- →Ensuring a website is responsive and accessible before deployment
Best for
- ✓Production web development teams
- ✓Projects requiring high code quality standards
Not ideal for
- !Quick prototypes or proof-of-concepts
- !Backend or non-web development tasks
FAQs
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. Use alongside vercel-cli for production-quality deployments.
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— preferunknownwith type guards. Ifanyis genuinely the simplest correct approach (e.g. third-party lib interop), use it sparingly
$install
1-click copynpx skills add qwibitai/nanoclaw --skill frontend-engineerSafety assessment
★
Clarity score
How clear and easy to understand the SKILL.md instructions are, rated from 1 to 5.
4/ 5
very goodClear and well structured, with only minor parts that might need a second read.
◎
Actionability score
How directly an agent can act on the SKILL.md instructions, rated from 1 to 5.
3/ 5
mediumPartially actionable with several concrete steps, but still missing important details.