design-patterns

Apply Gang of Four design patterns to solve architectural problems in TypeScript. Use when refactoring code architecture, implementing extensible systems, decoupling components, or following SOLID principles. Covers all 22 GoF patterns: Creational (Factory Method, Abstract Factory, Builder, Prototype, Singleton), Structural (Adapter, Bridge, Composite, Decorator, Facade, Flyweight, Proxy), and Behavioral (Chain of Responsibility, Command, Iterator, Mediator, Memento, Observer, State, Strategy, Template Method, Visitor).

7 stars

Best use case

design-patterns is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

Apply Gang of Four design patterns to solve architectural problems in TypeScript. Use when refactoring code architecture, implementing extensible systems, decoupling components, or following SOLID principles. Covers all 22 GoF patterns: Creational (Factory Method, Abstract Factory, Builder, Prototype, Singleton), Structural (Adapter, Bridge, Composite, Decorator, Facade, Flyweight, Proxy), and Behavioral (Chain of Responsibility, Command, Iterator, Mediator, Memento, Observer, State, Strategy, Template Method, Visitor).

Teams using design-patterns should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

  • You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

  • You only need a quick one-off answer and do not need a reusable workflow.
  • You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/design-patterns/SKILL.md --create-dirs "https://raw.githubusercontent.com/fellipeutaka/denji/main/.agents/skills/design-patterns/SKILL.md"

Manual Installation

  1. Download SKILL.md from GitHub
  2. Place it in .claude/skills/design-patterns/SKILL.md inside your project
  3. Restart your AI agent — it will auto-discover the skill

How design-patterns Compares

Feature / Agentdesign-patternsStandard Approach
Platform SupportNot specifiedLimited / Varies
Context Awareness High Baseline
Installation ComplexityUnknownN/A

Frequently Asked Questions

What does this skill do?

Apply Gang of Four design patterns to solve architectural problems in TypeScript. Use when refactoring code architecture, implementing extensible systems, decoupling components, or following SOLID principles. Covers all 22 GoF patterns: Creational (Factory Method, Abstract Factory, Builder, Prototype, Singleton), Structural (Adapter, Bridge, Composite, Decorator, Facade, Flyweight, Proxy), and Behavioral (Chain of Responsibility, Command, Iterator, Mediator, Memento, Observer, State, Strategy, Template Method, Visitor).

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

Related Guides

SKILL.md Source

# Design Patterns

Proven architectural patterns for building maintainable, extensible, and testable
TypeScript codebases. All 22 Gang of Four patterns with practical implementations.

## When to Apply

Reference these patterns when:

- Solving recurring architectural problems
- Refactoring tightly coupled code
- Building plugin/extension systems
- Making code more testable via dependency injection
- Reviewing PRs with architectural concerns
- Choosing between inheritance and composition

## Pattern Categories

### Creational Patterns

Create objects flexibly, hiding creation logic from consumers.

| Pattern              | Intent                                                    |
| -------------------- | --------------------------------------------------------- |
| **Factory Method**   | Delegate object creation to subclasses                    |
| **Abstract Factory** | Create families of related objects without concrete types  |
| **Builder**          | Construct complex objects step-by-step                    |
| **Prototype**        | Clone existing objects instead of building from scratch    |
| **Singleton**        | Ensure exactly one instance with global access             |

See `references/CREATIONAL.md` for implementations.

### Structural Patterns

Compose classes and objects into larger, flexible structures.

| Pattern       | Intent                                                        |
| ------------- | ------------------------------------------------------------- |
| **Adapter**   | Make incompatible interfaces work together                     |
| **Bridge**    | Separate abstraction from implementation                       |
| **Composite** | Treat individual objects and compositions uniformly            |
| **Decorator** | Attach responsibilities dynamically without subclassing        |
| **Facade**    | Simplify complex subsystem with a unified interface            |
| **Flyweight** | Share common state to reduce memory across many objects        |
| **Proxy**     | Control access to an object through a substitute               |

See `references/STRUCTURAL.md` for implementations.

### Behavioral Patterns

Manage algorithms, responsibilities, and communication between objects.

| Pattern                      | Intent                                                  |
| ---------------------------- | ------------------------------------------------------- |
| **Chain of Responsibility**  | Pass requests along a handler chain                     |
| **Command**                  | Encapsulate requests as objects for queuing/undo         |
| **Iterator**                 | Traverse collections without exposing internals          |
| **Mediator**                 | Centralize complex communication between objects         |
| **Memento**                  | Capture and restore object state                         |
| **Observer**                 | Notify dependents automatically on state changes         |
| **State**                    | Alter behavior when internal state changes               |
| **Strategy**                 | Swap algorithms at runtime                               |
| **Template Method**          | Define algorithm skeleton, let subclasses override steps |
| **Visitor**                  | Add operations to objects without modifying them         |

See `references/BEHAVIORAL.md` for implementations.

## Pattern Selection Guide

| Problem                                    | Pattern(s)                          |
| ------------------------------------------ | ----------------------------------- |
| Need to decouple object creation           | Factory Method, Abstract Factory    |
| Complex object with many optional fields   | Builder                             |
| Expensive object creation, need copies     | Prototype                           |
| Global shared resource (config, pool)      | Singleton                           |
| Incompatible third-party interface         | Adapter                             |
| Multiple dimensions of variation           | Bridge                              |
| Tree structures (files, UI, org charts)    | Composite                           |
| Add features without subclassing           | Decorator                           |
| Simplify complex API surface               | Facade                              |
| Thousands of similar objects, memory heavy | Flyweight                           |
| Lazy loading, access control, caching      | Proxy                               |
| Flexible request processing pipeline       | Chain of Responsibility             |
| Undo/redo, task queues, macros             | Command                             |
| Custom collection traversal                | Iterator                            |
| Many-to-many object communication          | Mediator                            |
| Snapshots, save/restore state              | Memento                             |
| Event systems, reactive updates            | Observer                            |
| Object behavior depends on its state       | State                               |
| Swappable algorithms (sort, compress, etc) | Strategy                            |
| Algorithm with fixed steps, variable parts | Template Method                     |
| Operations across heterogeneous objects    | Visitor                             |

## Best Practices

### DO

- Choose patterns that solve actual problems you're facing now
- Prefer composition over inheritance
- Use dependency injection to decouple components
- Keep pattern implementations simple — avoid gold-plating
- Document *why* a pattern was chosen (not just which one)
- Consider testability when choosing patterns
- Combine patterns when appropriate (e.g., Strategy + Factory)

### DON'T

- Apply patterns preemptively for hypothetical future needs
- Force a pattern where a simple function/object suffices
- Create unnecessary abstraction layers
- Use Singleton as a disguised global variable
- Choose inheritance when composition works better
- Ignore team familiarity — a simpler pattern everyone knows beats a "better" one nobody understands

## SOLID Quick Reference

| Principle                 | Summary                                              | Related Patterns                         |
| ------------------------- | ---------------------------------------------------- | ---------------------------------------- |
| **S**ingle Responsibility | One class, one reason to change                      | Strategy, Command, Observer              |
| **O**pen/Closed           | Open for extension, closed for modification          | Decorator, Strategy, Template Method     |
| **L**iskov Substitution   | Subtypes must be substitutable for base types        | Factory Method, Abstract Factory         |
| **I**nterface Segregation | Prefer small, focused interfaces                     | Adapter, Facade                          |
| **D**ependency Inversion  | Depend on abstractions, not concretions              | All patterns using interfaces/abstract   |

Related Skills

web-design-guidelines

7
from fellipeutaka/denji

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".

vercel-composition-patterns

7
from fellipeutaka/denji

React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.

interface-design

7
from fellipeutaka/denji

This skill is for interface design — dashboards, admin panels, apps, tools, and interactive products. NOT for marketing design (landing pages, marketing sites, campaigns).

frontend-design

7
from fellipeutaka/denji

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

solid

7
from fellipeutaka/denji

Apply SOLID principles to write flexible, maintainable, and testable code. Use when designing classes, interfaces, and module boundaries. Covers Single Responsibility, Open/Closed, Liskov Substitution, Interface Segregation, and Dependency Inversion with practical TypeScript examples and detection heuristics.

denji

7
from fellipeutaka/denji

Manage SVG icons as framework components using Denji CLI. Use when the user needs to add, remove, list, export, import, or manage SVG icons in React, Preact, Solid, Qwik, Vue, or Svelte projects. Triggers include requests to "add an icon", "set up icons", "manage SVG icons", "remove an icon", "list icons", "export icons", "import icons", "dry-run icon add", or any task involving Iconify icons as framework components.

zod

7
from fellipeutaka/denji

Zod 4 — TypeScript-first schema validation with static type inference. Use when writing Zod schemas, validating data, defining types with Zod, parsing input, creating form validation schemas, defining API request/response schemas, working with z.object, z.string, z.number, z.enum, z.array, z.union, z.discriminatedUnion, z.file, z.jwt, z.email, z.uuid, z.url, z.codec, z.toJSONSchema, z.fromJSONSchema, z.int, z.stringbool, z.templateLiteral, z.record, z.partialRecord, or any other Zod API. Also use when migrating from Zod 3 to Zod 4, or when the user's package.json shows zod@^4. CRITICAL: Always use Zod 4 APIs. Never use deprecated Zod 3 patterns unless user explicitly requests Zod 3 compatibility.

vercel-react-best-practices

7
from fellipeutaka/denji

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

turborepo

7
from fellipeutaka/denji

Turborepo monorepo build system guidance. Triggers on: turbo.json, task pipelines, dependsOn, caching, remote cache, the "turbo" CLI, --filter, --affected, CI optimization, environment variables, internal packages, monorepo structure/best practices, and boundaries. Use when user: configures tasks/workflows/pipelines, creates packages, sets up monorepo, shares code between apps, runs changed/affected packages, debugs cache, or has apps/packages directories.

tanstack-virtual

7
from fellipeutaka/denji

TanStack Virtual headless virtualization for React. Use when rendering large lists (100+ items), implementing virtual scroll, building infinite scroll feeds, virtualizing grids or tables, using window-level scrolling, or implementing masonry/lane layouts with @tanstack/react-virtual. Triggers on: useVirtualizer, useWindowVirtualizer, virtual list, virtual scroll, list virtualization.

tanstack-query

7
from fellipeutaka/denji

TanStack Query (React Query) v5 best practices for data fetching, caching, mutations, and server state management. Use when building data-driven React applications, setting up query configurations, implementing mutations/optimistic updates, configuring caching strategies, integrating with SSR, or fixing v4→v5 migration errors.

tanstack-pacer

7
from fellipeutaka/denji

TanStack Pacer best practices for execution control in React — debouncing, throttling, rate limiting, queuing, and batching. Use when implementing search inputs, scroll handlers, API rate limits, task queues, bulk operations, or any scenario requiring controlled execution timing with reactive state.