Claude Marketplaces
SkillsMCP serversMarketplacesDigestTools

This week in Claude

Every Monday: Claude Code, Agent SDK, MCP, and the Anthropic platform moves worth your time.

Skills by category
Frontend DevelopmentBackend & APIsTesting & QASecurityDevOps & CI/CDGit & Pull RequestsDocumentationCode Review & QualityAI & Agent BuildingSkill Development
MCP servers by category
Sales & MarketingWeb & Browser AutomationDatabasesAI & LLM ToolsCloud & InfrastructureCommunication & MessagingDeveloper ToolsDesign & CreativeDocuments & KnowledgeSearch & Web Crawling
Marketplaces by category
AI Agents & OrchestrationLLM IntegrationDevelopment ToolsFrontend & UIBackend & APIsDatabasesTesting & Code QualityDevOps & CloudSecurity & ComplianceGit & Version Control
Claude Marketplaces

An independent directory of skills, plugins and MCP servers for Claude Code. Not affiliated with Anthropic.

Browse

  • Skills
  • MCP servers
  • Marketplaces
  • Weekly digest
  • Skill index
  • MCP index
  • Marketplace index

Site

  • About
  • Tools
  • Feedback
  • Privacy
  • llms.txt
  • Plugins reference

Maker

  • Agent Caffeine
  • knobs
  • attention awareness
  • mertbuilds.com
Made by mertbuilds.com
Skills/Frontend Development
patternsdev avatar

Hooks Pattern

patternsdev/skills

This teaches you how to refactor class components into functional components using React Hooks, specifically useState and useEffect.

installs
829
GitHub stars
235
last updated
Aug 21, 2026
View on GitHubSave

Install

$ npx -y skills add patternsdev/skills --skill hooks-pattern --agent claude-code

Installs into .claude/skills of the current project.

Sponsors

CodeRabbitSponsoredTry For FreeLid closed, agents workingDownload freeDevtools for design engineersTry it livebelt - the only tool your agent needsSponsoredone prompt installOpen StepsSponsoredDownload for freeAppSignalSponsoredStart Free TrialBlock distraction from your iPhoneBlock now (100% free)Granola, the best AI meeting recorderSponsoredDownload for free

What it does

It's built around the common problem of wrapper hell and tangled lifecycle logic that comes from older patterns like HOCs and render props. The skill works on TSX and JSX files and includes guidance on creating custom hooks for extracting shared behavior like form handling or subscriptions. One thing to note is that it was written for React 16.8 era conventions, so some advice about manual memoization is a bit dated now that the React compiler handles optimization. Still solid for understanding why hooks replaced classes and how to structure reusable stateful logic.

Files

Select a file.

Details

Repository
github.com/patternsdev/skills
Category
Frontend Development
First seen
Jun 3, 2026

More from patternsdev/skills

All 47
  • React Composition 2026827
  • React Render Optimization804
  • React Data Fetching790
  • Presentational Container Pattern778
  • Compound Pattern773
  • Hoc Pattern744
  • Client Side Rendering740
  • Render Props Pattern740
  • React Server Components699
  • Progressive Hydration697
  • React Selective Hydration691
  • Server Side Rendering683
  • Incremental Static Rendering667
  • Static Rendering657
  • Streaming Ssr628
  • Js Performance Patterns581
  • Vite Bundle Optimization575
  • View Transitions557
  • Command Pattern546
  • Singleton Pattern540
  • Factory Pattern538
  • Observer Pattern538
  • Module Pattern536
  • Provider Pattern526

Recommended

More Frontend Development
1patternsdev avatarreact-composition-2026patternsdev/skillsTeaches modern React composition patterns for 2025/2026. Use when designing component APIs, building shared UI libraries, or refactoring prop-heavy components.827installs
2hairyf avatarreact-usehairyf/skillsCollection of essential React Hooks for sensors, UI, animations, side-effects, lifecycles, and state management798installs
3martinholovsky avatarui-ux-expertmartinholovsky/claude-skills-generatorExpert UI/UX designer specializing in user-centered design, accessibility (WCAG 2.2), design systems, and responsive interfaces. Use when designing web/mobile a791installs
4mindrally avatarreactmindrally/skillsExpert in React development with modern patterns, hooks, and performance optimization785installs
5existential-birds avatartailwind-v4existential-birds/beagleTailwind CSS v4 with CSS-first configuration and design tokens. Use when setting up Tailwind v4, defining theme variables, using OKLCH colors, or configuring da780installs
6adobe avatarcreate-componentadobe/skillsCreates complete AEM components with dialog, HTL template, Sling Model, unit tests, and clientlibs. Supports extending Core Components and project components. W750installs