What types of testing does this skill facilitate?

It provides checklists and requirements for unit tests, integration tests with mocked APIs, E2E user flows, and visual regression testing.

How does it handle state management?

It guides the implementation of clean state management patterns, preventing prop drilling and state duplication while ensuring robust error boundaries.

How does this skill improve web accessibility?

The skill enforces semantic HTML, ARIA labels, keyboard navigation support, and WCAG 2.1 compliance to ensure interfaces are usable by everyone.

Can this skill help with website performance?

Yes, it includes protocols for code splitting, lazy loading, image optimization, and keeping bundle sizes under 500KB to ensure high Lighthouse scores.

Does it support different frontend frameworks?

While framework-agnostic in its principles, the skill is designed to work with any component-based architecture like React, Vue, or Angular.

Frontend Development & UI Engineering

Name: Frontend Development & UI Engineering
Author: G-Hensley

byG-Hensley

•

디자인 도구

Builds accessible, high-performance user interfaces and client-side logic following modern component-based architecture and web standards.

소개

This skill equips Claude with specialized expertise for building production-ready frontend applications. It provides a comprehensive framework for creating responsive UI components, managing complex client-side state, and ensuring WCAG 2.1 accessibility compliance. By integrating performance optimization techniques—such as code splitting and lazy loading—with rigorous testing protocols, it helps developers deliver seamless user experiences while maintaining clean, documented, and reusable codebases.

주요 기능

2 GitHub stars
Component-driven architecture and responsive design implementation
Comprehensive WCAG 2.1 accessibility and focus management
Performance optimization for Lighthouse scores and bundle size
Advanced state management and API integration patterns
Multi-layer testing strategies including unit, E2E, and visual regression

사용 사례

Implementing complex client-side state and error handling for API-driven apps
Optimizing web application performance for faster Time to Interactive
Building a reusable, accessible React or Vue component library

소개

주요 기능

2 GitHub stars
Component-driven architecture and responsive design implementation
Comprehensive WCAG 2.1 accessibility and focus management
Performance optimization for Lighthouse scores and bundle size
Advanced state management and API integration patterns
Multi-layer testing strategies including unit, E2E, and visual regression

사용 사례

Implementing complex client-side state and error handling for API-driven apps
Optimizing web application performance for faster Time to Interactive
Building a reusable, accessible React or Vue component library