effect-patterns

Provide canonical Effect-TS patterns for services, schemas, atoms, and runtime composition.

2|Updated Oct 29, 2025
One-click install
npx skills add https://github.com/creatifcoding/gbg --skill effect-patterns
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: effect-patterns
Source: https://github.com/creatifcoding/gbg/tree/main/packages/tmnl/.claude/skills/effect-patterns
Command: npx skills add https://github.com/creatifcoding/gbg --skill effect-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill demystifies Effect-TS development by providing canonical patterns and best practices for services, schemas, and state management with effect-atom. It helps developers build robust, type-safe, and maintainable applications, avoiding common pitfalls and ensuring architectural consistency.

Core Features & Use Cases

  • Service Definition: Guides on choosing the right Effect-TS service pattern (Effect.Service, Context.Tag) for various scenarios.
  • Atom-as-State: Enforces the Atom.make() pattern for React state, avoiding Effect.Ref complexity and ensuring reactive, performant UIs.
  • Schema & Observability: Provides patterns for Schema.TaggedStruct, Schema.TaggedClass, and Effect.withSpan for robust domain modeling, data validation, and tracing.
  • Use Case: When designing a new backend service or a complex state management system in a React application, invoke this Skill to get the recommended Effect-TS service definition, Atom-based state management, and error handling patterns, ensuring your architecture is sound from the start.

Quick Start

Explain the recommended Effect-TS service definition pattern for a new data fetching service that uses effect-atom for state.

Frequently Asked Questions about effect-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What's the best way to structure Effect-TS services for type safety and dependency injection?

Effect-TS services use three canonical patterns: Effect.Service for simple cases, Context.Tag with class extension for strategy-based approaches, and Context.Tag with Config for flexible configuration. Each enforces type-safe construction and auto-provided dependencies, ensuring consistent architecture across your application.

How do I manage state in React with Effect-TS instead of using Ref?

Use Atom.make() from effect-atom for reactive, performant state management. This pattern avoids Effect.Ref complexity while maintaining type safety and enabling reactive updates that integrate seamlessly with React components and Effect-TS services.

How do I implement schema validation and observability in Effect-TS applications?

Apply Schema.TaggedStruct or Schema.TaggedClass for robust domain modeling and data validation, combined with Effect.withSpan for distributed tracing. These patterns ensure type-safe serialization, runtime validation, and observable architecture across your services.

What's the difference between Effect.Service, Context.Tag, and Config patterns?

Effect.Service provides straightforward service definition with automatic dependency provision. Context.Tag with class extension implements the Strategy pattern for behavioral flexibility. Context.Tag with Config enables runtime configuration without modifying code, each suited to different architectural needs.

How do I compose multiple Effect-TS services into a runtime with Layer?

Layer-driven runtime composition orchestrates service dependencies declaratively. Define services with their patterns, specify Layer dependencies, and compose them into a coherent runtime. This approach scales horizontally and maintains explicit readonly interfaces via as const.

Can I use Effect-TS patterns for both backend services and React state management?

Yes. Effect-TS patterns apply across service definition, dependency injection, and layering for backend services, while effect-atom provides React state management following the same architectural principles. This creates consistency between server and client-side code.