skills.rest
Bartunek
BartunekCOMMUNITY
Explore all skills by this author →
Website𝕏@JanBartunekGitHub

frontend-engineer

Enforce build, test, and visual verification workflows for frontend projects.

Updated May 7, 2026
Search Tags:#typescript#testing#performance#accessibility#frontend#react#web
One-click install
npx skills add https://github.com/Bartunek/nanoclaw --skill frontend-engineer-bartunek
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-engineer
Source: https://github.com/Bartunek/nanoclaw/tree/main/container/skills/frontend-engineer
Command: npx skills add https://github.com/Bartunek/nanoclaw --skill frontend-engineer-bartunek

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend teams often ship updates without real-browser validation, leading to visual regressions, accessibility gaps, and performance issues. This skill enforces a build-test-verify workflow that requires visual verification in a real browser before work is considered complete.

Core Features & Use Cases

  • Enforce a complete frontend workflow: build, test, verify in a real browser.
  • Ensure accessibility, responsiveness, and performance checks before release.
  • Provide a clear Quick Start example to get started with the workflow.

Quick Start

Run the frontend engineering workflow on a web project to ensure the site is built, tested, and visually verified in a real browser.

Frequently Asked Questions about frontend-engineer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I enforce a frontend workflow that requires visual verification in a real browser before deployment?▼

A production-grade frontend workflow enforces real-browser visual verification alongside TypeScript usage, semantic HTML, accessibility checks, and performance validation before considering any build or update complete.

How do I ensure accessibility and responsive design are checked before a React or Next.js release?▼

Integrate a frontend workflow that mandates accessibility, responsiveness, and performance checks alongside build and test phases, ensuring semantic HTML and design-system adoption are validated before release.

Does this frontend workflow support both Vite and plain HTML/CSS stacks?▼

Yes, the workflow applies to Next.js, Vite, and plain HTML/CSS stacks, enforcing build, test, accessibility, and performance checks uniformly across existing projects and new work.

Why do I need to verify web performance and visual output in a real browser instead of just running tests?▼

Real-browser verification catches visual regressions, accessibility gaps, and performance issues that automated tests miss, ensuring the frontend meets production-grade standards before release.

What is the best way to manage TypeScript usage and semantic HTML in a production-grade frontend project?▼

Adopt a frontend workflow that enforces TypeScript usage and semantic HTML as core requirements, integrating them into the build, test, and visual verification lifecycle to maintain production-grade quality.

When should I not use an automated build and test workflow for frontend development?▼

Skipping this workflow risks shipping visual regressions and accessibility gaps; it should always be used for frontend updates to guarantee performance, responsiveness, and visual correctness in a real browser.

Related Skills

Explore More Software Engineering Skills→
thmtzthmtz
5

frontend-engineer

Enforce a build-test-verify workflow for Next.js, Vite, and HTML/CSS projects.

Community
Intermediate
timurgaleevtimurgaleev
5

canary

Monitor post-deploy web apps for defects and performance regressions.

Community
Advanced
angrybeaglesangrybeagles

frontend-design

Convert user briefs into accessible frontend code for React, Vue, or HTML/CSS.

Community
Advanced
PrasadTelasulaPrasadTelasula

component-testing

Test React components with React Testing Library and Playwright for frontend correctness.

Community
Intermediate