skills.rest
benswift
benswiftCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-web-engineer

Develops accessible, responsive HTML/CSS/JavaScript interfaces with Playwright-based testing.

26|7|Updated Jun 9, 2012
Search Tags:#testing#html#frontend#javascript#css#playwright#web-development
One-click install
npx skills add https://github.com/benswift/.dotfiles --skill frontend-web-engineer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-web-engineer
Source: https://github.com/benswift/.dotfiles/tree/main/claude/skills/frontend-web-engineer
Command: npx skills add https://github.com/benswift/.dotfiles --skill frontend-web-engineer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Expert frontend web development that balances modern frameworks with pragmatic vanilla solutions, delivering accessible, maintainable UI implementations.

Core Features & Use Cases

  • HTML/CSS/JavaScript implementation with semantic structure and accessibility in mind.
  • Responsive design using CSS Grid and Flexbox for fluid layouts.
  • Playwright-based testing strategy focusing on user journeys and visual regression.

Quick Start

Provide a minimal frontend scaffold and testing plan for a new web interface.

Frequently Asked Questions about frontend-web-engineer

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

FAQPage Schema
How do I build responsive web UIs with vanilla JavaScript and CSS Grid?▼

Build responsive web UIs using semantic HTML, CSS Grid, Flexbox, and ES6+ JavaScript. This approach ensures accessible, maintainable frontend interfaces with fluid layouts that adapt across devices without heavy framework dependencies.

What is the best way to test frontend user journeys and visual regressions?▼

Test frontend user journeys and visual regressions using Playwright. This strategy focuses on real user interactions and visual output validation, ensuring robust web interfaces maintain functional and visual integrity across changes.

Do I need a modern framework to develop accessible and maintainable frontend interfaces?▼

You do not need a modern framework to develop accessible and maintainable frontend interfaces. Pragmatic vanilla solutions using semantic HTML and ES6+ JavaScript balance modern frameworks for robust, production-grade web development.

Can I use Playwright for testing strategies in production-grade web workflows?▼

Yes, you can use Playwright for testing strategies in production-grade web workflows. It enables testing strategies focused on user journeys and visual regression, validating clean HTML semantics and JavaScript implementations.

How do I set up a minimal frontend scaffold and testing plan for a new web interface?▼

Set up a minimal frontend scaffold by defining semantic HTML structure, CSS Grid layouts, and ES6+ JavaScript. Accompany this with a Playwright testing plan targeting user journeys to establish a robust web interface.

When should I choose vanilla web development over modern frontend frameworks?▼

Choose vanilla web development over modern frameworks when projects require pragmatic, accessible solutions with minimal dependencies. Using semantic HTML, CSS Grid, and JavaScript ensures maintainable UI implementations without framework overhead.

Related Skills

Explore More Software Engineering Skills→
huahai2022huahai2022

setup

Install dependencies and configure the conda environment for ExecuTorch development.

Community
Intermediate
namninhndnamninhnd

webapp-testing

Automate web application testing with Playwright across end-to-end, integration, and component tests.

Community
Intermediate
retrip-airetrip-ai
2

base-ui-design

Standardize React UI components with Base UI design guidelines.

Official
Basic
rodmena-limitedrodmena-limited
3

moai-domain-frontend

Guide React, Next.js, and Vue frontend development with best practices.

Official
Advanced