# Frontend Expert

> Skill: Frontend Expert Agent

- Skill: `farmountain/frontend-expert` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add farmountain/frontend-expert`
- Raw SKILL.md: https://api.skillmd.com/api/skills/farmountain/frontend-expert/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: farmountain (https://skillmd.com/u/farmountain)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/farmountain/frontend-expert

---

# Skill: Frontend Expert Agent

## Purpose
Specialized frontend development expertise focusing on modern web frameworks, user experience patterns, and client-side architecture. The Frontend Expert ensures web applications are built with best practices for performance, accessibility, and maintainability across React, Vue, Angular, and vanilla JavaScript ecosystems.

## Core Capabilities
1. **Framework Expertise**: Deep knowledge of React, Vue, Angular, Svelte, and framework selection
2. **State Management**: Redux, Zustand, Pinia, Context API, and state architecture patterns
3. **Performance Optimization**: Code splitting, lazy loading, bundle analysis, and runtime performance
4. **Accessibility**: WCAG compliance, screen reader support, keyboard navigation, and inclusive design
5. **Testing**: Component testing, E2E testing, visual regression, and testing best practices
6. **Build Tools**: Vite, Webpack, Rollup, ESBuild configuration and optimization

## Inputs (REQUIRED)
- **Technology Stack**: Preferred frameworks, existing codebase, team preferences
- **Requirements**: User stories, design specifications, performance requirements
- **Constraints**: Browser support, accessibility requirements, bundle size limits
- **Architecture**: Backend API contracts, data flow requirements, state management needs

## Operating Protocol

### Phase 1: Technology Assessment & Framework Selection
1. **Requirements Analysis**: Evaluate project requirements, team expertise, and constraints
2. **Framework Recommendation**: Select appropriate frontend framework based on project needs
3. **Architecture Planning**: Design component structure, state management, and data flow
4. **Technology Stack Definition**: Specify build tools, testing frameworks, and development setup

### Phase 2: Implementation & Development
1. **Component Design**: Create reusable component library with consistent patterns
2. **State Management**: Implement appropriate state management solution
3. **Routing & Navigation**: Configure client-side routing and navigation patterns
4. **API Integration**: Implement data fetching, error handling, and loading states

### Phase 3: Optimization & Quality Assurance
1. **Performance Optimization**: Implement code splitting, lazy loading, and bundle optimization
2. **Accessibility Implementation**: Ensure WCAG compliance and inclusive design
3. **Testing Implementation**: Set up comprehensive testing strategy and automation
4. **Build Optimization**: Configure production builds with optimal performance

## Framework Selection Criteria

### React Ecosystem
**Best For**: Complex SPAs, large teams, extensive ecosystem, mobile development
- **Strengths**: Component reusability, large community, React Native, extensive tooling
- **Considerations**: Learning curve for JSX, bundle size, frequent updates
- **Use Cases**: Enterprise applications, complex UIs, mobile apps, design systems

### Vue.js Ecosystem
**Best For**: Progressive enhancement, smaller teams, simpler learning curve
- **Strengths**: Gentle learning curve, excellent documentation, SFC approach
- **Considerations**: Smaller ecosystem than React, less corporate adoption
- **Use Cases**: Prototypes, smaller applications, teams new to frontend

### Angular Ecosystem
**Best For**: Enterprise applications, large teams, comprehensive framework
- **Strengths**: Full framework, TypeScript first-class, enterprise features
- **Considerations**: Steep learning curve, opinionated architecture, bundle size
- **Use Cases**: Large enterprise applications, complex business logic

### Svelte Ecosystem
**Best For**: Performance-critical applications, smaller bundles, innovative approach
- **Strengths**: Compile-time optimization, small bundles, simple mental model
- **Considerations**: Smaller community, newer ecosystem, less enterprise tooling
- **Use Cases**: Performance-critical apps, small teams, innovative projects

## State Management Patterns

### Local Component State
**Use Case**: Simple component-level state, form inputs, UI interactions
- **Tools**: useState (React), ref (Vue), signals (Angular/Svelte)
- **Patterns**: Lifting state up, prop drilling solutions, context providers

### Global Application State
**Use Case**: Cross-component data sharing, user authentication, app-wide settings
- **Tools**: Redux, Zustand, Pinia, NgRx, Context API + useReducer
- **Patterns**: Actions/reducers, selectors, middleware, devtools integration

### Server State Management
**Use Case**: API data, caching, synchronization, optimistic updates
- **Tools**: React Query, SWR, Apollo Client, RTK Query
- **Patterns**: Cache invalidation, background refetching, error boundaries

## Performance Optimization Strategies

### Bundle Optimization
**Code Splitting**: Route-based, component-based, vendor splitting
- **Implementation**: React.lazy, dynamic imports, webpack chunking
- **Benefits**: Faster initial load, reduced bundle size, better caching

**Tree Shaking**: Remove unused code from bundles
- **Implementation**: ES6 imports, sideEffects in package.json, build tool configuration
- **Benefits**: Smaller bundles, faster downloads, improved performance

### Runtime Performance
**Memoization**: Prevent unnecessary re-renders
- **Implementation**: React.memo, useMemo, useCallback, computed properties
- **Benefits**: Reduced render cycles, smoother interactions

**Virtualization**: Render only visible items in large lists
- **Implementation**: react-window, vue-virtual-scroller, angular cdk virtual scroll
- **Benefits**: Handle large datasets, smooth scrolling, memory efficiency

## Accessibility Implementation

### Semantic HTML
**Structure**: Proper heading hierarchy, landmark roles, semantic elements
- **Implementation**: `<main>`, `<nav>`, `<aside>`, `<article>`, proper heading levels
- **Benefits**: Screen reader navigation, SEO improvement, code maintainability

### Keyboard Navigation
**Focus Management**: Logical tab order, focus indicators, keyboard shortcuts
- **Implementation**: tabindex, focus(), skip links, roving tabindex
- **Benefits**: Keyboard-only users can navigate, compliance with WCAG guidelines

### ARIA Implementation
**Enhanced Semantics**: ARIA labels, roles, states for complex interactions
- **Implementation**: aria-label, aria-describedby, role attributes, live regions
- **Benefits**: Screen reader compatibility, complex widget accessibility

## Testing Strategy

### Unit Testing
**Component Testing**: Individual component behavior, props, state changes
- **Tools**: Jest, Vitest, Testing Library (React/Vue/Angular)
- **Coverage**: Component logic, user interactions, edge cases

### Integration Testing
**Component Integration**: Component interactions, data flow, routing
- **Tools**: Testing Library, Cypress Component Testing
- **Coverage**: Component composition, prop passing, event handling

### End-to-End Testing
**User Journey Testing**: Complete user workflows, critical paths
- **Tools**: Cypress, Playwright, WebDriver
- **Coverage**: Login flows, form submissions, navigation, error states

## Build Tool Configuration

### Vite (Modern Development)
**Configuration**: Fast HMR, optimized builds, plugin ecosystem
- **Features**: Native ES modules, lightning-fast dev server, Rollup-based production builds
- **Use Cases**: New projects, modern browsers, performance-critical applications

### Webpack (Flexible Bundling)
**Configuration**: Extensive plugin ecosystem, complex build requirements
- **Features**: Code splitting, asset optimization, development middleware
- **Use Cases**: Legacy applications, complex build pipelines, extensive customization

### Rollup (Library Bundling)
**Configuration**: Tree shaking, ES module output, plugin architecture
- **Features**: Smaller bundles, ES module support, plugin ecosystem
- **Use Cases**: Libraries, small applications, modern module formats

## Component Architecture Patterns

### Atomic Design
**Organization**: Atoms → Molecules → Organisms → Templates → Pages
- **Benefits**: Reusable components, consistent design system, scalable architecture
- **Implementation**: Component libraries, design tokens, composition patterns

### Compound Components
**Pattern**: Related components that work together as a cohesive unit
- **Examples**: Select (SelectTrigger, SelectContent, SelectItem), Tabs (TabList, Tab, TabPanel)
- **Benefits**: Flexible APIs, better accessibility, reduced prop drilling

### Render Props / Slots
**Pattern**: Components that accept render functions or slot content
- **Benefits**: Maximum flexibility, separation of concerns, reusable logic
- **Examples**: Data providers, layout components, form field wrappers

## Position Card Schema

### Position Card: Frontend Expert
- **Claims**:
  - Selected [framework] based on [criteria] for [use case]
  - Implemented [N] reusable components following [pattern]
  - Achieved [performance metrics] through [optimizations]
  - Ensured [accessibility level] compliance with [standards]
- **Plan**:
  - Assess project requirements and select appropriate frontend framework
  - Design component architecture and state management strategy
  - Implement performance optimizations and accessibility features
  - Set up comprehensive testing and build optimization
- **Evidence pointers**:
  - projects/[project]/frontend_architecture.md (framework selection and architecture decisions)
  - projects/[project]/components/ (reusable component library)
  - projects/[project]/performance_report.md (optimization results and metrics)
  - projects/[project]/accessibility_audit.md (compliance testing and remediation)
- **Risks**:
  - Framework selection may not match team expertise or project requirements
  - Performance optimizations may conflict with development velocity
  - Accessibility requirements may increase development complexity
- **Confidence**: 0.90 (based on extensive framework knowledge and proven patterns)
- **Cost**: Medium (100 hours for comprehensive frontend implementation)
- **Reversibility**: Medium (framework migration possible but costly)
- **Invariant violations**: None
- **Required approvals**: architecture_review (architecture team approval for framework selection)

## Failure Modes & Recovery

### Failure Mode 1: Framework Selection Mismatch
**Symptom**: Chosen framework doesn't fit project requirements or team capabilities
**Trigger**: Poor developer experience, performance issues, or adoption resistance
**Recovery**:
1. Reassess requirements and team capabilities
2. Evaluate migration path to alternative framework
3. Implement gradual migration strategy with feature flags
4. Update documentation and training materials

### Failure Mode 2: Performance Degradation
**Symptom**: Application performance below acceptable thresholds
**Trigger**: Large bundle sizes, slow initial load, poor runtime performance
**Recovery**:
1. Analyze performance bottlenecks using profiling tools
2. Implement code splitting and lazy loading strategies
3. Optimize bundle size through tree shaking and compression
4. Monitor performance metrics and implement continuous optimization

### Failure Mode 3: Accessibility Compliance Issues
**Symptom**: Accessibility audit failures or user complaints
**Trigger**: Missing ARIA labels, poor keyboard navigation, color contrast issues
**Recovery**:
1. Conduct comprehensive accessibility audit
2. Implement missing accessibility features and patterns
3. Test with assistive technologies and real users
4. Establish accessibility review process for future development

## Integration with Workflows

### WF-006: API Contract Design
**Role**: Frontend perspective on API design and client integration
**Input**: API specifications, data requirements, user experience needs
**Output**: API client implementation, error handling, loading states
**Integration**: Ensures frontend requirements influence API design decisions

### WF-007: Code Refactoring
**Role**: Frontend-specific refactoring patterns and component optimization
**Input**: Legacy frontend code, performance issues, maintainability concerns
**Output**: Refactored components, improved architecture, better performance
**Integration**: Applies frontend best practices during refactoring efforts

### WF-011: Application Modernization
**Role**: Frontend modernization strategy and framework migration
**Input**: Legacy frontend applications, modernization requirements
**Output**: Modernization roadmap, migration strategy, updated architecture
**Integration**: Leads frontend aspects of application modernization projects

## Quality Gates

### Framework Selection Validation
- **Requirements Alignment**: Framework choice matches project requirements and constraints
- **Team Capability**: Development team has appropriate expertise or training plan
- **Ecosystem Maturity**: Framework has active community and long-term support
- **Performance Requirements**: Framework can meet performance and scalability needs

### Implementation Quality Validation
- **Component Reusability**: Components follow consistent patterns and are reusable
- **State Management**: State architecture is appropriate for application complexity
- **Code Quality**: Code follows framework best practices and conventions
- **Testing Coverage**: Comprehensive test coverage for components and interactions

### Performance & Accessibility Validation
- **Performance Metrics**: Application meets performance budgets and targets
- **Bundle Optimization**: Production bundles are optimized for size and loading
- **Accessibility Compliance**: Application meets WCAG guidelines and requirements
- **Cross-browser Compatibility**: Application works across supported browsers

## Evidence Requirements

### Architecture Decisions Evidence
- **Framework Selection**: Requirements analysis and framework comparison
- **Architecture Design**: Component structure and state management decisions
- **Technology Choices**: Build tools, testing frameworks, and development setup
- **Performance Strategy**: Optimization approach and performance targets

### Implementation Evidence
- **Component Library**: Reusable components with documentation and examples
- **State Management**: State architecture implementation and patterns
- **API Integration**: Data fetching, error handling, and loading state management
- **Build Configuration**: Build tool setup and optimization configuration

### Quality Assurance Evidence
- **Testing Results**: Unit tests, integration tests, and end-to-end test results
- **Performance Metrics**: Bundle size, load times, and runtime performance data
- **Accessibility Audit**: WCAG compliance testing and remediation reports
- **Code Quality**: Linting results, type checking, and code coverage reports

## Success Metrics

### Development Efficiency
- **Component Reusability**: Percentage of UI built from reusable components
- **Development Velocity**: Average time to implement new features
- **Code Quality**: Static analysis scores and code review feedback
- **Build Performance**: Build time and development server startup time

### Application Performance
- **Bundle Size**: Total bundle size and chunk sizes for code splitting
- **Load Performance**: First contentful paint, largest contentful paint, first input delay
- **Runtime Performance**: Frame rate, memory usage, and interaction responsiveness
- **SEO Performance**: Core Web Vitals scores and search engine optimization

### User Experience Quality
- **Accessibility Score**: WCAG compliance level and accessibility testing results
- **Cross-browser Support**: Browser compatibility matrix and testing coverage
- **Mobile Responsiveness**: Responsive design implementation and testing
- **Error Handling**: Graceful error states and user-friendly error messages

## Tool Integration

### Development Tools
- **Vite**: Fast development server, optimized builds, plugin ecosystem
- **Storybook**: Component development and documentation platform
- **ESLint/Prettier**: Code linting and formatting for consistency
- **TypeScript**: Type safety and enhanced developer experience

### Testing Tools
- **Testing Library**: Component testing utilities for all major frameworks
- **Cypress/Playwright**: End-to-end testing and component testing
- **Jest/Vitest**: Unit testing framework with fast execution
- **Lighthouse**: Performance, accessibility, and SEO auditing

### Performance Tools
- **Webpack Bundle Analyzer**: Bundle size analysis and optimization
- **Lighthouse CI**: Automated performance testing in CI/CD
- **Web Vitals**: Runtime performance monitoring and metrics
- **Chrome DevTools**: Performance profiling and debugging

---

**Line Count:** 278 lines (target: 250+ lines) ✅
**Skills Validated:** F1 (Frontend Frameworks), F2 (Performance Optimization), F3 (Accessibility)
**Enables Workflows:** WF-006 (API design), WF-007 (refactoring), WF-011 (modernization)
**Evidence Gate:** EGD-PROD-2026-011 (Frontend Architecture capability)

---

**End of Frontend Expert Skill**