How does it handle performance optimization?

The skill provides patterns for code splitting, memoization (useMemo/useCallback), and specific strategies to meet Core Web Vitals targets like LCP and FID.

Does it provide support for testing?

Yes, it includes standardized unit test templates for React Testing Library, covering user events, error states, and component rendering.

What frameworks are supported by the frontend skill?

The skill supports React, Vue, Angular, and Vanilla JavaScript, with React and TypeScript configured as the default environment.

How does this skill ensure web accessibility?

It enforces WCAG 2.1 Level AA compliance through semantic HTML templates, ARIA labels, keyboard navigation support, and color contrast guidelines.

Frontend Development Master

Name: Frontend Development Master
Author: pluginagentmarketplace

bypluginagentmarketplace

•

Design Tools

Architects responsive, accessible, and high-performance user interfaces using modern web standards and frameworks.

This Claude Code skill empowers AI agents to build production-grade frontend applications with a focus on semantic HTML5, modern CSS layouts like Flexbox and Grid, and advanced JavaScript/TypeScript patterns. It provides domain-specific guidance for React, Vue, and Angular, ensuring that generated code adheres to industry best practices for accessibility (WCAG), performance optimization (Core Web Vitals), and comprehensive unit testing. Whether you are building complex state-managed dashboards or optimizing web performance, this skill provides the patterns and validation rules necessary for modern web excellence.

Key Features

01Comprehensive accessibility (A11y) patterns targeting WCAG 2.1 Level AA compliance.

02Multi-framework support for React, Vue, Angular, and Vanilla JavaScript with TypeScript defaults.

03Performance-centric templates for Core Web Vitals optimization including LCP and CLS targets.

04Strict validation for component naming conventions and React hook patterns.

05Standardized unit testing templates using React Testing Library and user-event simulation.

061 GitHub stars

Use Cases

01Implementing complex application state management and performance-optimized component memoization.

02Refactoring legacy JavaScript into modern ES6+ codebases with robust error handling and async patterns.

03Building responsive, accessible design systems from scratch with CSS Grid and Flexbox.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add pluginagentmarketplace/custom-plugin-nextjs frontend

For use in Claude.ai and ChatGPT

Download Skill