Token导航 LogoToken导航TokenDH.com
前端设计需要联网github未标认证来源可访问clear审计通过

factory-function-composition工厂功能组成

Agent Skill

用于辅助前端页面、组件、样式和交互逻辑的开发与维护。它适合让 Agent 生成或审查 React、Next.js、Vue、Tailwind、CSS 等相关代码,整理组件结构,或定位布局和性能问题。使用时需要结合项目现有设计系统、路由和构建方式,避免只生成孤立片段;涉及页面改动时,应配合本地预览和构建检查确认视觉效果。

总安装

1,411

周安装

60

GitHub Stars

4,527

下载量

494
CodexClaudeCursorGemini CLI

安装说明

本站只整理中文说明和来源信息,不托管安装包,也不代用户安装。

GitHub

来源数

3

许可证

MIT

最后核验

2026-05-01

来源状态

来源可访问

安装方式

通过对话安装

复制提示词发给支持本地命令或 Skills 的 AI 助手,先确认命令和权限,再让它执行。

请帮我安装这个 Agent Skill:factory-function-composition(工厂功能组成)
来源仓库:https://github.com/epicenterhq/epicenter
仓库路径:skills/factory-function-composition
安装命令:
npx skills add https://github.com/epicenterhq/epicenter --skill factory-function-composition
安装前请先检查当前环境是否支持对应 CLI,并向我确认将要执行的命令、安装目录、联网范围和文件读写权限;确认后再执行。

命令行安装

复制命令到本机终端执行。不同来源提供的安装方式可能略有差异;本站展示可直接复制的安装命令,安装前请核对来源页面。

skills.shnpx skills
npx skills add https://github.com/epicenterhq/epicenter --skill factory-function-composition

简介

用于辅助前端页面和组件的开发与维护,支持 React、Vue 等技术栈。

  • 适合生成或审查组件结构,定位布局和性能问题。
  • 应用工厂函数模式实现依赖注入和函数组合,提升代码清晰度。
  • 安装方式:通过 npx skills add 命令从 GitHub 仓库安装,建议确认权限和维护状态。
  • factory-function-composition 属于前端设计类 Skill,可作为该场景下的辅助能力补充。

SKILL.md

Factory Function Composition

This skill helps you apply factory function patterns for clean dependency injection and function composition in TypeScript.

Related Skills: See method-shorthand-jsdoc for when to move helpers into the return object. See refactoring for caller counting and inlining single-use extractions.

When to Apply This Skill

Use this pattern when you see:

  • A function that takes a client/resource as its first argument
  • Options from different layers (client, service, method) mixed together
  • Client creation happening inside functions that shouldn't own it
  • Functions that are hard to test because they create their own dependencies

The Universal Signature

Every factory function follows this signature:

function createSomething(dependencies, options?) {
	return {
		/* methods */
	};
}
  • First argument: Always the resource(s). Either a single client or a destructured object of multiple dependencies.
  • Second argument: Optional configuration specific to this factory. Never client config—that belongs at client creation.

Two arguments max. First is resources, second is config. No exceptions.

The Core Pattern

// Single dependency
function createService(client, options = {}) {
	return {
		method(methodOptions) {
			// Uses client, options, and methodOptions
		},
	};
}

// Multiple dependencies
function createService({ db, cache }, options = {}) {
	return {
		method(methodOptions) {
			// Uses db, cache, options, and methodOptions
		},
	};
}

// Usage
const client = createClient(clientOptions);
const service = createService(client, serviceOptions);
service.method(methodOptions);

Key Principles

  1. Client configuration belongs at client creation time — don't pipe clientOptions through your factory
  2. Each layer has its own options — client, service, and method options stay separate
  3. Dependencies come first — factory functions take dependencies as the first argument
  4. Return objects with methods — not standalone functions that need the resource passed in

Recognizing the Anti-Patterns

Anti-Pattern 1: Function takes client as first argument

// Bad
function doSomething(client, options) { ... }
doSomething(client, options);

// Good
const service = createService(client);
service.doSomething(options);

Anti-Pattern 2: Client creation hidden inside

// Bad
function doSomething(clientOptions, methodOptions) {
	const client = createClient(clientOptions); // Hidden!
	// ...
}

// Good
const client = createClient(clientOptions);
const service = createService(client);
service.doSomething(methodOptions);

Anti-Pattern 3: Mixed options blob

// Bad
doSomething({
	timeout: 5000, // Client option
	retries: 3, // Client option
	endpoint: '/users', // Method option
	payload: data, // Method option
});

// Good
const client = createClient({ timeout: 5000, retries: 3 });
const service = createService(client);
service.doSomething({ endpoint: '/users', payload: data });

Anti-Pattern 4: Multiple layers hidden

// Bad
function doSomething(clientOptions, serviceOptions, methodOptions) {
	const client = createClient(clientOptions);
	const service = createService(client, serviceOptions);
	return service.method(methodOptions);
}

// Good — each layer visible and configurable
const client = createClient(clientOptions);
const service = createService(client, serviceOptions);
service.method(methodOptions);

Multiple Dependencies

When your service needs multiple clients:

function createService(
	{ db, cache, http }, // Dependencies as destructured object
	options = {}, // Service options
) {
	return {
		method(methodOptions) {
			// Uses db, cache, http
		},
	};
}

// Usage
const db = createDbConnection(dbOptions);
const cache = createCacheClient(cacheOptions);
const http = createHttpClient(httpOptions);

const service = createService({ db, cache, http }, serviceOptions);
service.method(methodOptions);

The Canonical Internal Shape

The previous sections cover the external signature—(deps, options?) → return {methods}. This section covers what goes *inside* the function body. Every factory function follows a four-zone ordering:

// Option A — destructure in the signature (preferred for small dep lists)
function createSomething({ db, cache }: Deps, options?) {
	const maxRetries = options?.maxRetries ?? 3;
	// ...
}

// Option B — destructure in zone 1 (fine when you also need the deps object itself)
function createSomething(deps: Deps, options?) {
	const { db, cache } = deps;
	const maxRetries = options?.maxRetries ?? 3;
	// ...
}

Both are valid. The point is that by the time you reach zone 2, all dependencies and config are bound to const names. The four zones:

function createSomething({ db, cache }, options?) {
	// Zone 1 — Immutable state (const from deps/options)
	const maxRetries = options?.maxRetries ?? 3;

	// Zone 2 — Mutable state (let declarations)
	let connectionCount = 0;
	let lastError: Error | null = null;

	// Zone 3 — Private helpers
	function resetState() {
		connectionCount = 0;
		lastError = null;
	}

	// Zone 4 — Public API (always last)
	return {
		connect() { ... },
		disconnect() { ... },
		get errorCount() { return connectionCount; },
	};
}

Zones 1 and 2 can merge when there's little state. Zone 3 is empty for small factories. But the return object is always last—it's the complete public API.

The this Decision Rule

Inside the return object, public methods sometimes need to call other public methods. Use this.method() for that—method shorthand gives proper this binding.

If a function is called both by return-object methods *and* by pre-return initialization logic, it belongs in zone 3 (private helpers). Call it directly by name; no this needed.

Where the function livesHow to call it
Return object (zone 4)this.method() from sibling methods
Private helper (zone 3)Direct call by name: helperFn()
Both zones need itKeep in zone 3, call by name everywhere

See Closures Are Better Privacy Than Keywords for the full rationale and real codebase examples.

The Mental Model

Think of it as a chain where each link:

  • Receives a resource from the previous link
  • Adds its own configuration
  • Produces something for the next link
createClient(...)  →  createService(client, ...)  →  service.method(...)
     ↑                       ↑                            ↑
 clientOptions          serviceOptions              methodOptions

Benefits

  • Testability: Inject mock clients easily
  • Reusability: Share clients across multiple services
  • Flexibility: Configure each layer independently
  • Clarity: Clear ownership of configuration at each level

References

See the full articles for more details:

适合场景

01

用户想查找某类 Agent Skill 时

02

需要根据任务场景推荐可安装能力包时

03

需要对比不同来源的安装命令和来源信息时

04

需要参考平台分布和安装热度时

能力概览

能力 1

按任务关键词查找相关 Skills

能力 2

展示可复制的安装命令

能力 3

保留来源站点、仓库和原始说明,方便继续核验

能力 4

补充不同宿主或平台的使用分布数据

能力 5

展示第三方安全扫描或审计结果

安装后应在对应宿主中按原始 README 的触发条件使用;具体调用方式请以来源页面和 README 为准。

平台分布

Claude Code

26.96%
按下载量换算133

Gemini CLI

26.52%
按下载量换算131

Antigravity

19.72%
按下载量换算97

OpenCode

12.96%
按下载量换算64

windsurf

9%
按下载量换算44

Codex

3.78%
按下载量换算19

安全审计

Gen Agent Trust Hub

通过

Socket

通过

Snyk

通过

权限和风险

需要联网

该 Skill 可能需要联网访问来源站点、仓库或外部 API;具体网络访问范围需要结合源码和 README 复核。

安装前确认

本站仅展示第三方公开信息,不托管安装包,不提供自动安装或运行环境。安装前应自行审查源码、依赖和命令行为。

来源信息

继续浏览同类 Skills