frontend-patterns

Reusable components use functional patterns in React (composition, render props, HOCs) and Composition API patterns in Vue. Both frameworks support extracting logic into custom hooks and composables, reducing duplication across projects and enabling consistent component architecture.

State management patterns differ by framework: Redux and Zustand for React, Pinia for Vue. This Skill covers implementation patterns for each, helping you choose and configure centralized stores that reduce prop drilling and maintain predictable data flow.

Performance optimization uses memoization, lazy loading, and custom hooks to prevent unnecessary re-renders. React offers useMemo and useCallback; Vue's Composition API provides equivalent reactivity controls. Proper patterns significantly reduce bundle size and rendering time.

Jest and Vitest support both frameworks, but testing patterns differ. This Skill provides framework-specific guidance for configuring test environments, writing unit and integration tests, and integrating with build tools like Vite and Webpack for consistent quality.

Yes. TypeScript typings are available for React, Vue, Redux, Zustand, and Pinia. This Skill covers how to configure strong typing across component props, state stores, and hooks to catch errors at development time and improve code reliability.

Frontend fragmentation leads to maintenance debt and slower onboarding. Structured patterns for components, state management, hooks, and build workflows reduce inconsistency, enable code sharing, and establish a repeatable architecture across React, Vue, and TypeScript codebases.