What libraries does the Frontend Patterns skill support?

The skill provides patterns for core React features, Zustand for global state, React Query for server state, and React Hook Form with Zod for form validation.

How do I use this skill with Claude Code?

Once installed, Claude will automatically apply these frontend patterns when you ask it to build UI components, manage state, or optimize existing React code.

Can this skill help me build custom hooks?

Absolutely. It provides standardized patterns for extracting reusable logic into custom hooks, such as debouncing, async state handling, and event listeners.

Does this skill help with web accessibility?

Yes, it includes patterns that prioritize accessibility, such as using ARIA roles, managing focus, and ensuring semantic HTML structure for screen readers.

Frontend Patterns & Best Practices

Name: Frontend Patterns & Best Practices
Author: mnthe

bymnthe

•

デザインツール

Implements production-ready React component architectures, state management strategies, and accessibility standards for modern web applications.

The Frontend Patterns skill provides Claude with a comprehensive framework for building high-quality, maintainable user interfaces. It covers advanced React architectures such as compound components and custom hooks, while offering standardized patterns for state management using Context, Zustand, and React Query. By integrating accessibility best practices and robust form validation via React Hook Form and Zod, this skill ensures that frontend code is not only functional but also performant, type-safe, and inclusive for all users.

主な機能

01Async state management and debouncing utilities for optimized UI performance.

022 GitHub stars

03Advanced React component patterns including Compound Components and Custom Hooks.

04Comprehensive state management patterns for local, global, and server-side data.

05Integrated accessibility (a11y) guidelines with ARIA roles and semantic HTML.

06Type-safe form handling and validation patterns using Zod and React Hook Form.

ユースケース

01Setting up scalable global state and server-side caching for enterprise React apps.

02Implementing accessible, validated forms with real-time feedback and error handling.

03Refactoring complex UI logic into reusable, composable compound components.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add mnthe/hardworker-marketplace frontend-patterns

For use in Claude.ai and ChatGPT

Download Skill