How does it help with web performance?

The skill identifies bottlenecks using Chrome DevTools integration and implements advanced strategies like code splitting, lazy loading, and Core Web Vitals optimization.

Can it generate UI components?

Yes, it leverages the Magic MCP to generate modern, production-ready UI components based on industry-standard patterns from 21st.dev.

Is accessibility included in the development process?

Absolutely. The UI/UX Engineer persona ensures all implementations follow WCAG guidelines and accessibility best practices for inclusive user experiences.

Does this skill support specific frameworks?

Yes, it provides expert guidance for all major modern frameworks including React, Vue, and Angular, with a strong emphasis on TypeScript and scalable architecture.

Frontend Web Development Expert

Name: Frontend Web Development Expert
Author: dy9759

bydy9759

•

设计工具

Orchestrates advanced frontend architecture, UI/UX implementation, and performance optimization for modern web applications.

关于

This comprehensive expert system transforms frontend development into a systematic engineering discipline by integrating specialized personas for architecture, design, performance, and testing. It guides developers through the entire lifecycle of a web project—from selecting the optimal tech stack and designing scalable component systems to implementing accessible UI/UX and optimizing Core Web Vitals using tools like Playwright and Chrome DevTools. Whether you are building a React application from scratch or refactoring an enterprise dashboard, this skill provides the domain-specific patterns and automated workflows needed for production-grade results.

主要功能

Automated testing strategies using Playwright and browser automation
Scalable frontend architecture and framework selection
Performance optimization and Core Web Vitals improvement
1 GitHub stars
Accessible UI/UX implementation with modern design systems
Comprehensive engineering setup including CI/CD and modern build tools

使用场景

Establishing a standardized design system and reusable component library
Refactoring existing web apps for better performance, accessibility, and SEO
Architecting a new production-ready React, Vue, or Angular application

关于

主要功能

Automated testing strategies using Playwright and browser automation
Scalable frontend architecture and framework selection
Performance optimization and Core Web Vitals improvement
1 GitHub stars
Accessible UI/UX implementation with modern design systems
Comprehensive engineering setup including CI/CD and modern build tools

使用场景

Establishing a standardized design system and reusable component library
Refactoring existing web apps for better performance, accessibility, and SEO
Architecting a new production-ready React, Vue, or Angular application