skills.rest
tim-o-private
tim-o-privateOFFICIAL
Explore all skills by this author →
GitHub

frontend-patterns

Enforce React and TypeScript frontend standards for UI patterns, state management, and accessibility.

Updated Apr 28, 2025
Search Tags:#typescript#accessibility#web development#state management#frontend#react#ui patterns
One-click install
npx skills add https://github.com/tim-o-private/llm-agent --skill frontend-patterns-tim-o-private
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-patterns
Source: https://github.com/tim-o-private/llm-agent/tree/main/.claude/skills/frontend-patterns
Command: npx skills add https://github.com/tim-o-private/llm-agent --skill frontend-patterns-tim-o-private

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a standardized set of best practices and architectural patterns for building modern, accessible, and maintainable frontend applications using React and TypeScript.

Core Features & Use Cases

  • Standardized Architecture: Enforces a clear directory structure and component organization.
  • State Management: Guides the use of React Query for server state and Zustand for client state.
  • Form Handling: Promotes the use of react-hook-form with Zod for robust form validation.
  • Accessibility: Ensures adherence to WCAG 2.1 AA standards.
  • Design System: Utilizes semantic color tokens and Radix UI primitives.

Quick Start

Use the frontend-patterns skill to ensure all new React components follow the defined accessibility and state management guidelines.

Frequently Asked Questions about frontend-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What is the best way to manage server state and client state in React and TypeScript applications?▼

The best way to manage state in React and TypeScript is to use React Query for server state and Zustand for client state, ensuring a clear separation of data fetching and local UI state management.

How do I implement accessible React components that meet WCAG 2.1 AA standards?▼

To implement accessible React components meeting WCAG 2.1 AA standards, use Radix UI primitives for accessible design systems and enforce semantic color tokens to maintain proper contrast and structure.

How do I handle form validation in TypeScript with React?▼

Handle form validation in TypeScript React applications by pairing react-hook-form with Zod to enforce robust schema validation, ensuring type safety and preventing invalid data submission.

Does this frontend development approach work with Radix Themes and semantic color tokens?▼

Yes, this frontend development approach works with Radix Themes by enforcing semantic color tokens, ensuring consistent UI styling and accessibility compliance across React and TypeScript applications.

When should I separate server state from client state in React?▼

Separate server state from client state in React when fetching remote data to avoid unnecessary re-renders and stale data, using React Query for caching and Zustand for local UI interactions.

Why use Zod with react-hook-form for React and TypeScript forms?▼

Use Zod with react-hook-form to provide TypeScript-first schema validation, ensuring form inputs are strictly typed and validated before submission, resulting in robust and maintainable forms.

Related Skills

Explore More Software Engineering Skills→
bdarcusbdarcus
1

design-md

Synthesize a semantic DESIGN.md from Stitch project assets.

Community
Advanced
solrac97grsolrac97gr
2

review-a11y

Review React components against WCAG 2.1 Level AA with jest-axe.

Community
Advanced
johnnystefanjohnnystefan

react-19

Enforce React 19 component patterns with React Query, Zustand, and Zod validation.

Community
Intermediate
OpenCovenOpenCoven
20

shadcn-ui-and-radix

Develops React UI components with Radix accessibility and Tailwind themes.

Official
Advanced