本文へ移動
cccskills
無料GitHub で公開

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).

インストール方法を見る

含まれるファイル(4)

  • SKILL.md7.5 KB
  • references/BEHAVIORAL.md23.9 KB
  • references/CREATIONAL.md10.5 KB
  • references/STRUCTURAL.md15.1 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

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.

PatternIntent
Factory MethodDelegate object creation to subclasses
Abstract FactoryCreate families of related objects without concrete types
BuilderConstruct complex objects step-by-step
PrototypeClone existing objects instead of building from scratch
SingletonEnsure exactly one instance with global access

See references/CREATIONAL.md for implementations.

Structural Patterns

Compose classes and objects into larger, flexible structures.

PatternIntent
AdapterMake incompatible interfaces work together
BridgeSeparate abstraction from implementation
CompositeTreat individual objects and compositions uniformly
DecoratorAttach responsibilities dynamically without subclassing
FacadeSimplify complex subsystem with a unified interface
FlyweightShare common state to reduce memory across many objects
ProxyControl access to an object through a substitute

See references/STRUCTURAL.md for implementations.

Behavioral Patterns

Manage algorithms, responsibilities, and communication between objects.

PatternIntent
Chain of ResponsibilityPass requests along a handler chain
CommandEncapsulate requests as objects for queuing/undo
IteratorTraverse collections without exposing internals
MediatorCentralize complex communication between objects
MementoCapture and restore object state
ObserverNotify dependents automatically on state changes
StateAlter behavior when internal state changes
StrategySwap algorithms at runtime
Template MethodDefine algorithm skeleton, let subclasses override steps
VisitorAdd operations to objects without modifying them

See references/BEHAVIORAL.md for implementations.

Pattern Selection Guide

ProblemPattern(s)
Need to decouple object creationFactory Method, Abstract Factory
Complex object with many optional fieldsBuilder
Expensive object creation, need copiesPrototype
Global shared resource (config, pool)Singleton
Incompatible third-party interfaceAdapter
Multiple dimensions of variationBridge
Tree structures (files, UI, org charts)Composite
Add features without subclassingDecorator
Simplify complex API surfaceFacade
Thousands of similar objects, memory heavyFlyweight
Lazy loading, access control, cachingProxy
Flexible request processing pipelineChain of Responsibility
Undo/redo, task queues, macrosCommand
Custom collection traversalIterator
Many-to-many object communicationMediator
Snapshots, save/restore stateMemento
Event systems, reactive updatesObserver
Object behavior depends on its stateState
Swappable algorithms (sort, compress, etc)Strategy
Algorithm with fixed steps, variable partsTemplate Method
Operations across heterogeneous objectsVisitor

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

PrincipleSummaryRelated Patterns
Single ResponsibilityOne class, one reason to changeStrategy, Command, Observer
Open/ClosedOpen for extension, closed for modificationDecorator, Strategy, Template Method
Liskov SubstitutionSubtypes must be substitutable for base typesFactory Method, Abstract Factory
Interface SegregationPrefer small, focused interfacesAdapter, Facade
Dependency InversionDepend on abstractions, not concretionsAll patterns using interfaces/abstract

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

Browser automation CLI for AI agents. Use when the user needs to interact with websites, including navigating pages, filling forms, clicking buttons, taking screenshots, extracting data, testing web apps, or automating any browser task. Triggers include requests to "open a website", "fill out a form", "click a button", "take a screenshot", "scrape data from a page", "test this web app", "login to a site", "automate browser actions", or any task requiring programmatic web interaction.

日本語の概要は準備中です。原文の説明を表示しています。

fellipeutaka/denji62026年8月3日 更新

Set up and optimize repositories for AI coding agents. Creates minimal AGENTS.md, CLAUDE.md symlink, docs/REQUIREMENTS.md, docs/BUSINESS-RULES.md, feedback loops, and deterministic enforcement (Claude Code hooks, OpenCode plugins). Use when user wants to make a repo AI-friendly, set up AGENTS.md/CLAUDE.md, document requirements/business rules for AI, add pre-commit hooks for AI workflows, or optimize codebase structure for coding agents.

日本語の概要は準備中です。原文の説明を表示しています。

fellipeutaka/denji62026年8月3日 更新

bun

無料

Bun runtime, package manager, bundler, and test runner. Use when running scripts with bun, managing packages, serving HTTP with Bun.serve, querying databases with Bun.sql/bun:sqlite/Bun.redis, shell scripting with $, using S3/file I/O, writing tests with bun:test, bundling or compiling to executable, or using any Bun-specific API (spawn, glob, semver, FFI, workers, plugins, HTMLRewriter).

日本語の概要は準備中です。原文の説明を表示しています。

fellipeutaka/denji62026年8月3日 更新

Write clean, readable, and maintainable code following principles from Robert C. Martin's "Clean Code" and Object Calisthenics. Use when writing, reviewing, or refactoring code to improve naming, function design, formatting, error handling, and class structure. Includes code smell detection and refactoring guidance.

日本語の概要は準備中です。原文の説明を表示しています。

fellipeutaka/denji62026年8月3日 更新

Create high-quality git commits: review/stage intended changes, split into logical commits, and write clear commit messages (including Conventional Commits). Use when the user asks to commit, craft a commit message, stage changes, or split work into multiple commits.

日本語の概要は準備中です。原文の説明を表示しています。

fellipeutaka/denji62026年8月3日 更新

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.

日本語の概要は準備中です。原文の説明を表示しています。

fellipeutaka/denji62026年8月3日 更新

fellipeutaka のスキルをすべて見る

このスキルの問題を報告する