cc-skill-frontend-patterns
Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.
Profile →npx skills add sickn33/agentic-awesome-skills --skill cc-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 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 <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
- 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
- Virtualization for Long Lists
What does the cc-skill-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 sickn33/agentic-awesome-skills --skill cc-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 sickn33/agentic-awesome-skills, a repository with 44,414 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.