frontend-patterns
React and Next.js patterns for component composition, state management, performance, and accessibility.
- Covers component patterns including composition, compound components, and render props, plus custom hooks for state, data fetching, and debouncing
- Includes performance optimization techniques: memoization, code splitting with lazy loading, and list virtualization for large datasets
- Provides form handling with validation, error boundaries, and animation patterns using Framer Motion
- Demonstrates accessibility best practices for keyboard navigation and focus management in interactive components
Frontend Development Patterns
Modern frontend patterns for React, Next.js, and performant user interfaces.
Component Patterns
Composition Over Inheritance
// ✅ 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>
}
More from sickn33/antigravity-awesome-skills
docker-expert
You are an advanced Docker containerization expert with comprehensive, practical knowledge of container optimization, security hardening, multi-stage builds, orchestration patterns, and production deployment strategies based on current industry best practices.
15.0Knodejs-best-practices
Node.js development principles and decision-making. Framework selection, async patterns, security, and architecture. Teaches thinking, not copying.
11.2Ktypescript-expert
TypeScript and JavaScript expert with deep knowledge of type-level programming, performance optimization, monorepo management, migration strategies, and modern tooling.
8.3Kapi-security-best-practices
Implement secure API design patterns including authentication, authorization, input validation, rate limiting, and protection against common API vulnerabilities
7.0Kclean-code
This skill embodies the principles of \"Clean Code\" by Robert C. Martin (Uncle Bob). Use it to transform \"code that works\" into \"code that is clean.\"
6.5Knextjs-best-practices
Next.js App Router principles. Server Components, data fetching, routing patterns.
5.1K