Does this skill help with WCAG compliance?

Yes, it includes a comprehensive accessibility checklist covering semantic HTML, ARIA labels, focus management, and keyboard interaction patterns for all UI components.

What state management strategies are included?

It covers a layered approach including component state, shared state (Zustand/Pinia), server state (TanStack Query), and URL-based state to ensure data consistency.

How does it handle web performance optimization?

It provides specific implementation patterns for memoization, lazy loading, virtual lists, and code splitting, alongside a resource optimization checklist for images and scripts.

Which frontend frameworks does this skill support?

The skill includes specialized patterns for React 18/Next.js, Vue 3/Nuxt 3, Svelte/SvelteKit, and Angular 17+, automatically detecting your tech stack via package.json.

Professional Frontend Development

Name: Professional Frontend Development
Author: xiaobei930

byxiaobei930

•

デザインツール

Implements high-performance, accessible, and framework-agnostic frontend architectures using industry-leading design patterns and best practices.

This skill elevates Claude into a senior frontend architect by providing a structured framework for building modern, production-grade web applications. It automates the selection of best practices for React, Vue, Svelte, and Angular while enforcing a strict component hierarchy and sophisticated state management strategies. Beyond code structure, it focuses heavily on performance optimization for Core Web Vitals, WCAG-compliant accessibility (a11y), and high-end design aesthetics to ensure that AI-generated interfaces feel professional and unique rather than generic.

主な機能

01Deep accessibility integration with ARIA patterns and keyboard interaction standards

02Framework-aware pattern loading for React, Vue, Svelte, and Angular

03Multi-layer state management guidance for local, shared, and server-side state

04Comprehensive performance optimization targeting LCP, FID, and CLS metrics

05Hierarchical component design system architecture (Base, UI, Feature, Page)

0634 GitHub stars

ユースケース

01Implementing complex, accessible forms and interactive UI components with standardized validation

02Refactoring existing web apps to improve Core Web Vitals and performance scores

03Architecting a scalable enterprise UI component library from scratch

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add xiaobei930/cc-best frontend

For use in Claude.ai and ChatGPT

Download Skill