🎯

frontend-patterns

🎯Skill

from affaan-m/everything-claude-code

What it does

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(113 items)

frontend-patterns

Installation

Vibe Index InstallInstalls to .claude/skills/ - auto-recognized by Claude Code

npx vibeindex add affaan-m/everything-claude-code --skill frontend-patterns

skills.sh Install⚠ Installs to .agents/skills/ - may not be auto-recognized by Claude Code

npx skills add affaan-m/everything-claude-code --skill frontend-patterns

Manual InstallCopy SKILL.md content and save to the path below

~/.claude/skills/frontend-patterns/SKILL.md

SKILL.md

3,283Installs

AddedFeb 4, 2026

View on GitHub Back to Skills

More from this repository10

🏪

affaan-m-everything-claude-code🏪Marketplace

Battle-tested Claude Code configurations from an Anthropic hackathon winner

🎯

golang-patterns🎯Skill

Provides reusable design patterns and idiomatic Go solutions for efficient, scalable, and maintainable software architecture.

🎯

backend-patterns🎯Skill

Implements robust backend design patterns like repository, factory, singleton, and dependency injection for scalable and maintainable server-side architectures.

🎯

springboot-patterns🎯Skill

Spring Boot development patterns skill covering REST API design, layered service architecture, data access, caching, async processing, and logging for production-grade Java services

🎯

continuous-learning-v2🎯Skill

Dynamically updates and refines AI model knowledge through iterative feedback, adaptive learning techniques, and intelligent knowledge integration.

🎯

postgres-patterns🎯Skill

Provides reusable SQL query patterns, database design strategies, and performance optimization techniques for PostgreSQL development

🎯

api-design🎯Skill

REST API design patterns covering resource naming conventions, HTTP status codes, pagination, filtering, error responses, versioning, and rate limiting for building consistent, developer-friendly production APIs.

🎯

python-testing🎯Skill

Python testing patterns skill covering pytest, TDD methodology, fixtures, mocking, parametrization, and coverage requirements for robust test suites

🎯

python-patterns🎯Skill

Python development patterns skill covering Pythonic idioms, PEP 8 standards, type hints, and best practices for building robust and maintainable applications

🎯

coding-standards🎯Skill

Validates and enforces consistent code quality, style guidelines, and best practices across programming languages and project structures.