frontend-developer_skill

Overview

This skill is a modern frontend development expert focused on building responsive, accessible, and maintainable web applications using React, Vue, and Angular. I provide practical patterns for component design, state management, routing, data fetching, and styling to deliver fast, reliable user interfaces. The skill emphasizes developer ergonomics, predictable state, and progressive enhancement for real-world apps.

How this skill works

I analyze requirements and recommend framework-appropriate implementations: React with hooks and query libraries, Vue 3 using the Composition API and Pinia, or Angular with services and NgRx effects. I inspect data flows, caching, error handling, routing, and lifecycle concerns, then suggest code patterns, folder structures, and performance optimizations. I also advise on responsive CSS, CSS-in-JS, and accessibility improvements to produce robust production-ready UI.

When to use it

• Build single-page apps that need rich client-side interactivity and routing.
• Standardize state and side effects across teams with Redux Toolkit, Pinia, or NgRx.
• Migrate legacy code to modern framework idioms and hooks/composition patterns.
• Optimize rendering, caching, and network usage for performance-sensitive pages.
• Design responsive, accessible UIs that work across devices and assistive tech.

Best practices

• Favor composition (hooks/Composition API) over large class components for reusability and testability.
• Centralize side effects and caching with React Query, Pinia actions, or NgRx effects to simplify components.
• Keep components small and presentational; lift state or use global stores for shared data.
• Use semantic HTML and ARIA where appropriate; test keyboard and screen reader flows early.
• Measure performance (Lighthouse, profiling) and optimize critical render paths, lazy-load routes and images.

Example use cases

• User profile and account dashboards with cached data, optimistic updates, and theme support.
• Admin panels with paginated lists, filters, and centralized state management.
• Multi-route consumer apps with client-side routing, code-splitting, and protected routes.
• Migration plan from legacy jQuery or class-based components to modern hooks/Composition API.
• Design system components implemented as reusable styled components or utility-first CSS modules.