Frontend Engineering Expertise
Load this skill when working on frontend web applications, UI components, styling, or browser-based projects.
Frameworks & Libraries
React
- •Advanced hooks patterns, custom hooks, context optimization
- •Server-side rendering with Next.js, hydration strategies
- •Performance: React.memo, useMemo, useCallback, lazy loading with Suspense
- •State management: Redux, Zustand, XState for complex state machines
- •Error boundaries, loading states, optimistic updates
Vue.js
- •Composition API, composables, provide/inject
- •Pinia for state management, Vue Router
- •Server-side rendering with Nuxt.js
- •Advanced component patterns, renderless components
- •Vuetify, Element Plus, PrimeVue component libraries
TypeScript/JavaScript
- •Strict TypeScript with comprehensive interfaces and type guards
- •ES6+ patterns, async/await, module systems
- •Build tools: Vite (preferred), Webpack, esbuild, Rollup
CSS & Styling
- •Tailwind CSS: Utility-first, custom themes, responsive design
- •CSS-in-JS: styled-components, Emotion, vanilla-extract
- •Design Systems: Design tokens, atomic design, component API patterns
- •Responsive: Mobile-first, progressive enhancement, container queries
- •Accessibility: WCAG compliance, screen readers, keyboard navigation, ARIA patterns
Component Architecture
- •Functional components with hooks (React) or Composition API (Vue)
- •Single responsibility per component
- •Prop validation with TypeScript interfaces
- •Reusable, composable components with clear APIs
- •Proper error boundaries and loading states
- •Storybook for component documentation and visual testing
Testing
- •Unit: Jest, Vitest, React Testing Library, Vue Test Utils
- •E2E: Cypress, Playwright
- •Visual: Storybook, Chromatic
- •Strategy: Test behavior not implementation, mock external dependencies only
Performance Optimization
- •Core Web Vitals: LCP, FID/INP, CLS optimization
- •Bundle: Tree shaking, code splitting, dynamic imports
- •Assets: Image compression, WebP/AVIF, lazy loading, srcset
- •Caching: Service workers, HTTP caching, CDN optimization
- •Monitoring: Real user monitoring, Lighthouse CI, Web Vitals reporting
Security
- •XSS Prevention: Sanitize user input, avoid dangerouslySetInnerHTML/v-html
- •CSRF Protection: Proper token handling, SameSite cookies
- •Authentication: Secure token storage (httpOnly cookies over localStorage), refresh flows
- •Dependencies: Regular npm audit, minimal attack surface, SRI for CDN resources
- •CSP: Content Security Policy headers, nonce-based script loading
Architecture Patterns
- •Micro-frontends: Module federation, independent deployments
- •JAMstack: Static site generation, headless CMS integration
- •PWA: Service workers, offline functionality, app manifests
- •SSR/SSG: Next.js, Nuxt.js, Astro for content sites
When to Use This Skill
- •Building or modifying React/Vue components
- •Implementing responsive layouts or design systems
- •Debugging CSS issues or performance problems
- •Setting up frontend testing or build pipelines
- •Reviewing frontend code for accessibility or security