Senior Frontend

Senior Frontend development automation and integration for expert-level UI work

Category: productivity Source: alirezarezvani/claude-skills

Senior Frontend is a community skill for advanced frontend engineering practices, covering component architecture, state management, performance optimization, accessibility compliance, and build tooling for production web applications.

What Is This?

Overview

Senior Frontend provides guidance on building maintainable and performant web applications at scale. It covers component architecture that organizes UI code into reusable, composable building blocks with clear interfaces, state management that handles application data flow using appropriate patterns for each complexity level, performance optimization that reduces bundle sizes, eliminates render bottlenecks, and improves core web vitals, accessibility compliance that ensures applications meet WCAG standards for all users, and build tooling that configures bundlers and development environments for efficient workflows. The skill helps engineers build scalable frontends.

Who Should Use This

This skill serves frontend engineers building production applications, technical leads establishing frontend architecture patterns, and developers optimizing web application performance.

Why Use It?

Problems It Solves

Component libraries without clear architecture become tangled and difficult to maintain as applications grow. State management chosen without considering application complexity leads to either over-engineering or data flow bugs. Performance problems accumulate silently until users experience slow page loads. Accessibility issues exclude users with disabilities and create legal compliance risks.

Core Highlights

Component architect structures UI code into composable building blocks. State designer selects appropriate data flow patterns for each feature. Performance optimizer reduces bundle size and render time. Accessibility auditor validates WCAG compliance across components.

How to Use It?

Basic Usage

// Component architecture
import React, {
  useState,
  useCallback,
  memo
} from 'react';

interface ListProps<T> {
  items: T[];
  renderItem: (
    item: T
  ) => React.ReactNode;
  onSelect?: (
    item: T
  ) => void;
}

function VirtualList<T>({
  items,
  renderItem,
  onSelect
}: ListProps<T>) {
  const [visible,
    setVisible] =
    useState({
      start: 0,
      end: 20
    });

  const handleScroll =
    useCallback((
      e: React.UIEvent
    ) => {
      const el =
        e.currentTarget;
      const idx = Math.floor(
        el.scrollTop / 40);
      setVisible({
        start: idx,
        end: idx + 20
      });
    }, []);

  const slice =
    items.slice(
      visible.start,
      visible.end);

  return (
    <div
      onScroll={
        handleScroll}
      style={{
        height: 400,
        overflow: 'auto'
      }}
      role="listbox"
      aria-label="Items"
    >
      <div style={{
        height:
          items.length * 40
      }}>
        {slice.map(
          (item, i) => (
            <div
              key={i}
              role="option"
              onClick={() =>
                onSelect?.(
                  item)}
            >
              {renderItem(
                item)}
            </div>
        ))}
      </div>
    </div>
  );
}

export default memo(
  VirtualList
) as typeof
  VirtualList;

Real-World Examples

// Performance monitoring
class PerfMonitor {
  private metrics: Map<
    string, number[]
  > = new Map();

  measureRender(
    name: string
  ): () => void {
    const start =
      performance.now();
    return () => {
      const duration =
        performance.now()
        - start;
      const arr =
        this.metrics.get(
          name) || [];
      arr.push(duration);
      this.metrics.set(
        name, arr);
    };
  }

  getStats(
    name: string
  ): {
    avg: number;
    p95: number;
    count: number;
  } | null {
    const arr =
      this.metrics
        .get(name);
    if (!arr?.length)
      return null;
    const sorted =
      [...arr].sort(
        (a, b) => a - b);
    const avg =
      arr.reduce(
        (s, v) => s + v,
        0) / arr.length;
    const p95Idx =
      Math.floor(
        arr.length * 0.95);
    return {
      avg,
      p95: sorted[
        p95Idx],
      count: arr.length
    };
  }

  report(): void {
    this.metrics.forEach(
      (_, name) => {
        const stats =
          this.getStats(
            name);
        if (stats) {
          console.log(
            `${name}: ` +
            `avg=${stats.avg` +
            `.toFixed(1)}ms ` +
            `p95=${stats.p95` +
            `.toFixed(1)}ms`);
        }
      });
  }
}

const monitor =
  new PerfMonitor();
const end =
  monitor.measureRender(
    'UserList');
// render completes
end();
monitor.report();

Advanced Tips

Use code splitting with dynamic imports to load features on demand and reduce initial bundle size. Implement render-time budgets that alert when component renders exceed thresholds. Design component APIs with composition patterns rather than prop drilling for flexible reuse.

When to Use It?

Use Cases

Architect a component library with consistent prop interfaces and composition patterns. Optimize a React application with profiling to identify and fix unnecessary re-renders. Implement keyboard navigation and screen reader support across all interactive components.

Important Notes

Requirements

Modern frontend framework such as React, Vue, or Svelte for component-based development. TypeScript for type safety in larger applications. Browser developer tools for performance profiling and accessibility auditing.

Usage Recommendations

Do: define clear component interfaces with TypeScript types for maintainable prop contracts. Profile before optimizing to target actual performance bottlenecks with measurement data. Test accessibility with screen readers and keyboard navigation.

Don't: add memoization everywhere since unnecessary memo calls add overhead without performance benefit. Build custom state management when framework-provided solutions handle the use case. Skip accessibility testing since automated tools only catch a fraction of usability issues.

Limitations

Frontend best practices evolve rapidly as frameworks and browser capabilities change. Performance optimization techniques that help in one framework may not apply in others. Component architecture decisions made early can be costly to refactor in large applications.