Frontend Patterns

Frontend Patterns automation and integration for modern UI development

Category: productivity Source: affaan-m/everything-claude-code

Frontend Patterns is an AI skill that provides established architectural patterns and implementation strategies for building client-side web applications. It covers component composition, state management, data fetching patterns, rendering strategies, and performance optimization that enable developers to build maintainable and performant frontend systems.

What Is This?

Overview

Frontend Patterns provides structured approaches to solving common client-side architecture challenges. It handles composing reusable components through compound component and render prop patterns, managing application state with context, reducers, and external store libraries, implementing data fetching with loading states, error boundaries, and cache invalidation, choosing rendering strategies between client-side, server-side, and static generation, optimizing bundle size through code splitting and lazy loading, and structuring project files for scalability across growing teams.

Who Should Use This

This skill serves frontend developers establishing application architecture, tech leads defining component patterns for team adoption, full-stack developers building React or Vue applications, and architects planning client-side state management strategies.

Why Use It?

Problems It Solves

Without patterns, components grow into monoliths that mix data fetching, state, and presentation. Prop drilling through many layers creates fragile component trees that break on refactoring. Ad-hoc data fetching leads to duplicate requests and inconsistent loading state handling. Unstructured state management makes it difficult to track where values change.

Core Highlights

Component composition patterns enable reuse without tight coupling between parent and child. State management strategies match complexity to application needs. Data fetching patterns handle loading, error, and cache states consistently. Code splitting reduces initial bundle size by loading features on demand.

How to Use It?

Basic Usage

import React, { createContext, useContext, useState } from "react";

interface TabsContextType {
  activeTab: string;
  setActive: (id: string) => void;
}

const TabsContext = createContext<TabsContextType | null>(null);

function Tabs({ children, defaultTab }: {
  children: React.ReactNode;
  defaultTab: string;
}) {
  const [activeTab, setActive] = useState(defaultTab);
  return (
    <TabsContext.Provider value={{ activeTab, setActive }}>
      <div className="tabs">{children}</div>
    </TabsContext.Provider>
  );
}

function TabButton({ id, children }: {
  id: string; children: React.ReactNode;
}) {
  const ctx = useContext(TabsContext)!;
  return (
    <button
      className={ctx.activeTab === id ? "active" : ""}
      onClick={() => ctx.setActive(id)}
    >{children}</button>
  );
}

function TabPanel({ id, children }: {
  id: string; children: React.ReactNode;
}) {
  const ctx = useContext(TabsContext)!;
  if (ctx.activeTab !== id) return null;
  return <div>{children}</div>;
}

Real-World Examples

import { useState, useEffect, useCallback } from "react";

interface FetchState<T> {
  data: T | null;
  loading: boolean;
  error: string | null;
}

function useFetch<T>(url: string): FetchState<T> & {
  refetch: () => void;
} {
  const [state, setState] = useState<FetchState<T>>({
    data: null, loading: true, error: null
  });

  const fetchData = useCallback(async () => {
    setState(prev => ({ ...prev, loading: true }));
    try {
      const res = await fetch(url);
      if (!res.ok) throw new Error(res.statusText);
      const data = await res.json();
      setState({ data, loading: false, error: null });
    } catch (err) {
      setState({
        data: null, loading: false,
        error: (err as Error).message
      });
    }
  }, [url]);

  useEffect(() => { fetchData(); }, [fetchData]);

  return { ...state, refetch: fetchData };
}

function UserList() {
  const { data, loading, error, refetch } = useFetch<
    { id: string; name: string }[]
  >("/api/users");

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error}</p>;

  return (
    <div>
      <button onClick={refetch}>Refresh</button>
      <ul>
        {data?.map(u => <li key={u.id}>{u.name}</li>)}
      </ul>
    </div>
  );
}

Advanced Tips

Use compound component patterns to expose flexible APIs while keeping internal state encapsulated. Implement data fetching hooks that return loading, error, and refetch alongside data to standardize async handling. Apply code splitting at route boundaries to keep initial bundles small.

When to Use It?

Use Cases

Use Frontend Patterns when designing component APIs that need to support multiple use cases, when establishing data fetching conventions for consistent loading state handling, when choosing state management approaches for different complexity levels, or when optimizing bundle sizes for applications with many routes.

Important Notes

Requirements

Frontend framework supporting component composition such as React or Vue. Understanding of hooks or equivalent reactivity primitives. Build tooling supporting code splitting.

Usage Recommendations

Do: start with simple state management and add complexity only when prop drilling becomes burdensome. Standardize data fetching through shared hooks to ensure consistent loading states. Use TypeScript interfaces for component props to document expected usage.

Don't: reach for global state management before trying component-level state and context. Create deeply nested component hierarchies that make data flow difficult to trace. Apply every pattern simultaneously when simpler approaches would suffice.

Limitations

Pattern overhead may be unnecessary for simple applications with few interactive features. Compound component patterns require consumers to follow specific composition rules. Custom data fetching hooks may duplicate functionality provided by established libraries.