Provide a simplified interface to a complex subsystem
When to Use
A subsystem has many classes or functions that clients frequently use together
You want to hide complexity behind a single, easy-to-use API
Reducing the number of imports and calls a consumer needs to make
Instructions
Identify a group of related subsystem calls that clients frequently combine.
Create a facade module that exposes high-level functions composing those subsystem calls.
The facade delegates to subsystem objects — it does not replace them.
Keep the subsystem accessible for advanced callers who need fine-grained control.
// Facade for a complex video conversion subsystem
class VideoConverter {
convert(filename, format) {
const file = new VideoFile(filename);
const codec = CodecFactory.extract(file);
const compressor = new BitrateCompressor();
const mixer = new AudioMixer();
const result = codec.transcode(file, format);
compressor.compress(result);
mixer.normalize(result);
return result;
}
}
// Client uses one call instead of four subsystem interactions
const converter = new VideoConverter();
converter.convert('video.ogg', 'mp4');
Details
The Facade pattern is a structural pattern that provides a unified interface to a set of interfaces in a subsystem. In JavaScript, this is often a module that re-exports a curated subset of a library's API or orchestrates multiple service calls behind a single function.
Trade-offs:
The facade can become a "god module" if it grows too large — keep it focused
Hiding subsystem details may prevent advanced users from accessing features they need
Changes to the underlying subsystem may require facade updates
When NOT to use:
When the subsystem is already simple — adding a facade just adds indirection
When callers need full control over individual subsystem components
When the facade would just proxy every subsystem method — that is a wrapper, not a simplification
Read the instructions and examples in this document.
Apply the patterns to your implementation, adapting to your specific context.
Verify your implementation against the details and edge cases listed above.
Harness Integration
Type: knowledge — this skill is a reference document, not a procedural workflow.
No tools or state — consumed as context by other skills and agents.
Success Criteria
The patterns described in this document are applied correctly in the implementation.
Edge cases and anti-patterns listed in this document are avoided.
1---2name: js-facade-pattern3description: JS Facade Pattern4---5# JS Facade Pattern67> Provide a simplified interface to a complex subsystem89## When to Use1011- A subsystem has many classes or functions that clients frequently use together12- You want to hide complexity behind a single, easy-to-use API13- Reducing the number of imports and calls a consumer needs to make1415## Instructions16171. Identify a group of related subsystem calls that clients frequently combine.182. Create a facade module that exposes high-level functions composing those subsystem calls.193. The facade delegates to subsystem objects — it does not replace them.204. Keep the subsystem accessible for advanced callers who need fine-grained control.2122```javascript23// Facade for a complex video conversion subsystem24class VideoConverter {25 convert(filename, format) {26 const file = new VideoFile(filename);27 const codec = CodecFactory.extract(file);28 const compressor = new BitrateCompressor();29 const mixer = new AudioMixer();3031 const result = codec.transcode(file, format);32 compressor.compress(result);33 mixer.normalize(result);34 return result;35 }36}3738// Client uses one call instead of four subsystem interactions39const converter = new VideoConverter();40converter.convert('video.ogg', 'mp4');41```4243## Details4445The Facade pattern is a structural pattern that provides a unified interface to a set of interfaces in a subsystem. In JavaScript, this is often a module that re-exports a curated subset of a library's API or orchestrates multiple service calls behind a single function.4647**Trade-offs:**4849- The facade can become a "god module" if it grows too large — keep it focused50- Hiding subsystem details may prevent advanced users from accessing features they need51- Changes to the underlying subsystem may require facade updates5253**When NOT to use:**5455- When the subsystem is already simple — adding a facade just adds indirection56- When callers need full control over individual subsystem components57- When the facade would just proxy every subsystem method — that is a wrapper, not a simplification5859## Source6061https://patterns.dev/javascript/facade-pattern6263## Process64651. Read the instructions and examples in this document.662. Apply the patterns to your implementation, adapting to your specific context.673. Verify your implementation against the details and edge cases listed above.6869## Harness Integration7071- **Type:** knowledge — this skill is a reference document, not a procedural workflow.72- **No tools or state** — consumed as context by other skills and agents.7374## Success Criteria7576- The patterns described in this document are applied correctly in the implementation.77- Edge cases and anti-patterns listed in this document are avoided.
Run npx skillmds@latest add intense-visions/js-facade-pattern in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
JS Facade Pattern It is listed under Coding & Dev Tools on SkillMD.
This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
Intense-Visions (@intense-visions) published this skill. Their other Agent Skills are listed on their SkillMD profile.