Frontend Patterns
Give your agent opinionated React and Next.js patterns for components, state, data fetching, forms, and performance while you ship UI.
Overview
frontend-patterns is an agent skill most often used in Build (also Ship review and perf) that applies React, Next.js, state, data-fetching, and UI performance patterns while you implement the product.
Install
npx skills add https://github.com/affaan-m/everything-claude-code --skill frontend-patternsWhat is this skill?
- Composition and compound-component patterns with TypeScript examples
- State guidance across useState, useReducer, Zustand, and Context
- Data fetching patterns including SWR, React Query, and server components
- Performance patterns: memoization, virtualization, and code splitting
- Forms, validation, controlled inputs, and Zod schema alignment
Adoption & trust: 7.8k installs on skills.sh; 210k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You are shipping React or Next.js UI but the agent keeps inventing inconsistent component APIs, state choices, and performance fixes on every task.
Who is it for?
Solo builders on React or Next.js who want a repeatable pattern library the agent follows during feature work and UI refactors.
Skip if: Teams on Vue, Svelte, or non-React stacks, or when you only need a one-line CSS tweak with no architectural guidance.
When should I use this skill?
Building React components, managing state, implementing data fetching, optimizing performance, working with forms, routing, or accessible responsive UI.
What do I get? / Deliverables
After the skill runs, the agent follows documented composition, state, fetching, form, and optimization patterns so new screens match your stack instead of ad-hoc snippets.
- Component implementations following documented patterns
- State and data-fetch structure aligned with SKILL.md
- Performance and form patterns applied to touched modules
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Canonical shelf is Build because the skill is invoked while implementing screens and client behavior, not during distribution or ops. Frontend subphase matches React/Next composition, routing, and UI performance triggers in When to Activate.
Where it fits
Scaffold a dashboard with Card compound components and consistent TypeScript props.
Pick SWR versus React Query for client data with server component boundaries.
Apply memoization and code-splitting guidance before launch when lists feel sluggish.
Refactor inherited-style components into composition during a pre-release UI pass.
How it compares
Use as a procedural pattern pack for React/Next implementation, not as a design-token extractor or a visual design-system generator.
Common Questions / FAQ
Who is frontend-patterns for?
Indie and solo developers using Claude Code, Cursor, or similar agents to build React or Next.js products who want structured frontend guidance in the skill context.
When should I use frontend-patterns?
During Build while composing components and managing state; during Ship when optimizing client bundles and memoization; and whenever the agent implements forms, routing, or accessible UI in a React codebase.
Is frontend-patterns safe to install?
It is documentation-style procedural knowledge with no required shell or network tools in the excerpt; review the Security Audits panel on this Prism page before trusting any third-party skill package.
SKILL.md
READMESKILL.md - Frontend Patterns
# 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> </Card> ``` ### Compound Components ```typescript interface TabsContextValue { activeTab: string setActiveTab: (tab: string) => void } const TabsContext = createContext<TabsContextValue | undefined>(undefined) export function Tabs({ children, defaultTab }: { children: React.ReactNode defaultTab: string }) { const [activeTab, setActiveTab] = useState(defaultTab) return ( <TabsContext.Provider value={{ activeTab, setActiveTab }}> {children} </TabsContext.Provider> ) } export function TabList({ children }: { children: React.ReactNode }) { return <div className="tab-list">{children}</div> } 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 ( <button className={context.activeTab === id ? 'active' : ''} onClick={() => context.setActiveTab(id)} > {children} </button> ) } // Usage <Tabs defaultTab="overview"> <TabList> <Tab id="overview">Overview</Tab> <Tab id="details">Details</Tab> </TabList> </Tabs> ``` ### Render Props Pattern ```typescript interface DataLoaderProps<T> { url: string children: (data: T | null, loading: boolean, error: Error | null) => React.ReactNode } export function DataLoader<T>({ url, children }: DataLoaderProps<T>) { const [data, setData] = useState<T | null>(null) const [loading, setLoading] = useState(true) const [error, setError] = useState<Error | null>(null) useEffect(() => { fetch(url) .then(res => res.json()) .then(setData) .catch(setError) .finally(() => setLoading(false)) }, [url]) return <>{children(data, loading, error)}</> } // Usage <DataLoader<Market[]> url="/api/markets"> {(markets, loading, error) => { if (loading) return <Spinner /> if (error) return <Error error={error} /> return <MarketList markets={markets!} /> }} </DataLoader> ``` ## 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<T> { onSuccess?: (data: T) => void onError?: (error: Error) => void enabled?: boolean } export function useQuery<T>( key: string, fetcher: () => Promise<T>, options?: UseQueryOptions