senior-frontend

Provide expert frontend design guidance for React and Vue applications.

467|103|Updated Jan 13, 2026
One-click install
npx skills add https://github.com/borghei/Claude-Skills --skill senior-frontend-borghei
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: senior-frontend
Source: https://github.com/borghei/Claude-Skills/tree/main/engineering/senior-frontend
Command: npx skills add https://github.com/borghei/Claude-Skills --skill senior-frontend-borghei

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill provides expert frontend development guidance for React and Vue applications, helping teams design scalable component architectures, implement robust state management, optimize performance, and build accessible user interfaces.

Core Features & Use Cases

  • Component architecture: Presentational, Container, and Higher-Order Components patterns with practical examples.
  • State management: Patterns and libraries like Zustand and React Query for predictable, scalable state.
  • Performance optimization: Code-splitting, memoization, virtualization, and efficient rendering strategies.
  • Accessibility: ARIA patterns, keyboard navigation, and accessible components.
  • CSS architecture: Tailwind CSS best practices and CSS Modules.
  • Testing: Component and hook testing strategies to ensure reliability.
  • Design system integration: Theming, tokens, and design guidelines for cohesive UIs.
  • Use cases: Large dashboards, e-commerce storefronts, and responsive enterprise apps.

Quick Start

Design a scalable component architecture for a React and Vue storefront with accessibility and performance targets.

Frequently Asked Questions about senior-frontend

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

FAQPage Schema
How do I design a scalable component architecture for React and Vue storefronts?

Scalable component architecture for React and Vue storefronts is designed using Presentational, Container, and Higher-Order Component patterns. This approach separates UI rendering from data logic to ensure maintainable, large-scale frontend applications.

What's the best way to implement state management in modern frontend apps?

State management in modern frontend apps is best implemented using libraries like Zustand and React Query. These tools provide predictable, scalable state handling, ensuring efficient data fetching and cache management for large dashboards and enterprise applications.

How do I optimize frontend performance using code-splitting and memoization?

Frontend performance optimization is achieved through strategic code-splitting, memoization, and virtualization. These efficient rendering strategies reduce initial load times and prevent unnecessary re-renders in complex, data-heavy user interfaces.

How do I build accessible components with ARIA patterns and keyboard navigation?

Accessible components are built by implementing standard ARIA patterns and full keyboard navigation support. This ensures that React and Vue user interfaces are operable and understandable for users relying on assistive technologies.

Can I use Tailwind CSS best practices alongside CSS Modules for component styling?

Yes, you can use Tailwind CSS best practices alongside CSS Modules for component styling. This CSS architecture approach combines utility-first rapid development with scoped, reusable component-level styling for cohesive design systems.

What component and hook testing strategies ensure frontend reliability?

Component and hook testing strategies ensure frontend reliability by validating UI rendering, user interactions, and state logic. These testing approaches verify that React and Vue components function correctly within real-world project workflows.