frontend-patterns
React, Next.js, TypeScript frontend patterns - component design, state management, performance
npx skills add vibeeval/vibecosystem --skill frontend-patterns --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Frontend Patterns ## Component Design ### Composition over Inheritance ```tsx // DOGRU: Composition function Card({ children, header }: { children: ReactNode; header: ReactNode }) { return ( <div className="card"> <div className="card-header">{header}</div> <div className="card-body">{children}</div> </div> ); } // Kullanim <Card header={<h2>Title</h2>}> <p>Content here</p> </Card> ``` ### Container/Presenter Pattern ```tsx // Container: Data fetching + logic function UserListContainer() { const { data, isLoading } = useQuery(['users'], fetchUsers); if (isLoading) return <Skeleton />; return <UserList users={data} />; } // Presenter: Pure rendering function UserList({ users }: { users: User[] }) { return ( <ul> {users.map(u => <UserItem key={u.id} user={u} />)} </ul> ); } ``` ## State Management | Cozum | Ne Zaman | Karmasiklik | |-------|----------|-------------| | useState | Local component state | Dusuk | | useReducer | Complex local state | Orta | | Context | Theme, auth, locale | Dusuk-Orta | | Zustand | Global client state | Orta | | React Query | Server state | Orta | | URL params | Navigation state | Dusuk | ## Performance ```tsx // React.memo: Expensive render onleme con
- Component Design
- Composition over Inheritance
- Container/Presenter Pattern
- State Management
- Performance
- Next.js Patterns
- shadcn/ui Best Practices
- Performance Budget
- React Performance Top 10
- Anti-Patterns
What does the frontend-patterns skill do?
React, Next.js, TypeScript frontend patterns - component design, state management, performance
How do I install it?
Run `npx skills add vibeeval/vibecosystem --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 vibeeval/vibecosystem, a repository with 521 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.