frontend-patterns
π―Skillfrom affaan-m/everything-claude-code
|Provides reusable React component patterns like composition, compound components, and render props to enhance code modularity and flexibility.
Overview
Frontend Patterns is a skill that provides reusable React component patterns including composition, compound components, render props, and custom hooks. It covers modern frontend patterns for React, Next.js, state management, and performance optimization.
Key Features
- Component composition patterns with Card, Header, and Body examples
- Compound component patterns using React Context for coordinated state
- Render props pattern with generic DataLoader for flexible data fetching
- Custom hook patterns for state management and reusable logic
- Covers React, Next.js, and performance optimization best practices
Who is this for?
This skill is for React developers who want their AI assistant to generate well-structured, pattern-driven component code. It is especially helpful for mid-to-senior developers building scalable frontends who want consistent application of proven React patterns.
Same repository
affaan-m/everything-claude-code(43 items)
Installation
npx skills add https://github.com/affaan-m/everything-claude-code --skill frontend-patternsNeed more details? View full documentation on GitHub β
More from this repository10
Battle-tested Claude Code configurations from an Anthropic hackathon winner
Implements robust backend design patterns like repository, factory, singleton, and dependency injection for scalable and maintainable server-side architectures.
Validates and enforces consistent code quality, style guidelines, and best practices across programming languages and project structures.
Validates and secures code by providing comprehensive security checks for authentication, input handling, secrets management, and sensitive feature implementation.
Provides reusable design patterns and idiomatic Go solutions for efficient, scalable, and maintainable software architecture.
Enforces test-driven development by guiding developers to write comprehensive tests first, ensuring 80%+ code coverage across unit, integration, and E2E testing.
Provides reusable SQL query patterns, database design strategies, and performance optimization techniques for PostgreSQL development
Dynamically updates and refines AI model knowledge through iterative feedback, adaptive learning techniques, and intelligent knowledge integration.
Streamlines Go testing with comprehensive unit, integration, and benchmark strategies, mocking frameworks, and test coverage analysis.
Dynamically adapts and improves AI performance through iterative feedback, knowledge expansion, and self-optimization techniques.