Token导航 LogoToken导航TokenDH.com
研究检索敏感数据github未标认证来源可访问clear审计未展示

layer-design图层设计

Agent Skill

用于辅助界面设计、视觉规范、排版、配色、布局和交互体验优化。它适合让 Agent 根据产品场景整理页面结构、生成 UI 方案、检查视觉一致性或改进组件层级。使用时需要结合现有品牌、设计系统和用户任务,不应只堆装饰元素;涉及真实页面改动时,应通过截图或浏览器预览检查文本溢出、对齐和响应式表现。

总安装

423

周安装

18

GitHub Stars

公开资料未说明

下载量

148
CodexClaudeCursorGemini CLI

安装说明

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

GitHub

来源数

2

许可证

MIT

最后核验

2026-05-01

来源状态

来源可访问

安装方式

通过对话安装

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

请帮我安装这个 Agent Skill:layer-design(图层设计)
来源仓库:https://github.com/front-depiction/claude-setup
仓库路径:skills/layer-design
安装命令:
npx skills add front-depiction/claude-setup --skill "layer-design"
安装前请先检查当前环境是否支持对应 CLI,并向我确认将要执行的命令、安装目录、联网范围和文件读写权限;确认后再执行。

命令行安装

复制命令到本机终端执行。该命令会通过 npx skills 从第三方来源获取 Skill;本站只展示命令,不托管安装包,也不自动执行。

AgentSkills.tonpx skills
npx skills add front-depiction/claude-setup --skill "layer-design"

简介

用于辅助界面设计、视觉规范和布局优化。

  • 适合生成 UI 方案、检查组件层级和响应式表现。
  • 使用时需结合品牌系统和用户任务,避免堆砌装饰元素。
  • 安装命令:npx skills add front-depiction/claude-setup --skill "layer-design"。
  • 建议通过截图或预览检查文本溢出和对齐问题。

SKILL.md

name
layer-design
description
Design and compose Effect layers for clean dependency management

Layer Design Skill

Create layers that construct services while managing their dependencies cleanly.

Layer Structure

import { Layer } from "effect"

// Layer<RequirementsOut, Error, RequirementsIn>
//          ▲                ▲           ▲
//          │                │           └─ What this layer needs
//          │                └─ Errors during construction
//          └─ What this layer produces

Pattern: Simple Layer (No Dependencies)

import { Context, Effect, Layer } from "effect"

interface ConfigData {
  readonly logLevel: string
  readonly connection: string
}

export class Config extends Context.Tag("Config")<
  Config,
  {
    readonly getConfig: Effect.Effect<ConfigData>
  }
>() {}

// Layer<Config, never, never>
//         ▲      ▲      ▲
//         │      │      └─ No dependencies
//         │      └─ Cannot fail
//         └─ Produces Config
export const ConfigLive = Layer.succeed(
  Config,
  Config.of({
    getConfig: Effect.succeed({
      logLevel: "INFO",
      connection: "mysql://localhost/db"
    })
  })
)

Pattern: Layer with Dependencies

import { Context, Effect, Layer, Console } from "effect"

interface ConfigData {
  readonly logLevel: string
  readonly connection: string
}

export class Config extends Context.Tag("Config")<
  Config,
  {
    readonly getConfig: Effect.Effect<ConfigData>
  }
>() {}

export class Logger extends Context.Tag("Logger")<
  Logger,
  { readonly log: (message: string) => Effect.Effect<void> }
>() {}

// Layer<Logger, never, Config>
//         ▲      ▲      ▲
//         │      │      └─ Needs Config
//         │      └─ Cannot fail
//         └─ Produces Logger
export const LoggerLive = Layer.effect(
  Logger,
  Effect.gen(function* () {
    const config = yield* Config  // Access dependency
    return Logger.of({
      log: (message) =>
        Effect.gen(function* () {
          const { logLevel } = yield* config.getConfig
          yield* Console.log(`[${logLevel}] ${message}`)
        })
    })
  })
)

Pattern: Layer with Resource Management

Use Layer.scoped when resources need cleanup:

  • Database connections
  • File handles, network connections
  • Any resource requiring Effect.acquireRelease or addFinalizer for cleanup

Use Layer.effect for stateless services without cleanup needs.

import { Context, Effect, Layer } from "effect"

interface ConfigData {
  readonly logLevel: string
  readonly connection: string
}

interface Connection {
  readonly close: () => void
}

interface DatabaseError {
  readonly _tag: "DatabaseError"
}

export class Config extends Context.Tag("Config")<
  Config,
  {
    readonly getConfig: Effect.Effect<ConfigData>
  }
>() {}

export class Database extends Context.Tag("Database")<
  Database,
  {
    readonly query: (sql: string) => Effect.Effect<unknown, DatabaseError>
  }
>() {}

declare const connectToDatabase: (config: ConfigData) => Effect.Effect<Connection, DatabaseError>
declare const executeQuery: (connection: Connection, sql: string) => Effect.Effect<unknown, DatabaseError>

// Layer<Database, DatabaseError, Config>
export const DatabaseLive = Layer.scoped(
  Database,
  Effect.gen(function* () {
    const config = yield* Config
    const configData = yield* config.getConfig

    // Acquire resource with automatic release
    const connection = yield* Effect.acquireRelease(
      connectToDatabase(configData),
      (conn) => Effect.sync(() => conn.close())  // Cleanup
    )

    return Database.of({
      query: (sql) => executeQuery(connection, sql)
    })
  })
)

Composing Layers: Merge vs Provide

Merge (Parallel Composition)

Combine independent layers:

import { Context, Layer } from "effect"

declare class Config extends Context.Tag("Config")<Config, {}> {}
declare class Logger extends Context.Tag("Logger")<Logger, {}> {}

declare const ConfigLive: Layer.Layer<Config, never, never>
declare const LoggerLive: Layer.Layer<Logger, never, Config>

// Layer<Config | Logger, never, Config>
//         ▲               ▲      ▲
//         │               │      └─ LoggerLive needs Config
//         │               └─ No errors
//         └─ Produces both Config and Logger
const AppConfigLive = Layer.merge(ConfigLive, LoggerLive)

Result combines:

  • Requirements: Union (never | Config = Config)
  • Outputs: Union (Config | Logger)

Provide (Sequential Composition)

Chain dependent layers:

import { Context, Layer } from "effect"

declare class Config extends Context.Tag("Config")<Config, {}> {}
declare class Logger extends Context.Tag("Logger")<Logger, {}> {}

declare const ConfigLive: Layer.Layer<Config, never, never>
declare const LoggerLive: Layer.Layer<Logger, never, Config>

// Layer<Logger, never, never>
//         ▲      ▲      ▲
//         │      │      └─ ConfigLive satisfies LoggerLive's requirement
//         │      └─ No errors
//         └─ Only Logger in output
const FullLoggerLive = Layer.provide(LoggerLive, ConfigLive)

Result:

  • Requirements: Outer layer's requirements (never)
  • Output: Inner layer's output (Logger)

Pattern: Layered Architecture

Build applications in layers:

import { Context, Layer } from "effect"

declare class Config extends Context.Tag("Config")<Config, {}> {}
declare class Database extends Context.Tag("Database")<Database, {}> {}
declare class Cache extends Context.Tag("Cache")<Cache, {}> {}
declare class PaymentDomain extends Context.Tag("PaymentDomain")<PaymentDomain, {}> {}
declare class OrderDomain extends Context.Tag("OrderDomain")<OrderDomain, {}> {}
declare class PaymentGateway extends Context.Tag("PaymentGateway")<PaymentGateway, {}> {}
declare class NotificationService extends Context.Tag("NotificationService")<NotificationService, {}> {}

declare const ConfigLive: Layer.Layer<Config, never, never>
declare const DatabaseLive: Layer.Layer<Database, never, Config>
declare const CacheLive: Layer.Layer<Cache, never, Config>
declare const PaymentDomainLive: Layer.Layer<PaymentDomain, never, Database>
declare const OrderDomainLive: Layer.Layer<OrderDomain, never, Database>
declare const PaymentGatewayLive: Layer.Layer<PaymentGateway, never, PaymentDomain>
declare const NotificationServiceLive: Layer.Layer<NotificationService, never, OrderDomain>

// Infrastructure: No dependencies
const InfrastructureLive = Layer.mergeAll(
  ConfigLive,          // Layer<Config, never, never>
  DatabaseLive,        // Layer<Database, never, Config>
  CacheLive            // Layer<Cache, never, Config>
).pipe(
  Layer.provide(ConfigLive)  // Satisfy Config requirement
)

// Domain: Depends on infrastructure
const DomainLive = Layer.mergeAll(
  PaymentDomainLive,   // Layer<PaymentDomain, never, Database>
  OrderDomainLive,     // Layer<OrderDomain, never, Database>
).pipe(
  Layer.provide(InfrastructureLive)
)

// Application: Depends on domain
const ApplicationLive = Layer.mergeAll(
  PaymentGatewayLive,
  NotificationServiceLive
).pipe(
  Layer.provide(DomainLive)
)

Pattern: Multiple Implementations

Switch implementations for different environments:

import { Context, Effect, Layer } from "effect"

interface Connection {
  readonly close: () => void
}

export class Database extends Context.Tag("Database")<
  Database,
  {
    readonly query: (sql: string) => Effect.Effect<{ rows: unknown[] }>
  }
>() {}

declare const connectToProduction: () => Effect.Effect<Connection>
declare const createDatabaseService: (connection: Connection) => {
  readonly query: (sql: string) => Effect.Effect<{ rows: unknown[] }>
}

declare const myProgram: Effect.Effect<void, never, Database>

// Production
export const DatabaseLive = Layer.scoped(
  Database,
  Effect.gen(function* () {
    const connection = yield* connectToProduction()
    return createDatabaseService(connection)
  })
)

// Test
export const DatabaseTest = Layer.succeed(
  Database,
  Database.of({
    query: () => Effect.succeed({ rows: [] })
  })
)

// Use in application
const program = myProgram.pipe(
  Effect.provide(process.env.NODE_ENV === "test" ? DatabaseTest : DatabaseLive)
)

Pattern: Layer Sharing

Layers are memoized - same instance shared across program:

import { Context, Effect, Layer } from "effect"

declare class Config extends Context.Tag("Config")<Config, { readonly value: string }> {}
declare const ConfigLive: Layer.Layer<Config, never, never>

// Config is constructed once and shared
const program = Effect.all([
  Effect.gen(function* () {
    const config = yield* Config
    // Uses shared instance
  }),
  Effect.gen(function* () {
    const config = yield* Config
    // Same instance
  })
]).pipe(Effect.provide(ConfigLive))

Error Handling in Layers

Handle construction errors:

import { Context, Effect, Layer, Data } from "effect"

interface Connection {
  readonly close: () => void
}

class ConnectionError extends Data.TaggedError("ConnectionError")<{
  readonly message: string
}> {}

class DatabaseConstructionError extends Data.TaggedError("DatabaseConstructionError")<{
  readonly cause: ConnectionError
}> {}

export class Database extends Context.Tag("Database")<
  Database,
  {
    readonly query: (sql: string) => Effect.Effect<unknown>
  }
>() {}

declare const connectToDatabase: () => Effect.Effect<Connection, ConnectionError>
declare const createDatabaseService: (connection: Connection) => {
  readonly query: (sql: string) => Effect.Effect<unknown>
}

export const DatabaseLive = Layer.effect(
  Database,
  Effect.gen(function* () {
    const connection = yield* connectToDatabase().pipe(
      Effect.catchTag("ConnectionError", (error) =>
        Effect.fail(new DatabaseConstructionError({ cause: error }))
      )
    )
    return createDatabaseService(connection)
  })
)

Naming Convention

  • *Live - Production implementation
  • *Test - Test implementation
  • *Mock - Mock for testing
  • Descriptive names for specialized implementations

Quality Checklist

  • [ ] Layer type accurately reflects dependencies
  • [ ] Resource cleanup using acquireRelease if needed
  • [ ] Layer can be tested with mock dependencies
  • [ ] No dependency leakage into service interface
  • [ ] Appropriate use of merge vs provide
  • [ ] Error handling for construction failures
  • [ ] JSDoc with example usage

Layers should make dependency management explicit while keeping service interfaces clean and focused.

适合场景

01

用户想查找某类 Agent Skill 时

02

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

03

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

04

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

能力概览

能力 1

按任务关键词查找相关 Skills

能力 2

展示可复制的安装命令

能力 3

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

能力 4

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

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

平台分布

Claude Code

29.48%
按下载量换算44

windsurf

24.87%
按下载量换算37

trae

18.56%
按下载量换算27

OpenCode

12.23%
按下载量换算18

Codex

6.98%
按下载量换算10

Antigravity

3.36%
按下载量换算5

安全审计

暂无安全审计结果可展示。

权限和风险

敏感数据

该 Skill 可能接触密钥、Token、环境变量或敏感配置,应进入高风险复核队列,默认不自动发布。

安装前确认

本站仅展示第三方公开信息,不托管安装包,不提供自动安装或运行环境。安装前应自行审查源码、依赖和命令行为。当前只有一个来源,正式发布前建议补源仓库或其他目录站核验。

来源信息

继续浏览同类 Skills