Frontend Patterns Skill

Purpose: Apply modern frontend development patterns

---

Overview

This skill provides best practices for building maintainable, performant frontend applications.

---

Component Architecture

Atomic Design

atoms/          → Button, Input, Label
molecules/      → FormField, SearchInput
organisms/      → LoginForm, Header
templates/      → PageLayout, DashboardLayout
pages/          → LoginPage, DashboardPage

Feature-Based Structure

src/
├── features/
│   ├── auth/
│   │   ├── components/
│   │   ├── hooks/
│   │   ├── api/
│   │   └── index.ts
│   └── dashboard/
│       ├── components/
│       ├── hooks/
│       └── index.ts
├── shared/
│   ├── components/
│   ├── hooks/
│   └── utils/
└── App.tsx

---

React Patterns

Custom Hooks

function useLocalStorage<T>(key: string, initialValue: T) {
  const [value, setValue] = useState<T>(() => {
    const stored = localStorage.getItem(key);
    return stored ? JSON.parse(stored) : initialValue;
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue] as const;
}

Compound Components

<Select value={selected} onChange={setSelected}>
  <Select.Trigger>Choose option</Select.Trigger>
  <Select.Options>
    <Select.Option value="a">Option A</Select.Option>
    <Select.Option value="b">Option B</Select.Option>
  </Select.Options>
</Select>

Render Props

<DataFetcher url="/api/users">
  {({ data, loading, error }) =>
    loading ? <Spinner /> : <UserList users={data} />
  }
</DataFetcher>

---

State Management

Solution	Use Case
useState	Local component state
useReducer	Complex local state
Context	Theme, auth, i18n
Zustand	Simple global state
Redux	Complex global state
React Query	Server state

---

Performance

Memoization

// Expensive calculation
const sortedItems = useMemo(
  () => items.sort((a, b) => a.name.localeCompare(b.name)),
  [items],
);

// Callback stability
const handleClick = useCallback(() => {
  onClick(id);
}, [id, onClick]);

// Component memoization
const UserCard = memo(({ user }) => <div>{user.name}</div>);

---

Quick Reference

Pattern	Usage
Custom Hooks	Reusable logic
Compound	Flexible APIs
Render Props	Dynamic rendering
HOC	Cross-cutting concerns
Context	Global state
Memoization	Performance