🎯

frontend-patterns

🎯Skill

from worldflowai/everything-claude-code

What it does

Provides reusable React component patterns like composition, compound components, and render props to create flexible and maintainable frontend architectures.

📦

Part of

worldflowai/everything-claude-code(6 items)

frontend-patterns

Installation

Node.jsRun Node.js server

node scripts/setup-package-manager.js --global pnpm

Node.jsRun Node.js server

node scripts/setup-package-manager.js --project bun

Node.jsRun Node.js server

node scripts/setup-package-manager.js --detect

Add MarketplaceAdd marketplace to Claude Code

/plugin marketplace add affaan-m/everything-claude-code

Install PluginInstall plugin from marketplace

/plugin install everything-claude-code@everything-claude-code

+ 2 more commands

ConfigurationMCP configuration (may be incomplete)

{
  "extraKnownMarketplaces": {
    "everything-claude-code": {
      "source": ...

📖 Extracted from docs: worldflowai/everything-claude-code

Need more details? View full documentation on GitHub →

1Installs

AddedFeb 4, 2026

View on GitHub Back to Skills

Skill Details

SKILL.md

Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.

Overview

# Frontend Development Patterns

Modern frontend patterns for React, Next.js, and performant user interfaces.

Component Patterns

Composition Over Inheritance

```typescript

// ✅ GOOD: Component composition

interface CardProps {

children: React.ReactNode

variant?: 'default' | 'outlined'

}

export function Card({ children, variant = 'default' }: CardProps) {

return

card card-${variant}}>{children}

}

export function CardHeader({ children }: { children: React.ReactNode }) {

return

{children}

}

export function CardBody({ children }: { children: React.ReactNode }) {

return

{children}

}

// Usage

Title

Content

```

Compound Components

```typescript

interface TabsContextValue {

activeTab: string

setActiveTab: (tab: string) => void

}

const TabsContext = createContext(undefined)

export function Tabs({ children, defaultTab }: {

children: React.ReactNode

defaultTab: string

}) {

const [activeTab, setActiveTab] = useState(defaultTab)

return (

{children}

)

}

export function TabList({ children }: { children: React.ReactNode }) {

return

{children}

}

export function Tab({ id, children }: { id: string, children: React.ReactNode }) {

const context = useContext(TabsContext)

if (!context) throw new Error('Tab must be used within Tabs')

return (

className={context.activeTab === id ? 'active' : ''}

onClick={() => context.setActiveTab(id)}

{children}

)

}

// Usage

Overview

Details

```

Render Props Pattern

```typescript

interface DataLoaderProps {

url: string

children: (data: T | null, loading: boolean, error: Error | null) => React.ReactNode

}

export function DataLoader({ url, children }: DataLoaderProps) {

const [data, setData] = useState(null)

const [loading, setLoading] = useState(true)

const [error, setError] = useState(null)

useEffect(() => {

fetch(url)

.then(res => res.json())

.then(setData)

.catch(setError)

.finally(() => setLoading(false))

}, [url])

return <>{children(data, loading, error)}

}

// Usage

url="/api/markets">

{(markets, loading, error) => {

if (loading) return

if (error) return

return

}}

```

Custom Hooks Patterns

State Management Hook

```typescript

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()

```

Async Data Fetching Hook

```typescript

interface UseQueryOptions {

onSuccess?: (data: T) => void

onError?: (error: Error) => void

enabled?: boolean

}

export function useQuery(

key: string,

fetcher: () => Promise,

options?: UseQueryOptions

) {

const [data, setData] = useState(null)

const [error, setError] = useState(null)

const [loading, setLoading] = useState(false)

const refetch = useCallback(async () => {

setLoading(true)

setError(null)

try {

const result = await fetcher()

setData(result)

options?.onSuccess?.(result)

} catch (err) {

const error = err as Error

setError(error)

options?.onError?.(error)

} finally {

setLoading(false)

}

}, [fetcher, options])

useEffect(() => {

if (options?.enabled !== false) {

refetch()

}

}, [key, refetch, options?.enabled])

return { data, error, loading, refetch }

}

// Usage

const { data: markets, loading, error, refetch } = useQuery(

'markets',

() => fetch('/api/markets').then(r => r.json()),

{

onSuccess: data => console.log('Fetched', data.length, 'markets'),

onError: err => console.error('Failed:', err)

}

)

```

Debounce Hook

```typescript

export function useDebounce(value: T, delay: number): T {

const [debouncedValue, setDebouncedValue] = useState(value)

useEffect(() => {

const handler = setTimeout(() => {

setDebouncedValue(value)

}, delay)

return () => clearTimeout(handler)

}, [value, delay])

return debouncedValue

}

// Usage

const [searchQuery, setSearchQuery] = useState('')

const debouncedQuery = useDebounce(searchQuery, 500)

useEffect(() => {

if (debouncedQuery) {

performSearch(debouncedQuery)

}

}, [debouncedQuery])

```

State Management Patterns

Context + Reducer Pattern

```typescript

interface State {

markets: Market[]

selectedMarket: Market | null

loading: boolean

}

type Action =

| { type: 'SET_MARKETS'; payload: Market[] }

| { type: 'SELECT_MARKET'; payload: Market }

| { type: 'SET_LOADING'; payload: boolean }

function reducer(state: State, action: Action): State {

switch (action.type) {

case 'SET_MARKETS':

return { ...state, markets: action.payload }

case 'SELECT_MARKET':

return { ...state, selectedMarket: action.payload }

case 'SET_LOADING':

return { ...state, loading: action.payload }

default:

return state

}

const MarketContext = createContext<{

state: State

dispatch: Dispatch

} | undefined>(undefined)

export function MarketProvider({ children }: { children: React.ReactNode }) {

const [state, dispatch] = useReducer(reducer, {

markets: [],

selectedMarket: null,

loading: false

})

return (

{children}

)

}

export function useMarkets() {

const context = useContext(MarketContext)

if (!context) throw new Error('useMarkets must be used within MarketProvider')

return context

}

```

Performance Optimization

Memoization

```typescript

// ✅ useMemo for expensive computations

const sortedMarkets = useMemo(() => {

return markets.sort((a, b) => b.volume - a.volume)

}, [markets])

// ✅ useCallback for functions passed to children

const handleSearch = useCallback((query: string) => {

setSearchQuery(query)

}, [])

// ✅ React.memo for pure components

export const MarketCard = React.memo(({ market }) => {

return (

{market.name}

{market.description}

)

})

```

Code Splitting & Lazy Loading

```typescript

import { lazy, Suspense } from 'react'

// ✅ Lazy load heavy components

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

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

export function Dashboard() {

return (

)

}

```

Virtualization for Long Lists

```typescript

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

export function VirtualMarketList({ markets }: { markets: Market[] }) {

const parentRef = useRef(null)

const virtualizer = useVirtualizer({

getScrollElement: () => parentRef.current,

estimateSize: () => 100, // Estimated row height

overscan: 5 // Extra items to render

})

return (

style={{

height: ${virtualizer.getTotalSize()}px,

position: 'relative'

}}

{virtualizer.getVirtualItems().map(virtualRow => (

key={virtualRow.index}

style={{

position: 'absolute',

top: 0,

left: 0,

width: '100%',

height: ${virtualRow.size}px,

transform: translateY(${virtualRow.start}px)

}}

))}

)

}

```

Form Handling Patterns

Controlled Form with Validation

```typescript

interface FormData {

description: string

endDate: string

}

interface FormErrors {

name?: string

description?: string

endDate?: string

}

export function CreateMarketForm() {

const [formData, setFormData] = useState({

description: '',

endDate: ''

})

const [errors, setErrors] = useState({})

const validate = (): boolean => {

const newErrors: FormErrors = {}

if (!formData.name.trim()) {

newErrors.name = 'Name is required'

} else if (formData.name.length > 200) {

newErrors.name = 'Name must be under 200 characters'

}

if (!formData.description.trim()) {

newErrors.description = 'Description is required'

}

if (!formData.endDate) {

newErrors.endDate = 'End date is required'

}

setErrors(newErrors)

return Object.keys(newErrors).length === 0

}

const handleSubmit = async (e: React.FormEvent) => {

e.preventDefault()

if (!validate()) return

try {

await createMarket(formData)

// Success handling

} catch (error) {

// Error handling

}

return (

)

}

```

Error Boundary Pattern

```typescript

interface ErrorBoundaryState {

hasError: boolean

error: Error | null

}

export class ErrorBoundary extends React.Component<

{ children: React.ReactNode },

ErrorBoundaryState

> {

state: ErrorBoundaryState = {

hasError: false,

error: null

}

static getDerivedStateFromError(error: Error): ErrorBoundaryState {

return { hasError: true, error }

}

componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {

console.error('Error boundary caught:', error, errorInfo)

}

render() {

if (this.state.hasError) {

return (

Something went wrong

{this.state.error?.message}

)

}

return this.props.children

}

// Usage

```

Animation Patterns

Framer Motion Animations

```typescript

import { motion, AnimatePresence } from 'framer-motion'

// ✅ List animations

export function AnimatedMarketList({ markets }: { markets: Market[] }) {

return (

{markets.map(market => (

key={market.id}

initial={{ opacity: 0, y: 20 }}

animate={{ opacity: 1, y: 0 }}

exit={{ opacity: 0, y: -20 }}

transition={{ duration: 0.3 }}

))}

)

}

// ✅ Modal animations

export function Modal({ isOpen, onClose, children }: ModalProps) {

return (

{isOpen && (

className="modal-overlay"

initial={{ opacity: 0 }}

animate={{ opacity: 1 }}

exit={{ opacity: 0 }}

onClick={onClose}

className="modal-content"

initial={{ opacity: 0, scale: 0.9, y: 20 }}

animate={{ opacity: 1, scale: 1, y: 0 }}

exit={{ opacity: 0, scale: 0.9, y: 20 }}

{children}

)}

)

}

```

Accessibility Patterns

Keyboard Navigation

```typescript

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 (

role="combobox"

aria-expanded={isOpen}

aria-haspopup="listbox"

onKeyDown={handleKeyDown}

{/ Dropdown implementation /}

)

}

```

Focus Management

```typescript

export function Modal({ isOpen, onClose, children }: ModalProps) {

const modalRef = useRef(null)

const previousFocusRef = useRef(null)

useEffect(() => {

if (isOpen) {

// Save currently focused element

previousFocusRef.current = document.activeElement as HTMLElement

// Focus modal

modalRef.current?.focus()

} else {

// Restore focus when closing

previousFocusRef.current?.focus()

}

}, [isOpen])

return isOpen ? (

ref={modalRef}

role="dialog"

aria-modal="true"

tabIndex={-1}

onKeyDown={e => e.key === 'Escape' && onClose()}

{children}

) : null

}

```

Remember: Modern frontend patterns enable maintainable, performant user interfaces. Choose patterns that fit your project complexity.

More from this repository5

🎯

clickhouse-io🎯Skill

Enables high-performance analytical data processing and optimization in ClickHouse, providing advanced table design patterns and query strategies for large-scale data workloads.

🎯

backend-patterns🎯Skill

Implements scalable backend architecture patterns and best practices for Node.js and Express, focusing on API design, repository management, and service layer optimization.

🎯

coding-standards🎯Skill

Establishes universal coding standards and best practices for TypeScript, JavaScript, React, and Node.js development, focusing on code quality, readability, and maintainability.

🎯

security-review🎯Skill

Conducts comprehensive security reviews by validating secrets, inputs, and potential vulnerabilities across authentication, API, and sensitive feature implementations.

🎯

tdd-workflow🎯Skill

Enforces test-driven development by guiding developers to write comprehensive tests before code, ensuring 80%+ test coverage across unit, integration, and E2E tests.