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

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>

Data Fetching Patterns

Stale-While-Revalidate

Return cached data immediately, revalidate in background:

const { data } = useQuery({
  queryKey: ['users', userId],
  queryFn: () => fetchUser(userId),
  staleTime: 5 * 60 * 1000, // 5 minutes
});

Optimistic Updates

const mutation = useMutation({
  mutationFn: updateUser,
  onMutate: async (newData) => {
    await queryClient.cancelQueries({ queryKey: ['user', newData.id] });
    const previous = queryClient.getQueryData(['user', newData.id]);
    queryClient.setQueryData(['user', newData.id], newData);
    return { previous };
  },
  onError: (err, newData, context) => {
    queryClient.setQueryData(['user', newData.id], context.previous);
  },
});

CSS Custom Properties

Define design tokens as CSS variables — do not hardcode values:

:root {
  --color-surface: oklch(98% 0 0);
  --color-text: oklch(18% 0 0);
  --color-accent: oklch(68% 0.21 250);

  --text-base: clamp(1rem, 0.92rem + 0.4vw, 1.125rem);
  --space-section: clamp(4rem, 3rem + 5vw, 10rem);

  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

Animation Guidelines

Use compositor-friendly properties only:

✅ transform, opacity, clip-path, filter
❌ width, height, top, left, margin, padding, border, font-size

// Good
const style = { opacity: isVisible ? 1 : 0, transform: `translateY(${isVisible ? 0 : 20}px)` };

// Bad
const style = { height: isVisible ? 'auto' : 0 };

Related Skills

• code-review — Review frontend code for quality
• security-scan — Check for XSS and injection vulnerabilities
• test-coverage — Ensure UI component tests exist