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

•

Herramientas de Diseño

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.

Características Principales

012 GitHub stars

02Component-driven architecture and responsive design implementation

03Comprehensive WCAG 2.1 accessibility and focus management

04Performance optimization for Lighthouse scores and bundle size

05Advanced state management and API integration patterns

06Multi-layer testing strategies including unit, E2E, and visual regression

Casos de Uso

01Implementing complex client-side state and error handling for API-driven apps

02Optimizing web application performance for faster Time to Interactive

03Building a reusable, accessible React or Vue component library

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add g-hensley/bug-hunt-vuln-detection frontend-development

For use in Claude.ai and ChatGPT

Download Skill