skills.rest
CZ-X-Ya
CZ-X-YaCOMMUNITY
Explore all skills by this author →
GitHub

frontend-patterns

Translate WPF/MVVM mental models into React component and state design patterns.

Updated May 11, 2026
Search Tags:#state management#react#next.js#performance optimization#wpf#mvvm#custom hooks
One-click install
npx skills add https://github.com/CZ-X-Ya/oh-my-csharp-skills --skill frontend-patterns-cz-x-ya
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-patterns
Source: https://github.com/CZ-X-Ya/oh-my-csharp-skills/tree/main/frontend-patterns
Command: npx skills add https://github.com/CZ-X-Ya/oh-my-csharp-skills --skill frontend-patterns-cz-x-ya

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Translating WPF/MVVM mental models into React concepts so you can design components, state, forms, and performance optimizations without getting stuck on terminology mismatches.

Core Features & Use Cases

  • WPF → React mental model mapping: Connects core ideas like INotifyPropertyChanged, ICommand, bindings, DI/context, and converters to practical React equivalents (state, events, controlled inputs, Context/Zustand, custom hooks, memoization).
  • Reusable UI component patterns: Provides React composition, compound components (Context-based tab systems), and render-prop style data loading that mirror common WPF constructs.
  • Production-oriented frontend guidance: Covers state management patterns (Context + reducer), performance techniques (memoization, virtualization, lazy loading), form validation, error boundaries, accessibility keyboard patterns, and animation integration.

Use case example: You’re a .NET developer building a Next.js/React feature where a WPF ViewModel used INotifyPropertyChanged and commands, and you need an idiomatic React approach for controlled inputs, async loading states, and rendering optimization for long lists.

Quick Start

Ask the AI to generate a React component design plan that maps your specific WPF/MVVM ViewModel (properties, commands, and data bindings) into React state, hooks, component composition, and performance patterns.

Frequently Asked Questions about frontend-patterns

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

FAQPage Schema
How do I translate WPF MVVM patterns like INotifyPropertyChanged to React?▼

React state management for WPF developers maps INotifyPropertyChanged to useState/useReducer hooks, ICommand to event handlers, and DI to Context. This approach translates WPF bindings into controlled React components.

What is the best way to handle React state management coming from a WPF MVVM background?▼

The best way to handle React state management from a WPF MVVM background is using Context and reducers for complex state. This approach mirrors WPF dependency properties and provides centralized state-driven rendering.

How do I migrate WPF ICommand implementations to React custom hooks?▼

Migrate WPF ICommand implementations to React by wrapping logic within custom hooks that expose async functions and loading states. This replaces ICommand execution with idiomatic React data fetching patterns.

Does this approach cover performance optimization for long lists in Next.js?▼

Yes, this approach covers Next.js performance optimization for long lists using virtualization, memoization, and lazy loading. These React patterns prevent unnecessary re-renders when displaying large datasets.

Can I use WPF style converters and dependency injection in React components?▼

Yes, you can use equivalents of WPF converters and dependency injection in React. Map converters to utility functions and WPF DI to React Context or Zustand for state-driven component rendering.

When should I not use Context for state management in React?▼

Avoid using Context for high-frequency state updates in React to prevent unnecessary component re-renders. For complex local interactions, use reducers or specialized state management libraries instead of Context.

Related Skills

Explore More Software Engineering Skills→
managedcodemanagedcode
466

dotnet-mvvm

Implement the MVVM pattern in .NET applications using the MVVM Toolkit.

Official
Intermediate
nktfh100nktfh100
1

react-expert

Analyze React 18/19 projects using Next.js App Router for modern Server/Client Component patterns.

Community
Advanced
gugug168gugug168

frontend-patterns

Optimizes React and Next.js apps for maintainability and runtime performance.

Community
Intermediate
whchiwhchi

frontend-patterns

Apply React component patterns for state management and rendering performance.

Community
Intermediate