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

•

Design Tools

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.

Key Features

01Automated testing strategies using Playwright and browser automation

02Scalable frontend architecture and framework selection

03Performance optimization and Core Web Vitals improvement

041 GitHub stars

05Accessible UI/UX implementation with modern design systems

06Comprehensive engineering setup including CI/CD and modern build tools

Use Cases

01Establishing a standardized design system and reusable component library

02Refactoring existing web apps for better performance, accessibility, and SEO

03Architecting a new production-ready React, Vue, or Angular application

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add dy9759/text2knowledgecards core-skills

For use in Claude.ai and ChatGPT

Download Skill