How to Configure Frontend Patterns in ECC: A Complete Guide to React and Next.js Best Practices

Activate the frontend-patterns skill by referencing it in your prompt or using the /skill command, then edit skills/frontend-patterns/SKILL.md to customize the React and Next.js conventions Claude Code applies to your project.

Everything Claude Code (ECC) codifies modern frontend architecture into a reusable frontend-patterns skill. When you configure frontend patterns in ECC, the assistant gains access to idiomatic component compositions, performance optimizations, and accessibility techniques stored in a centralized markdown file. This guide explains how to activate, customize, and extend these patterns for your React and Next.js projects.

How the Frontend-Patterns Skill Works

ECC maintains its frontend best practices in skills/frontend-patterns/SKILL.md. When activated, the system parses this file to extract guidance from sections labeled When to Activate, Component Patterns, Custom Hooks Patterns, Performance Optimization, and Accessibility Patterns. Because the skill is pure documentation, any modifications you make to the markdown file are reflected immediately in Claude Code's suggestions without requiring a rebuild of the repository.

Activating Frontend Patterns

You can enable the skill using two primary methods depending on your workflow preference.

Natural Language Activation

Mention "frontend patterns" directly in your prompt. For example, asking "Create a login form following frontend patterns" causes ECC to load skills/frontend-patterns/SKILL.md and apply its conventions to the generated code.

Command-Based Activation

Explicitly invoke the skill using the /skill command followed by the skill name. This method is ideal when you want ECC to reference the patterns during a code review or refactoring session without restating the context.

Configuring Pattern Categories

The skill organizes knowledge into distinct architectural areas that ECC consults during code generation.

Component Composition

The Component Patterns section defines composable architectures like the Card component with sub-components (CardHeader, CardBody) and render-props patterns. When you request a reusable UI component, ECC injects code that favors composition over inheritance, following the exact structure defined in the skill file.

Custom Hooks and State Management

Located in the Custom Hooks Patterns section, these implementations include useToggle, useQuery, and useDebounce. ECC suggests these hooks instead of ad-hoc state logic, ensuring your code maintains immutability and proper memoization. The section also documents the Context + Reducer pattern for global state management, which ECC will scaffold when detecting shared state requirements.

Performance Optimization

The Performance Optimization section guides ECC to recommend useMemo and useCallback for expensive calculations, React.lazy with Suspense for code splitting, and useVirtualizer for long lists. When ECC identifies a heavy component or list-based UI, it automatically consults this section to implement virtualization or lazy loading.

Accessibility Patterns

The Accessibility Patterns section codifies keyboard navigation handlers, focus management utilities, and ARIA role attributes. During UI reviews, ECC checks generated code against these patterns to ensure compliance with accessibility standards before suggesting implementations.

Practical Implementation Examples

The following examples demonstrate how ECC translates the skill file into production-ready code.

Card Composition Pattern

This example from lines 27-48 of the skill file demonstrates the composition pattern for a reusable Card component:

interface CardProps {
  children: React.ReactNode
  variant?: 'default' | 'outlined'
}

export function Card({ children, variant = 'default' }: CardProps) {
  return <div className={`card card-${variant}`}>{children}</div>
}

// Usage
<Card>
  <CardHeader>Title</CardHeader>
  <CardBody>Content</CardBody>
</Card>

useToggle Hook

Lines 39-51 of the skill file provide this immutable toggle implementation:

export function useToggle(initialValue = false): [boolean, () => void] {
  const [value, setValue] = useState(initialValue)
  const toggle = useCallback(() => setValue(v => !v), [])
  return [value, toggle]
}

// Usage
const [isOpen, toggleOpen] = useToggle()

Lazy-Loaded Components

For heavy components like charts, lines 119-135 recommend code splitting:

import { lazy, Suspense } from 'react'

const HeavyChart = lazy(() => import('./HeavyChart'))

export function Dashboard() {
  return (
    <Suspense fallback={<Spinner />}>
      <HeavyChart />
    </Suspense>
  )
}

Virtualized Long Lists

Lines 144-180 demonstrate list virtualization using @tanstack/react-virtual:

import { useVirtualizer } from '@tanstack/react-virtual'

export function VirtualMarketList({ markets }: { markets: Market[] }) {
  const parentRef = useRef<HTMLDivElement>(null)

  const virtualizer = useVirtualizer({
    count: markets.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 100,
    overscan: 5
  })

  return (
    <div ref={parentRef} style={{ height: '600px', overflow: 'auto' }}>
      <div style={{ height: `${virtualizer.getTotalSize()}px`, position: 'relative' }}>
        {virtualizer.getVirtualItems().map(virtualRow => (
          <div
            key={virtualRow.index}
            style={{
              position: 'absolute',
              top: 0,
              left: 0,
              width: '100%',
              height: `${virtualRow.size}px`,
              transform: `translateY(${virtualRow.start}px)`
            }}
          >
            <MarketCard market={markets[virtualRow.index]} />
          </div>
        ))}
      </div>
    </div>
  )
}

Accessible Dropdown with Keyboard Navigation

Lines 210-236 provide this pattern for keyboard-accessible dropdowns:

export function Dropdown({ options, onSelect }: DropdownProps) {
  const [isOpen, setIsOpen] = useState(false)
  const [activeIndex, setActiveIndex] = useState(0)

  const handleKeyDown = (e: React.KeyboardEvent) => {
    switch (e.key) {
      case 'ArrowDown':
        e.preventDefault()
        setActiveIndex(i => Math.min(i + 1, options.length - 1))
        break
      case 'ArrowUp':
        e.preventDefault()
        setActiveIndex(i => Math.max(i - 1, 0))
        break
      case 'Enter':
        e.preventDefault()
        onSelect(options[activeIndex])
        setIsOpen(false)
        break
      case 'Escape':
        setIsOpen(false)
        break
    }
  }

  return (
    <div role="combobox" aria-expanded={isOpen} onKeyDown={handleKeyDown}>
      {/* …render options… */}
    </div>
  )
}

Customizing Patterns for Your Project

To modify the patterns for project-specific requirements, edit skills/frontend-patterns/SKILL.md directly. Because ECC reads this file at runtime, changes take effect immediately in your next prompt. You can add new custom hooks, update styling conventions, or extend the accessibility section with company-specific ARIA requirements. The skill file is version-controlled, allowing teams to share standardized frontend conventions across projects by committing their customized SKILL.md to the repository.

Localization and Multi-Language Support

ECC ships with translated versions of the frontend-patterns skill to support international teams. Localized files are maintained in the docs/ directory:

• Simplified Chinese: docs/zh-CN/skills/frontend-patterns/SKILL.md
• Japanese: docs/ja-JP/skills/frontend-patterns/SKILL.md
• Traditional Chinese: docs/zh-TW/skills/frontend-patterns/SKILL.md
• Korean: docs/ko-KR/skills/frontend-patterns/SKILL.md
• Turkish: docs/tr/skills/frontend-patterns/SKILL.md

These translations allow non-English speakers to activate the same patterns with localized guidance while maintaining identical technical implementations.

Summary

• Activate the skill by mentioning "frontend patterns" in your prompt or using the /skill command to load skills/frontend-patterns/SKILL.md.
• Leverage built-in categories including Component Patterns, Custom Hooks, Performance Optimization, and Accessibility Patterns for idiomatic React code.
• Customize immediately by editing the markdown file—changes apply without rebuilding the ECC repository.
• Support global teams using localized skill files available in Chinese, Japanese, Korean, and Turkish.

Frequently Asked Questions

How do I activate frontend patterns without typing the full command?

You can simply include the phrase "frontend patterns" anywhere in your natural language prompt. For example, typing "Build a dashboard using frontend patterns" automatically loads the skill and applies its conventions to the generated components.

Can I add custom patterns to the existing skill file?

Yes. Edit skills/frontend-patterns/SKILL.md to add new sections or modify existing ones. Because ECC parses this markdown file at runtime, your custom hooks, components, or accessibility rules become available immediately for subsequent prompts.

Do frontend patterns work with TypeScript and Next.js App Router?

Absolutely. The skill file includes TypeScript interfaces and Next.js-specific patterns such as server/client component boundaries and the App Router's file-based routing conventions. All code examples in the skill use TypeScript by default.

How do I use frontend patterns in a different language?

Request the skill in your preferred language by referencing the localized file path. If ECC detects a non-English locale setting, it will automatically load the corresponding file from docs/*/skills/frontend-patterns/SKILL.md, providing guidance in that language while generating identical React implementations.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}