How does this skill help with web accessibility?

It provides strict patterns for semantic HTML, keyboard navigation, focus management, and ARIA attributes to ensure your applications meet accessibility standards.

Does this skill support the latest version of React?

Yes, it includes specialized guidance for React 19, including new hooks like useActionState, useOptimistic, and Server Components.

Which state management libraries are recommended?

The skill suggests a 'local state first' approach, using TanStack Query for server state and Zustand or Jotai for global concerns, while minimizing Redux usage.

Does it provide styling and CSS recommendations?

Absolutely. It covers modern CSS architecture, including Design Tokens, Container Queries, the Popover API, and the View Transitions API for performant animations.

Can this skill help optimize my application's performance?

Yes, it includes best practices for bundle size reduction, tree-shaking, code-splitting at route boundaries, and optimizing Core Web Vitals (LCP, INP, CLS).

Frontend Development Best Practices

Name: Frontend Development Best Practices
Author: Chogos

byChogos

0•

デザインツール

Develops production-grade web applications using modern React patterns, TypeScript strictness, and performant CSS architecture.

This skill serves as a comprehensive guide for building, refactoring, and reviewing modern frontend applications. It provides deep expertise in React 19 features, advanced state management strategies (Zustand, TanStack Query), and performance optimization for Core Web Vitals. Designed to ensure high accessibility (a11y) and maintainable CSS, it helps developers implement sophisticated UI patterns like the View Transitions API and Container Queries while maintaining strict TypeScript standards for robust, scalable codebases.

主な機能

01Modern React 19 implementation including Server Components and Actions

02Accessible UI development following WAI-ARIA and semantic HTML standards

03Performance optimization strategies for bundle size and Core Web Vitals

04Advanced CSS architecture using Design Tokens and modern layout APIs

05Comprehensive state management patterns for local, server, and global state

060 GitHub stars

ユースケース

01Scaffolding scalable React components with strict TypeScript type-safety

02Refactoring state management from legacy patterns to modern libraries like Zustand

03Optimizing application performance and accessibility for production readiness

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add chogos/claude-skills developing-frontend-apps

For use in Claude.ai and ChatGPT

主な機能

01Modern React 19 implementation including Server Components and Actions

02Accessible UI development following WAI-ARIA and semantic HTML standards

03Performance optimization strategies for bundle size and Core Web Vitals

04Advanced CSS architecture using Design Tokens and modern layout APIs

05Comprehensive state management patterns for local, server, and global state

060 GitHub stars

ユースケース

01Scaffolding scalable React components with strict TypeScript type-safety

02Refactoring state management from legacy patterns to modern libraries like Zustand

03Optimizing application performance and accessibility for production readiness

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add chogos/claude-skills developing-frontend-apps

For use in Claude.ai and ChatGPT