frontend-pattern

Frontend Pattern Skill

Implements maintainable, performant frontend patterns using React and TypeScript.

When to Activate

Activate when:

• Building new UI components
• Setting up state management
• Implementing data fetching
• Adding animations or transitions
• Structuring a new feature module

Component Patterns

Compound Components

Use compound components when related UI shares state and interaction semantics:

<Tabs defaultValue="overview">
  <Tabs.List>
    <Tabs.Trigger value="overview">Overview</Tabs.Trigger>
    <Tabs.Trigger value="settings">Settings</Tabs.Trigger>
  </Tabs.List>
  <Tabs.Content value="overview">...</Tabs.Content>
  <Tabs.Content value="settings">...</Tabs.Content>
</Tabs>

• Parent owns state via useState or context
• Children consume via context — no prop drilling
• Keeps keyboard handling, ARIA, and focus logic in the headless layer

Container / Presentational Split

// Container — owns data loading and side effects
function UserProfileContainer({ userId }: { userId: string }) {
  const { data, isLoading } = useUser(userId);
  if (isLoading) return <Skeleton />;
  return <UserProfileView user={data} />;
}

// Presentational — receives props, renders UI
function UserProfileView({ user }: { user: User }) {
  return (
    <div>
      <Avatar src={user.avatar} />
      <h1>{user.name}</h1>
    </div>
  );
}

State Management

Concern	Tooling
Server state	TanStack Query, SWR, tRPC
Client state	Zustand, Jotai, signals
URL state	search params, route segments
Form state	React Hook Form or equivalent

Do not duplicate server state into client stores. Derive values instead of storing redundant computed state.

URL As State

Persist shareable, bookmarkable state in the URL:

// Good: filters, sort, pagination in URL
const [searchParams, setSearchParams] = useSearchParams();
const filter = searchParams.get('filter') ?? 'all';

// Usage
<button onClick={() => setSearchParams({ filter: 'active' })}>
  Active
</button>