CCM
/Skills
SkillsMCPMarketplacesDigestToolsAdvertise

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 Code Marketplaces

Discover Claude Code plugins, extensions, and tools. Automatically updated directory of Anthropic Claude AI marketplaces with development tools, productivity plugins, and integrations.

Resources

  • Browse Skills
  • Browse MCP Servers
  • Browse Marketplaces
  • Skill index
  • MCP index
  • Marketplace index
  • Plugins Reference

Community

  • About
  • Tools
  • Feedback
  • Privacy Policy
  • Advertise

Built for the Claude Code community with Claude Code by mertbuilds.com

Independent project, not affiliated with Anthropic
patternsdev avatar

Observer Pattern

patternsdev/skills
538 installs235 stars
Summary

This walks you through implementing the classic observer pattern for event-driven pub/sub communication in JavaScript and TypeScript. You get a straightforward Observable class with subscribe, unsubscribe, and notify methods, plus a practical React example showing how to decouple event handlers from multiple listeners like loggers and toast notifications. The guidance from patterns.dev is solid on when to use this (multiple components reacting to state changes) and when to skip it (high subscriber counts or when simple callbacks would do). It mentions RxJS as the production-grade option if you need more power, but the vanilla implementation here is enough for understanding the fundamentals and handling basic decoupled communication.

Install to Claude Code

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

Installs into .claude/skills of the current project.

CodeRabbit
CodeRabbit
AI writes the code. CodeRabbit catches the slop.
Try For Free →
inference shell
inference shell
create and run specialised agents in minutes
build now →
MCP-ready Email SendingMCP-ready Email Sending
MCP-ready Email Sending
Plug Mailtrap into your AI workflow and let it handle the email.
Connect Mailtrap MCP →
Make your agent a DeFi expert
Make your agent a DeFi expert
Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →
Capacitor - Shared memory for your team’s coding agents.
Capacitor - Shared memory for your team’s coding agents.
Make coding agent sessions - Searchable, Shareable, Vendor-neutral & Scored.
Try For Free →
CodeScene MCP ServerCodeScene MCP Server
CodeScene MCP Server
Your agent targets a perfect 10 Code Health score. Deterministic. Every commit.
Try For Free →
Give your AI the whole web as clean markdownGive your AI the whole web as clean markdown
Give your AI the whole web as clean markdown
Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →
belt - the only tool your agent needs
belt - the only tool your agent needs
belt cli automatically finds the best tools and skills for your agent. image, video, music, tts...
one prompt install →
CodeRabbit
CodeRabbit
AI writes the code. CodeRabbit catches the slop.
Try For Free →
inference shell
inference shell
create and run specialised agents in minutes
build now →
MCP-ready Email SendingMCP-ready Email Sending
MCP-ready Email Sending
Plug Mailtrap into your AI workflow and let it handle the email.
Connect Mailtrap MCP →
Make your agent a DeFi expert
Make your agent a DeFi expert
Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →
Capacitor - Shared memory for your team’s coding agents.
Capacitor - Shared memory for your team’s coding agents.
Make coding agent sessions - Searchable, Shareable, Vendor-neutral & Scored.
Try For Free →
CodeScene MCP ServerCodeScene MCP Server
CodeScene MCP Server
Your agent targets a perfect 10 Code Health score. Deterministic. Every commit.
Try For Free →
Give your AI the whole web as clean markdownGive your AI the whole web as clean markdown
Give your AI the whole web as clean markdown
Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →
belt - the only tool your agent needs
belt - the only tool your agent needs
belt cli automatically finds the best tools and skills for your agent. image, video, music, tts...
one prompt install →
Files
SKILL.md

Select a file.

Featured
CodeRabbit
CodeRabbit
AI writes the code. CodeRabbit catches the slop.
Try For Free →
inference shell
inference shell
create and run specialised agents in minutes
build now →
MCP-ready Email SendingMCP-ready Email Sending
MCP-ready Email Sending
Plug Mailtrap into your AI workflow and let it handle the email.
Connect Mailtrap MCP →
Make your agent a DeFi expert
Make your agent a DeFi expert
Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →
Capacitor - Shared memory for your team’s coding agents.
Capacitor - Shared memory for your team’s coding agents.
Make coding agent sessions - Searchable, Shareable, Vendor-neutral & Scored.
Try For Free →
CodeScene MCP ServerCodeScene MCP Server
CodeScene MCP Server
Your agent targets a perfect 10 Code Health score. Deterministic. Every commit.
Try For Free →
Give your AI the whole web as clean markdownGive your AI the whole web as clean markdown
Give your AI the whole web as clean markdown
Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →
belt - the only tool your agent needs
belt - the only tool your agent needs
belt cli automatically finds the best tools and skills for your agent. image, video, music, tts...
one prompt install →
Categories
Frontend DevelopmentRelease Management
First SeenJun 3, 2026
View on GitHub

More from patternsdev/skills

All 47 skills →
  • Module Pattern536
  • Provider Pattern526
  • Mixin Pattern525
  • Islands Architecture523
  • Prototype Pattern523
  • Proxy Pattern521
  • Flyweight Pattern518
  • Mediator Pattern516
  • Ai Ui Patterns1.2k
  • React 20261.2k
  • Dynamic Import906
  • Compression897
  • Bundle Splitting896
  • Preload892
  • Loading Sequence887
  • Prefetch887
  • Import On Interaction884
  • Third Party875
  • Route Based872
  • Import On Visibility870
  • Virtual Lists869
  • Tree Shaking867
  • Static Import846
  • Prpl843

Recommended

More Frontend Development →
product-on-purpose avatar
utility-slideshow-creator

product-on-purpose/pm-skills

Generates professional presentations from a JSON deck specification using 18 slide types with dark/light variants, content-to-layout decision logic, and calibrated character limits. Ships with a default professional theme.
538
520
sanky369 avatar
social-graphics

sanky369/vibe-building-skills

Produce platform-correct social media graphics: pick the right dimensions and layout per platform, write the headline/body/CTA copy, build the generation prompt, and generate the image via the repo's FAL.ai pipeline. Use whenever the user wants a social post visual, Instagram post/story/carousel, LinkedIn graphic, Twitter/X image, TikTok thumbnail, Pinterest pin, launch announcement graphic, or 'something to post about X' — even if they never name a platform. Also use to adapt one design across several platforms. Produces a Social Graphic Spec per asset (platform, dimensions, layout, copy, full generation prompt) plus generated images when FAL_API_KEY is available.
537
29
zjfls avatar
news-summary

zjfls/zhoujie-claude-skills

新闻搜索、新闻摘要、新闻汇总、热点新闻、最新新闻、新闻整理、新闻收集。帮你搜索最近几天的相关新闻(12-25条),生成精美的HTML摘要页面,每条新闻都有摘要和AI深度解读功能,自动打开浏览器展示
536
2
jezweb avatar
ux-extract

jezweb/claude-skills

Exhaustively extract UX patterns from a reference web app. Walks every screen, captures screenshots of every state, records interaction patterns, copy verbatim, keyboard shortcuts, responsive treatments, motion, and empty/error/loading states. Produces a reusable pattern library that other audits can compare against. The inverse of ux-audit — asks 'what is the bar?' rather than 'does this match the bar?'. Trigger with 'learn from X', 'extract patterns from X', 'study X's UX', 'reverse engineer the UX of X', 'build a pattern library from X'.
534
960
joneqian avatar
wechat-miniprogram

joneqian/claude-skills-suite

WeChat Mini Program development framework. Use for building WeChat mini apps, WXML templates, WXSS styles, WXS scripting, component development, and WeChat API integration.
534
28
phaserjs avatar
v4-new-features

phaserjs/phaser

Use this skill when learning about new features, game objects, components, and rendering capabilities added in Phaser 4. Covers Filters, RenderNodes, CaptureFrame, Gradient, Noise, SpriteGPULayer, TilemapGPULayer, Lighting component, RenderSteps, and new tint modes. Triggers on: new in v4, Phaser 4 features, RenderNode, SpriteGPULayer, CaptureFrame, Gradient game object, Noise game object, new tint modes. For migrating v3 code to v4, see the v3-to-v4-migration skill instead.
534
40.1k