Is security included in the code generation?

Absolutely. It follows security-first practices including input sanitization, secure token handling, and implementation of Content Security Policies (CSP).

Does this skill handle automated testing?

The Senior Frontend Engineer focuses on writing 'testable code' through isolation and pure functions, though actual test execution is typically handled by a complementary QA agent.

Can it improve my site's Core Web Vitals?

Yes, it applies advanced techniques like lazy loading, image optimization (srcset), and minimizing render-blocking resources to improve LCP, FID, and CLS scores.

How does it handle web accessibility?

It implements WCAG 2.2+ standards as a default, ensuring semantic HTML, proper ARIA roles, keyboard navigation support, and high color contrast ratios.

What frameworks does this skill support?

This skill specifically focuses on modern frontend environments, specializing in React, TypeScript, and CSS frameworks to deliver production-grade code.

Senior Frontend Engineer

Name: Senior Frontend Engineer
Author: codewithpassion

bycodewithpassion

0•

Design Tools

Builds production-ready, accessible, and high-performance React and TypeScript frontend applications from design specifications.

The Senior Frontend Engineer skill empowers Claude to function as a systematic lead developer capable of transforming complex UI/UX designs into scalable, client-side code. It specializes in modern performance optimization like Core Web Vitals, adheres to strict accessibility standards (WCAG 2.2+), and implements security-first patterns to prevent vulnerabilities like XSS. By bridging the gap between design systems and functional implementation, it ensures consistent, testable, and mobile-responsive frontend architectures that meet high industry standards.

Key Features

01Core Web Vitals optimization including LCP, FID, and CLS improvements

02Security-first development patterns to prevent XSS, CSRF, and data leaks

03WCAG 2.2+ accessibility compliance with ARIA and keyboard navigation

040 GitHub stars

05Systematic API integration and robust client-side state management

06Advanced React and TypeScript component implementation using SOLID principles

Use Cases

01Optimizing application performance through code splitting, lazy loading, and memoization

02Refactoring legacy frontend codebases into type-safe, modular TypeScript architectures

03Translating design system specifications and Figma tokens into reusable UI components

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add codewithpassion/cwp-claude-marketplace senior-frontend-engineer

For use in Claude.ai and ChatGPT

Download Skill