frontend-patterns
Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.
npx skills add mturac/everything-openai-codex --skill frontend-patterns --agent codex
Same command for any agent — swap --agent for claude-code, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Frontend Development Patterns Modern frontend patterns for React, Next.js, and performant user interfaces. ## When to Activate - Building React components (composition, props, rendering) - Managing state (useState, useReducer, Zustand, Context) - Implementing data fetching (SWR, React Query, server components) - Optimizing performance (memoization, virtualization, code splitting) - Working with forms (validation, controlled inputs, Zod schemas) - Handling client-side routing and navigation - Building accessible, responsive UI patterns ## Component Patterns ### Composition Over Inheritance ```typescript // PASS: GOOD: Component composition interface CardProps { children: React.ReactNode variant?: 'default' | 'outlined' } export function Card({ children, variant = 'default' }: CardProps) { return <div className={`card card-${variant}`}>{children}</div> } export function CardHeader({ children }: { children: React.ReactNode }) { return <div className="card-header">{children}</div> } export function CardBody({ children }: { children: React.ReactNode }) { return <div className="card-body">{children}</div> } // Usage <Card> <CardHeader>Title</CardHeader> <CardBody>Content</CardBody> </C
- When to Activate
- Component Patterns
- Composition Over Inheritance
- Compound Components
- Render Props Pattern
- Custom Hooks Patterns
- State Management Hook
- Async Data Fetching Hook
- Debounce Hook
- State Management Patterns
- Context + Reducer Pattern
- Performance Optimization
- Memoization
- Code Splitting & Lazy Loading
What does the frontend-patterns skill do?
Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.
How do I install it?
Run `npx skills add mturac/everything-openai-codex --skill frontend-patterns --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From mturac/everything-openai-codex, a repository with 84 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.