# https://github.com/ComposioHQ/awesome-claude-skills 项目说明书
生成时间：2026-05-16 15:52:54 UTC
## 目录
- [项目概览](#overview)
- [快速入门指南](#getting-started)
- [Skill内部结构](#skill-anatomy)
- [Skill创建工作流](#skill-creation-workflow)
- [文档处理技能概览](#document-skills-overview)
- [文档处理详细指南](#document-processing-details)
- [开发与代码工具技能](#development-skills)
- [MCP服务器集成](#mcp-integration)
- [创意与媒体技能](#creative-skills)
- [生产力与组织技能](#productivity-skills)
## 项目概览
### 相关页面
相关主题：[快速入门指南](#getting-started), [Skill内部结构](#skill-anatomy)
相关源码文件
以下源码文件用于生成本页说明：
- [README.md](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/README.md)
- [CONTRIBUTING.md](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/CONTRIBUTING.md)
- [connect-apps-plugin/README.md](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/connect-apps-plugin/README.md)
- [slack-gif-creator/core/frame_composer.py](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/slack-gif-creator/core/frame_composer.py)
- [slack-gif-creator/core/typography.py](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/slack-gif-creator/core/typography.py)
- [slack-gif-creator/core/visual_effects.py](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/slack-gif-creator/core/visual_effects.py)
- [slack-gif-creator/core/easing.py](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/slack-gif-creator/core/easing.py)
- [slack-gif-creator/core/color_palettes.py](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/slack-gif-creator/core/color_palettes.py)
- [slack-gif-creator/core/validators.py](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/slack-gif-creator/core/validators.py)
# 项目概览
awesome-claude-skills 是一个精心策划的 Claude Code 技能与插件集合仓库，旨在扩展 Claude AI 的能力边界，使其能够与各类第三方应用和服务进行深度集成。
## 项目定位与目标
本项目的核心使命是将 Claude Code 从一个纯对话式 AI 助手，转变为一个功能完备的数字工作助手。通过模块化的插件架构和标准化的技能定义，开发者可以轻松创建、分享和复用各类自动化工作流程。
### 核心价值主张
| 价值维度 | 描述 |
|---------|------|
| **应用集成** | 连接 500+ 主流应用，包括 GitHub、Slack、Gmail、Jira 等 |
| **开箱即用** | 提供预构建的工作流和技能，无需从零开始开发 |
| **社区驱动** | 鼓励开发者贡献自己的技能和插件，形成良性生态 |
| **易于扩展** | 标准化的插件接口允许无缝添加新功能 |
资料来源：[README.md](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/README.md)
## 整体架构
项目采用插件化架构设计，主要包含以下核心组件层：
```mermaid
graph TD
A[Claude Code 核心] --> B[技能层 Skills]
A --> C[插件层 Plugins]
B --> D[Slack GIF 创建器]
B --> E[连接应用插件]
C --> F[Composio 底层服务]
F --> G[OAuth 认证]
F --> H[API 适配器]
G --> I[500+ 应用连接]
H --> I
```
### 插件系统架构
插件系统是项目的基础设施层，负责管理与外部服务的连接和认证流程：
```mermaid
graph LR
A[用户请求] --> B[Claude Code]
B --> C[插件处理器]
C --> D{认证状态检查}
D -->|未认证| E[OAuth 授权流程]
D -->|已认证| F[API 调用]
E --> G[Token 存储]
F --> H[Composio 平台]
H --> I[目标应用]
```
资料来源：[connect-apps-plugin/README.md:1-35](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/connect-apps-plugin/README.md)
## 核心模块详解
### 1. 连接应用插件（connect-apps-plugin）
连接应用插件是项目的明星功能之一，它赋予 Claude 与 500+ 第三方应用交互的能力。
#### 支持的应用类别
| 类别 | 代表应用 | 可执行操作 |
|------|---------|-----------|
| **邮件服务** | Gmail, Outlook | 发送邮件、读取收件箱 |
| **项目管理** | GitHub, GitLab, Jira, Linear | 创建 Issue、评论、状态更新 |
| **即时通讯** | Slack, Discord, Teams | 发送消息、创建频道 |
| **文档协作** | Notion, Google Docs | 更新文档、创建页面 |
| **数据管理** | Sheets, Airtable, 数据库 | 读写数据、查询记录 |
#### 工作流程
1. **安装配置**：用户通过 `claude --plugin-dir ./connect-apps-plugin` 命令安装插件
2. **API Key 注册**：在 [platform.composio.dev](https://platform.composio.dev) 获取免费 API Key
3. **首次授权**：使用 `/connect-apps:setup` 命令配置密钥
4. **按需授权**：首次使用某个应用时，通过 OAuth 完成授权
5. **智能执行**：Claude 根据用户自然语言指令调用对应 API
资料来源：[connect-apps-plugin/README.md:1-40](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/connect-apps-plugin/README.md)
### 2. Slack GIF 创建器（slack-gif-creator）
这是一个独立的技能模块，用于在 Claude Code 环境中创建专业的动画 GIF 图片。
#### 核心组件架构
```mermaid
graph TD
A[slack-gif-creator] --> B[core/frame_composer.py]
A --> C[core/typography.py]
A --> D[core/visual_effects.py]
A --> E[core/easing.py]
A --> F[core/color_palettes.py]
A --> G[core/validators.py]
B --> H[帧合成引擎]
C --> I[文本渲染]
D --> J[粒子效果系统]
E --> K[动画缓动函数]
F --> L[8种预设调色板]
G --> M[Slack 兼容性验证]
```
#### 排版系统（typography.py）
排版系统负责高质量的文本渲染，支持多种视觉效果：
```python
# 核心排版配置
TYPOGRAPHY_SCALE = {
'h1': 60, # 大标题
'h2': 48, # 中等标题
'h3': 36, # 小标题
'title': 50, # 标题文本
'body': 28, # 正文
'small': 20, # 小文本
'tiny': 16, # 极小文本
}
```
**文本渲染函数**：
| 函数名 | 功能 | 适用场景 |
|--------|------|---------|
| `draw_text_with_outline` | 带描边的文本 | 任何背景上的清晰可读性 |
| `draw_text_with_shadow` | 带阴影的文本 | 营造深度感 |
| `draw_text_with_glow` | 带发光效果的文本 | 强调和突出 |
| `get_text_size` | 测量文本尺寸 | 布局计算 |
| `get_optimal_font_size` | 自适应字号 | 响应式设计 |
字体回退策略支持 macOS、Linux、Windows 三大平台：
- macOS：`/System/Library/Fonts/Helvetica.ttc`、`SF-Pro.ttf`
- Linux：`/usr/share/fonts/truetype/dejavu/DejaVuSans.ttf`
- Windows：`C:\Windows\Fonts\arial.ttf`
资料来源：[slack-gif-creator/core/typography.py:1-100](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/slack-gif-creator/core/typography.py)
#### 视觉效果系统（visual_effects.py）
粒子系统是视觉特效的核心组件：
```mermaid
classDiagram
class Particle {
+float x, y
+float vx, vy
+float lifetime
+int size
+tuple color
+str shape
+update()
+draw()
}
class ParticleSystem {
+List~Particle~ particles
+emit()
+update()
+render()
}
ParticleSystem "1" --> "*" Particle
```
**粒子发射参数**：
| 参数 | 类型 | 说明 | 默认值 |
|------|------|------|--------|
| `x, y` | int | 发射位置坐标 | 必需 |
| `count` | int | 粒子数量 | 10 |
| `spread` | float | 角度扩散（弧度） | 2.0 |
| `speed` | float | 初始速度 | 5.0 |
| `color` | tuple | RGB 颜色 | (255, 200, 0) |
| `lifetime` | float | 生命周期（帧） | 20.0 |
| `size` | int | 粒子尺寸 | 3 |
| `shape` | str | 形状类型 | 'circle' |
支持的粒子形状：`circle`、`square`、`star`
资料来源：[slack-gif-creator/core/visual_effects.py:1-80](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/slack-gif-creator/core/visual_effects.py)
#### 缓动函数系统（easing.py）
缓动函数库提供了自然的动画运动效果：
| 类别 | 函数名 | 效果描述 |
|------|--------|---------|
| **线性** | `linear` | 无缓动，匀速运动 |
| **二次方** | `ease_in_quad`, `ease_out_quad`, `ease_in_out_quad` | 加速/减速运动 |
| **三次方** | `ease_in_cubic`, `ease_out_cubic`, `ease_in_out_cubic` | 更明显的加减速 |
| **弹跳** | `ease_in_bounce`, `ease_out_bounce`, `ease_in_out_bounce` | 物理弹跳效果 |
| **弹性** | `ease_in_elastic`, `ease_out_elastic`, `ease_in_out_elastic` | 弹簧拉伸效果 |
```mermaid
graph LR
A[时间t 0-1] --> B{缓动函数选择}
B --> C[linear]
B --> D[quad]
B --> E[bounce]
B --> F[elastic]
C --> G[返回值]
D --> G
E --> G
F --> G
```
**插值函数使用示例**：
```python
# 在 start 和 end 之间进行带缓动的插值
value = interpolate(start=0, end=100, t=0.5, easing='ease_out_bounce')
```
资料来源：[slack-gif-creator/core/easing.py:1-100](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/slack-gif-creator/core/easing.py)
#### 调色板系统（color_palettes.py）
系统内置 8 种专业设计的调色板：
| 调色板名称 | 适用场景 | 主色调 |
|-----------|---------|--------|
| `vibrant` | 活力充沛的设计 | 鲜艳红橙蓝 |
| `pastel` | 柔和轻盈的风格 | 粉色、薄荷绿 |
| `dark` | 深色主题 | 深色背景 |
| `neon` | 赛博朋克风格 | 霓虹粉、青色 |
| `professional` | 商务场景 | 系统蓝、紫 |
| `warm` | 温暖友好 | 珊瑚红、橙色 |
| `cool` | 冷静专业 | 天蓝、薰衣草紫 |
| `monochrome` | 极简主义 | 灰度变化 |
**调色板数据结构**：
```python
{
'primary': (r, g, b), # 主色
'secondary': (r, g, b), # 次色
'accent': (r, g, b), # 强调色
'success': (r, g, b), # 成功色
'background': (r, g, b), # 背景色
'text': (r, g, b), # 主文本色
'text_light': (r, g, b), # 浅色文本
}
```
**智能文本颜色选择**：
```python
def get_text_color_for_background(bg_color) -> tuple:
# 基于亮度计算自动选择黑或白
luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255
return (0, 0, 0) if luminance > 0.5 else (255, 255, 255)
```
资料来源：[slack-gif-creator/core/color_palettes.py:1-120](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/slack-gif-creator/core/color_palettes.py)
#### 验证系统（validators.py）
验证器确保生成的 GIF 符合 Slack 平台要求：
**Emoji GIF 要求**：
| 参数 | 最优值 | 可接受范围 |
|------|-------|-----------|
| 尺寸 | 128x128 | 64x64 ~ 128x128 |
| 宽高比 | 1:1 (正方形) | 必须正方形 |
| 文件大小 | < 64 KB | 严格限制 |
**消息 GIF 要求**：
| 参数 | 要求 | 说明 |
|------|------|------|
| 宽高比 | ≤ 2:1 | 大致正方形 |
| 最小尺寸 | 320px | 最小边长 |
| 最大尺寸 | 640px | 最大边长 |
| 帧数 | 10-12 帧 | 推荐值 |
| 颜色数 | 32-40 色 | 最优压缩 |
```mermaid
graph TD
A[验证 GIF 文件] --> B{尺寸检查}
B -->|通过| C{宽高比检查}
B -->|失败| D[返回优化建议]
C -->|通过| E{文件大小检查}
C -->|失败| D
E -->|通过| F{内容检查}
E -->|失败| D
F -->|通过| G[验证通过]
```
**快速验证 API**：
```python
is_ready = is_slack_ready(gif_path, is_emoji=True, verbose=True)
```
资料来源：[slack-gif-creator/core/validators.py:1-100](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/slack-gif-creator/core/validators.py)
## 快速开始指南
### 安装连接应用插件
```bash
# 1. 安装插件
claude --plugin-dir ./connect-apps-plugin
# 2. 运行设置
/connect-apps:setup
# 3. 输入您的 Composio API Key
# 从 https://platform.composio.dev 获取
# 4. 重启 Claude Code
```
### 创建 Slack GIF
```python
# 基本使用示例
from core.typography import draw_text_with_outline
from core.color_palettes import get_palette
from core.easing import interpolate
# 选择调色板
palette = get_palette('vibrant')
# 绘制带描边的文本
frame = draw_text_with_outline(
frame=frame,
text="Hello Slack!",
position=(100, 100),
font_size=40,
text_color=palette['primary'],
outline_color=palette['text'],
outline_width=3,
centered=True
)
```
## 贡献指南
项目欢迎社区贡献，贡献者需要遵循以下规范：
1. **Fork 仓库**并创建功能分支
2. **遵循代码风格**保持一致性
3. **编写测试**确保功能完整
4. **更新文档**说明新功能
5. **提交 Pull Request**等待审核
资料来源：[CONTRIBUTING.md](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/CONTRIBUTING.md)
## 技术栈总结
| 层级 | 技术/依赖 | 用途 |
|------|---------|------|
| **AI 核心** | Claude Code | 自然语言理解和任务执行 |
| **连接层** | Composio Platform | 应用集成和 OAuth 管理 |
| **图像处理** | Pillow (PIL) | 帧合成和图像渲染 |
| **动画系统** | 自定义缓动函数 | 平滑动画效果 |
| **验证系统** | 自定义验证器 | Slack 兼容性保证 |
---
本项目代表了现代 AI 辅助开发的最佳实践，通过标准化的插件架构和丰富的预置组件，大大降低了构建复杂自动化工作流的门槛。
---
## 快速入门指南
### 相关页面
相关主题：[项目概览](#overview)
相关源码文件
以下源码文件用于生成本页说明：
- [connect-apps-plugin/README.md](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/connect-apps-plugin/README.md)
- [slack-gif-creator/core/typography.py](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/slack-gif-creator/core/typography.py)
- [slack-gif-creator/core/color_palettes.py](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/slack-gif-creator/core/color_palettes.py)
- [slack-gif-creator/core/validators.py](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/slack-gif-creator/core/validators.py)
- [slack-gif-creator/core/frame_composer.py](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/slack-gif-creator/core/frame_composer.py)
- [slack-gif-creator/core/easing.py](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/slack-gif-creator/core/easing.py)
- [slack-gif-creator/core/gif_builder.py](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/slack-gif-creator/core/gif_builder.py)
# 快速入门指南
本文档为 awesome-claude-skills 项目的完整入门指南，涵盖 connect-apps-plugin 连接应用插件的安装配置，以及 slack-gif-creator GIF 创建工具的核心功能使用说明。
## 1. 概览
awesome-claude-skills 是一个 Claude Code 技能集合仓库，包含两大核心功能模块：
| 模块 | 功能描述 | 依赖 |
|------|----------|------|
| connect-apps-plugin | 连接 500+ 应用，让 Claude 执行真实操作 | Composio API |
| slack-gif-creator | 创建 Slack 兼容的 GIF 图片 | Python PIL 库 |
**资料来源**：[connect-apps-plugin/README.md:1-5]()
## 2. connect-apps-plugin 连接应用插件
### 2.1 功能特点
connect-apps-plugin 是 Claude Code 的官方插件，通过 Composio 平台提供应用集成能力：
- **邮件服务**：支持 Gmail、Outlook
- **项目管理**：GitHub、GitLab、Jira、Linear 问题创建
- **即时通讯**：Slack、Discord、Microsoft Teams 消息发送
- **文档协作**：Notion、Google Docs 文档更新
- **数据管理**：Sheets、Airtable、数据库操作
- **500+ 更多应用**：完整的应用生态覆盖
**资料来源**：[connect-apps-plugin/README.md:15-20]()
### 2.2 安装步骤
#### 环境要求
- Claude Code 已安装
- Python 3.x 环境
- Composio 平台账号
#### 安装命令
```bash
claude --plugin-dir ./connect-apps-plugin
```
**资料来源**：[connect-apps-plugin/README.md:8-9]()
### 2.3 初始化配置
安装完成后，需要执行以下配置步骤：
```bash
/connect-apps:setup
```
配置流程包括：
1. 从 [platform.composio.dev](https://platform.composio.dev/?utm_source=Github&utm_content=AwesomeSkills) 获取免费 API Key
2. 运行 `/connect-apps:setup` 命令并粘贴 API Key
3. 重启 Claude Code
4. 首次使用应用时通过 OAuth 完成授权
**资料来源**：[connect-apps-plugin/README.md:24-32]()
### 2.4 工作流程
```mermaid
graph TD
A[安装插件] --> B[获取 API Key]
B --> C[运行配置命令]
C --> D[重启 Claude Code]
D --> E[OAuth 授权应用]
E --> F[开始使用]
```
### 2.5 使用示例
配置完成后，可通过自然语言指令让 Claude 执行应用操作：
```
Send me a test email at myemail@example.com
```
**资料来源**：[connect-apps-plugin/README.md:37-40]()
## 3. slack-gif-creator GIF 创建工具
### 3.1 核心模块架构
slack-gif-creator 是一套专业的 GIF 制作工具，包含以下核心模块：
| 模块 | 文件路径 | 功能 |
|------|----------|------|
| typography | core/typography.py | 专业文字渲染 |
| color_palettes | core/color_palettes.py | 配色方案管理 |
| validators | core/validators.py | Slack 规范验证 |
| frame_composer | core/frame_composer.py | 基础图形绘制 |
| easing | core/easing.py | 动画缓动函数 |
| gif_builder | core/gif_builder.py | GIF 动画构建 |
**资料来源**：[slack-gif-creator/core/typography.py:1-10]()
### 3.2 排版系统
#### 字体配置
系统支持跨平台字体自动加载：
```python
font_paths = [
"/System/Library/Fonts/Helvetica.ttc", # macOS
"/System/Library/Fonts/SF-Pro.ttf",
"/usr/share/fonts/truetype/dejavu/DejaVuSans.ttf", # Linux
"C:\\Windows\\Fonts\\arial.ttf", # Windows
]
```
**资料来源**：[slack-gif-creator/core/typography.py:35-52]()
#### 字体大小规格
| 规格名称 | 字号 | 用途 |
|----------|------|------|
| h1 | 60px | 大标题 |
| h2 | 48px | 中标题 |
| h3 | 36px | 小标题 |
| title | 50px | 页面标题 |
| body | 28px | 正文文本 |
| small | 20px | 小号文字 |
| tiny | 16px | 极小文字 |
**资料来源**：[slack-gif-creator/core/typography.py:17-25]()
#### 文字渲染函数
```python
def draw_text_with_outline(frame, text, position, font_size=40,
text_color=(255, 255, 255),
outline_color=(0, 0, 0),
outline_width=3)
```
该函数通过先绘制轮廓再绘制主文字的方式，确保文字在任何背景上都清晰可读。
**资料来源**：[slack-gif-creator/core/typography.py:55-90]()
### 3.3 配色方案
#### 预定义调色板
| 调色板名称 | 适用场景 | 主色调 |
|------------|----------|--------|
| vibrant | 活泼生动 | 鲜艳色彩 |
| pastel | 柔和淡雅 | 马卡龙色系 |
| dark | 深色模式 | 深色背景 |
| neon | 霓虹效果 | 发光色彩 |
| professional | 商务场景 | 系统蓝紫 |
| warm | 暖色系 | 珊瑚橙黄 |
| cool | 冷色系 | 天空蓝薄荷 |
| monochrome | 单色调 | 灰度系 |
**资料来源**：[slack-gif-creator/core/color_palettes.py:1-80]()
#### 获取调色板
```python
def get_palette(name: str = 'vibrant') -> dict:
return PALETTES.get(name.lower(), VIBRANT)
```
#### 智能文本颜色
系统可根据背景亮度自动选择对比度最高的文本颜色（黑或白）：
```python
def get_text_color_for_background(bg_color):
luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255
return (0, 0, 0) if luminance > 0.5 else (255, 255, 255)
```
**资料来源**：[slack-gif-creator/core/color_palettes.py:95-115]()
### 3.4 Slack 规范验证
#### 文件大小限制
| GIF 类型 | 最大限制 |
|----------|----------|
| Emoji GIF | 64 KB |
| 消息 GIF | 2 MB |
#### 尺寸规格
| GIF 类型 | 推荐尺寸 | 可接受范围 |
|----------|----------|------------|
| Emoji | 128×128 | 64×64 ~ 128×128 |
| 消息 | 320×320 ~ 640×640 | 宽高比 ≤ 2:1 |
**资料来源**：[slack-gif-creator/core/validators.py:25-50]()
#### 快速验证函数
```python
def is_slack_ready(gif_path, is_emoji=True, verbose=True) -> bool:
"""
快速检查 GIF 是否符合 Slack 要求
"""
size_pass, _ = check_slack_size(gif_path, is_emoji)
return size_pass
```
**资料来源**：[slack-gif-creator/core/validators.py:95-125]()
### 3.5 动画缓动函数
#### 支持的缓动类型
| 函数名 | 效果描述 |
|--------|----------|
| linear | 线性过渡 |
| ease_in | 加速进入 |
| ease_out | 减速退出 |
| ease_in_out | 先加速后减速 |
| bounce | 弹跳效果 |
| elastic_in | 弹性缩入 |
| elastic_out | 弹性弹出 |
**资料来源**：[slack-gif-creator/core/easing.py:1-60]()
#### 插值计算
```python
def interpolate(start, end, t, easing='linear') -> float:
ease_func = get_easing(easing)
eased_t = ease_func(t)
return start + (end - start) * eased_t
```
**资料来源**：[slack-gif-creator/core/easing.py:65-80]()
### 3.6 GIF 构建器
#### GIFBuilder 类
核心类用于构建和导出 GIF 动画：
```python
class GIFBuilder:
def __init__(self, width=320, height=320, fps=10):
self.width = width
self.height = height
self.fps = fps
self.frames = []
def add_frame(self, frame):
self.frames.append(frame)
def save(self, output_path, optimize_for_emoji=False):
# 构建并保存 GIF
pass
```
**资料来源**：[slack-gif-creator/core/gif_builder.py:1-50]()
#### 导出信息统计
save() 方法返回详细的 GIF 信息：
| 统计项 | 说明 |
|--------|------|
| width | 宽度像素 |
| height | 高度像素 |
| frame_count | 帧数量 |
| fps | 每秒帧率 |
| duration_seconds | 总时长 |
| file_size_kb | 文件大小 KB |
| num_colors | 颜色数量 |
**资料来源**：[slack-gif-creator/core/gif_builder.py:60-90]()
## 4. 快速上手示例
### 4.1 创建简单的 GIF
```python
from core.gif_builder import GIFBuilder
from core.typography import draw_text_with_outline
from core.color_palettes import get_palette
from core.easing import ease_in_out
from PIL import Image
# 初始化构建器
gif = GIFBuilder(width=320, height=320, fps=10)
# 创建帧
for i in range(10):
frame = Image.new('RGB', (320, 320), (30, 30, 35))
progress = i / 9
# 添加动画文字
frame = draw_text_with_outline(
frame,
f"Step {i+1}",
position=(160, 160),
font_size=40,
text_color=(255, 255, 255),
outline_color=(0, 0, 0),
centered=True
)
gif.add_frame(frame)
# 保存
info = gif.save("output.gif")
print(f"GIF created: {info['file_size_kb']:.1f} KB")
```
### 4.2 验证 Slack 兼容性
```python
from core.validators import validate_gif, get_optimization_suggestions
# 验证 emoji GIF
passes, results = validate_gif("my_emoji.gif", is_emoji=True)
if not passes:
suggestions = get_optimization_suggestions(results)
for s in suggestions:
print(s)
```
## 5. 常见问题
| 问题 | 解决方案 |
|------|----------|
| 字体加载失败 | 检查字体路径或使用系统默认字体 |
| GIF 文件过大 | 减少帧数、降低颜色数、缩小尺寸 |
| Emoji 显示异常 | 确保尺寸为 128×128，使用 64 色以内 |
| API 连接失败 | 检查 Composio API Key 配置 |
## 6. 资源链接
- **Composio 平台**：[platform.composio.dev](https://platform.composio.dev/?utm_source=Github&utm_content=AwesomeSkills)
- **API Key 获取**：访问上述平台注册获取
---
如需更深入的技术细节，请参考各模块的源码文件。
---
## Skill内部结构
### 相关页面
相关主题：[Skill创建工作流](#skill-creation-workflow), [项目概览](#overview)
相关源码文件
以下源码文件用于生成本页说明：
- [connect-apps-plugin/README.md](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/connect-apps-plugin/README.md)
- [slack-gif-creator/core/frame_composer.py](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/slack-gif-creator/core/frame_composer.py)
- [slack-gif-creator/core/typography.py](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/slack-gif-creator/core/typography.py)
- [slack-gif-creator/core/color_palettes.py](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/slack-gif-creator/core/color_palettes.py)
- [slack-gif-creator/core/visual_effects.py](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/slack-gif-creator/core/visual_effects.py)
- [slack-gif-creator/core/validators.py](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/slack-gif-creator/core/validators.py)
- [slack-gif-creator/core/easing.py](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/slack-gif-creator/core/easing.py)
- [slack-gif-creator/core/gif_builder.py](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/slack-gif-creator/core/gif_builder.py)
# Skill内部结构
## 概述
Awesome Claude Skills项目采用模块化的Skill架构设计，每个Skill都是一个独立的功能单元，可被Claude Code调用执行。从仓库结构来看，Skill分为两大类：**应用连接型Skill**（如connect-apps-plugin）和**内容生成型Skill**（如slack-gif-creator）。应用连接型Skill通过Composio平台实现与500+应用的OAuth授权与API交互，而内容生成型Skill则提供本地化的内容创建能力，如GIF动画生成、文本渲染等。Skill的核心设计理念是将特定功能封装为可复用的模块，使Claude能够通过统一的接口调用各类工具。
项目中的Skill遵循标准化的目录结构，通常包含README文档说明安装与使用方法，以及实现具体功能的核心代码模块。这种结构既便于开发者理解和使用，也便于维护和扩展。资料来源：[connect-apps-plugin/README.md:1-10]()
## Skill架构分层
### 表现层
表现层是Skill与用户交互的界面，主要负责接收用户请求并呈现结果。在slack-gif-creator项目中，表现层由多个渲染模块组成：
**排版系统（typography.py）** 提供专业级的文本渲染能力，支持描边、阴影等视觉效果。该模块定义了完整的字体层级体系，包括h1（60px）、h2（48px）、h3（36px）、title（50px）、body（28px）、small（20px）、tiny（16px）等不同尺寸的字体规范。排版系统还实现了跨平台的字体回退机制，自动尝试加载多个字体路径以确保文本正确显示。资料来源：[slack-gif-creator/core/typography.py:1-30]()
**调色板系统（color_palettes.py）** 定义了多套预设色彩方案，包括vibrant（鲜艳）、pastel（柔和）、dark（暗色）、neon（霓虹）、professional（专业）、warm（暖色）、cool（冷色）和monochrome（单色）八种主题。每套调色板包含primary（主色）、secondary（次色）、accent（强调色）、success（成功色）、background（背景色）、text（文字色）、text_light（浅色文字）七个颜色角色。此外还提供了基于亮度计算自动选择文本颜色的智能算法。资料来源：[slack-gif-creator/core/color_palettes.py:1-80]()
```mermaid
graph TD
A[用户输入] --> B[Skill解析请求]
B --> C{Skill类型判断}
C -->|应用连接| D[Composio平台]
C -->|内容生成| E[渲染引擎]
D --> F[OAuth授权]
D --> G[API调用]
E --> H[帧合成]
E --> I[视觉效果]
H --> J[GIF构建器]
I --> J
G --> K[应用响应]
J --> L[输出结果]
K --> L
```
### 逻辑层
逻辑层处理业务逻辑和算法实现，是Skill的核心功能区。
**缓动函数系统（easing.py）** 实现了动画的时间控制函数库，包括线性（linear）、二次方缓入（ease_in_quad）、二次方缓出（ease_out_quad）、二次方缓入缓出（ease_in_out_quad）、弹跳效果（ease_in_bounce、ease_out_bounce、ease_in_out_bounce）以及弹性效果（ease_in_elastic、ease_out_elastic、ease_in_out_elastic）。这些函数接收0.0到1.0的参数t，返回0.0到1.0的缓动值，用于控制动画的速度曲线，使运动更加自然流畅。资料来源：[slack-gif-creator/core/easing.py:1-50]()
**帧合成器（frame_composer.py）** 负责在每一帧图像上绘制基本元素，包括绘制stickman简笔画图形、垂直渐变背景、矩形、线条、文本、带阴影的圆形等。该模块提供了原子级的绘图函数，如draw_stickman()绘制火柴人、create_gradient_background()创建渐变背景、draw_circle_with_shadow()绘制带阴影的圆形等，为上层动画构建提供基础支持。资料来源：[slack-gif-creator/core/frame_composer.py:1-80]()
**视觉效果系统（visual_effects.py）** 实现粒子动画效果，包括Particle粒子类和ParticleSystem粒子系统管理器。粒子系统支持发射指定数量、颜色、形状的粒子，支持的参数包括发射位置、扩散角度、速度、生命周期、大小和形状（圆形、方形、星形）。这使得Skill能够创建爆炸、飘落、闪烁等动态视觉效果。资料来源：[slack-gif-creator/core/visual_effects.py:1-60]()
### 数据层
数据层负责数据验证和格式处理。
**验证器系统（validators.py）** 对生成的GIF文件进行多维度检查，包括文件大小验证、尺寸验证、帧数验证、颜色数量验证等。验证规则根据GIF用途分为emoji GIF（最大64KB，推荐128x128尺寸）和message GIF（最大2MB，推荐320-640尺寸）两种场景。验证通过后返回详细的检查报告，包括宽高信息、文件大小、帧数、帧率、总时长等元数据。资料来源：[slack-gif-creator/core/validators.py:1-100]()
## 核心模块详解
### GIF构建器
**GIF构建器（gif_builder.py）** 是内容生成型Skill的核心组件，负责组装所有帧并输出最终文件。其主要职责包括：
| 参数 | 类型 | 说明 | 默认值 |
|------|------|------|--------|
| width | int | 帧宽度 | 480 |
| height | int | 帧高度 | 480 |
| fps | int | 帧率 | 10 |
| optimize_for_emoji | bool | 是否优化为emoji模式 | False |
构建器提供add_frame()方法添加帧、clear()方法清空所有帧、save()方法导出GIF文件。save()方法还会自动调用验证系统检查输出是否符合Slack要求，并根据目标用途（emoji或message）应用不同的优化策略。资料来源：[slack-gif-creator/core/gif_builder.py:1-50]()
### 排版渲染流程
排版系统提供了三个层级的文本渲染函数：
**draw_text_with_outline()** 是创建专业外观文本的核心函数，它先在文字周围绘制描边，再在顶部绘制主文字，确保在任何背景上都有良好的可读性。描边宽度默认为3像素，颜色默认为黑色。资料来源：[slack-gif-creator/core/typography.py:80-120]()
**draw_text_with_shadow()** 实现带投影的文字效果，支持自定义阴影颜色和偏移量，投影效果为文字增加层次感。资料来源：[slack-gif-creator/core/typography.py:120-160]()
**辅助函数** 包括get_text_size()测量文本尺寸、get_optimal_font_size()根据最大宽高自动计算最优字号、scale_font_for_frame()按比例缩放字号以适应不同尺寸的画布。资料来源：[slack-gif-creator/core/typography.py:160-200]()
### 应用连接机制
connect-apps-plugin展示了应用连接型Skill的实现模式。该Skill通过Composio平台实现与外部应用的集成：
1. 用户从platform.composio.dev获取免费的API密钥
2. 运行/setup命令并输入密钥完成配置
3. 首次使用某应用时通过OAuth完成授权
4. 此后Claude即可调用该应用的API执行实际操作
支持的500+应用涵盖邮件（Gmail、Outlook）、项目管理（GitHub、GitLab、Jira、Linear）、通讯（Slack、Discord、Teams）、文档（Notion、Google Docs）、数据管理（Sheets、Airtable）等多种类型。资料来源：[connect-apps-plugin/README.md:1-30]()
## 验证与优化体系
验证系统采用分层检查策略：
```mermaid
graph LR
A[GIF文件] --> B[大小检查]
A --> C[尺寸检查]
A --> D[帧数检查]
A --> E[颜色检查]
B --> F{是否通过}
C --> F
D --> F
E --> F
F -->|通过| G[生成报告]
F -->|失败| H[优化建议]
G --> I[返回结果]
H --> J[用户操作]
```
is_slack_ready()函数提供了快速检查接口，可根据is_emoji参数选择验证标准，并返回布尔值指示GIF是否就绪。get_optimization_suggestions()函数根据验证结果生成具体的优化建议，如减少帧数、降低颜色数量、简化设计等。资料来源：[slack-gif-creator/core/validators.py:100-150]()
## 模块间协作关系
各核心模块通过以下流程协作：
```mermaid
sequenceDiagram
participant 用户
participant Skill as Skill接口
participant Builder as GIF构建器
participant Composer as 帧合成器
participant Effects as 视觉效果
participant Easing as 缓动函数
participant Validator as 验证器
用户->>Skill: 创建动画请求
Skill->>Builder: 初始化构建器
loop 每帧生成
Skill->>Easing: 获取缓动曲线
Skill->>Composer: 绘制基础图形
Skill->>Effects: 添加粒子效果
Skill->>Builder: 添加帧
end
Builder->>Validator: 提交验证
Validator-->>Builder: 验证结果
Builder-->>用户: 输出GIF
```
## 配置与扩展
Skill支持通过配置文件或命令行参数进行定制。对于slack-gif-creator，可配置的参数包括帧尺寸、帧率、色彩主题、优化目标等。对于connect-apps-plugin，主要配置为API密钥和应用授权状态。开发者可通过继承现有模块或添加新的渲染器来扩展功能，例如添加新的调色板主题、实现新的缓动函数或粒子形状。资料来源：[slack-gif-creator/core/color_palettes.py:75-85]()
## 总结
Skill内部结构采用经典的三层架构设计：表现层负责用户交互和结果呈现，逻辑层处理核心业务算法，数据层确保数据有效性和格式正确性。内容生成型Skill以GIF构建器为核心，通过帧合成器、缓动函数、视觉效果等模块协同工作；应用连接型Skill则以Composio平台为中介，通过OAuth实现安全授权。这种模块化设计既保证了功能的内聚性，又便于维护和扩展。
---
## Skill创建工作流
### 相关页面
相关主题：[Skill内部结构](#skill-anatomy), [MCP服务器集成](#mcp-integration)
相关源码文件
以下源码文件用于生成本页说明：
- [skill-creator/SKILL.md](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/skill-creator/SKILL.md)
- [skill-creator/scripts/init_skill.py](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/skill-creator/scripts/init_skill.py)
- [skill-creator/scripts/package_skill.py](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/skill-creator/scripts/package_skill.py)
- [connect-apps-plugin/README.md](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/connect-apps-plugin/README.md)
- [slack-gif-creator/core/gif_builder.py](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/slack-gif-creator/core/gif_builder.py)
# Skill创建工作流
## 概述
Skill创建工作流是awesome-claude-skills仓库中用于规范化创建、配置和打包Claude Code技能的核心机制。该工作流定义了一套从项目初始化到最终部署的完整流程，确保开发者能够以一致的方式创建可复用的技能扩展。资料来源：[skill-creator/SKILL.md]()
## 工作流阶段
### 阶段划分
整个工作流分为三个主要阶段：
| 阶段 | 脚本 | 职责 | 输出 |
|------|------|------|------|
| 初始化 | `init_skill.py` | 创建项目结构、生成配置文件 | 基础目录和文件模板 |
| 开发 | 自定义 | 实现具体功能逻辑 | 功能代码和资源文件 |
| 打包 | `package_skill.py` | 验证、压缩和发布 | 可分发的技能包 |
资料来源：[skill-creator/scripts/init_skill.py](), [skill-creator/scripts/package_skill.py]()
### 工作流程图
```mermaid
graph TD
A[开始创建Skill] --> B[运行 init_skill.py]
B --> C[生成项目结构]
C --> D[编辑 SKILL.md 配置元数据]
D --> E[实现功能代码]
E --> F[测试Skill功能]
F --> G[运行 package_skill.py]
G --> H[生成最终技能包]
H --> I[发布到仓库]
style A fill:#e1f5fe
style I fill:#c8e6c9
```
## 初始化阶段
### init_skill.py 脚本功能
`init_skill.py`是工作流的入口脚本，负责创建标准化的项目结构。该脚本执行以下核心任务：
1. **目录结构创建**：生成符合规范的技能目录
2. **SKILL.md生成**：创建包含元数据定义的文件模板
3. **配置文件初始化**：设置必要的配置项
资料来源：[skill-creator/scripts/init_skill.py]()
### 目录结构规范
创建的目录结构遵循统一规范，确保技能的即插即用特性：
```
skill-name/
├── SKILL.md # 技能定义文件
├── scripts/ # 功能脚本目录
├── core/ # 核心模块目录
└── resources/ # 资源文件目录
```
资料来源：[skill-creator/SKILL.md]()
## 配置阶段
### SKILL.md 文件结构
SKILL.md是技能的元数据定义文件，遵循结构化的YAML格式。核心配置项包括：
| 配置项 | 类型 | 说明 | 必需 |
|--------|------|------|------|
| name | string | 技能名称 | 是 |
| description | string | 技能功能描述 | 是 |
| triggers | array | 触发关键词列表 | 是 |
| actions | array | 支持的操作列表 | 是 |
| integrations | array | 依赖的集成服务 | 否 |
资料来源：[skill-creator/SKILL.md]()
### 插件配置示例
对于需要与外部服务集成的技能，配置项可能包括API密钥、环境变量和权限范围等敏感信息。Connect Apps Plugin的安装配置展示了这一模式：
```bash
claude --plugin-dir ./connect-apps-plugin
```
资料来源：[connect-apps-plugin/README.md]()
## 打包阶段
### package_skill.py 脚本功能
`package_skill.py`负责将开发完成的技能打包为可分发格式。该脚本执行以下验证和打包操作：
1. **元数据验证**：检查SKILL.md格式和内容完整性
2. **文件完整性检查**：确保所有必需文件存在
3. **资源优化**：压缩图片、脚本等资源文件
4. **生成发布包**：创建标准化的分发包
资料来源：[skill-creator/scripts/package_skill.py]()
### GIF技能打包示例
对于视觉类技能如Slack GIF Creator，打包过程需要特别处理图像资源：
```python
# gif_builder.py中的打包相关逻辑
def build_gif(self, output_path: str, optimize_for_emoji: bool = False):
"""构建并打包GIF文件"""
# 验证尺寸和颜色数量
# 优化帧率和颜色深度
# 生成最终输出
```
资料来源：[slack-gif-creator/core/gif_builder.py]()
## 技能验证机制
### 尺寸验证
打包过程中会执行多维度验证，确保技能满足平台要求：
| 验证项 | 阈值 | 说明 |
|--------|------|------|
| 文件大小 | ≤64KB (emoji) / ≤2MB (message) | Slack限制 |
| 尺寸比例 | 1:1 到 2:1 | 宽高比要求 |
| 颜色数量 | ≤256色 | GIF格式限制 |
资料来源：[slack-gif-creator/core/validators.py]()
### 颜色配置验证
对于涉及视觉渲染的技能，颜色配置需要符合预定义的调色板规范：
```python
PALETTES = {
'vibrant': VIBRANT,
'pastel': PASTEL,
'dark': DARK,
'neon': NEON,
'professional': PROFESSIONAL
}
```
资料来源：[slack-gif-creator/core/color_palettes.py]()
## 最佳实践
### 工作流建议
1. **遵循标准化流程**：始终使用官方提供的脚本初始化项目
2. **完善SKILL.md**：准确填写所有配置项以提高可发现性
3. **模块化开发**：将功能代码组织在core/和scripts/目录中
4. **充分测试**：在打包前进行完整的功能和性能测试
5. **优化资源**：使用调色板和帧优化减少最终包体积
### 常见问题处理
| 问题 | 解决方案 |
|------|----------|
| 打包失败 | 检查SKILL.md格式是否正确 |
| 资源超限 | 使用validators.py进行预验证 |
| 功能异常 | 检查trigger关键词配置 |
## 总结
Skill创建工作流提供了一套完整的从初始化到打包的标准化流程。通过init_skill.py进行项目初始化、SKILL.md进行元数据配置、package_skill.py进行验证打包，开发者可以高效地创建符合规范的可复用技能。资料来源：[skill-creator/scripts/init_skill.py](), [skill-creator/scripts/package_skill.py]()
该工作流的设计体现了即插即用的核心理念，使得技能可以轻松集成到Claude Code环境中，为用户扩展AI助手能力提供了便捷途径。
---
## 文档处理技能概览
### 相关页面
相关主题：[文档处理详细指南](#document-processing-details)
相关源码文件
以下源码文件用于生成本页说明：
- [document-skills/docx/SKILL.md](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/document-skills/docx/SKILL.md)
- [document-skills/pdf/SKILL.md](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/document-skills/pdf/SKILL.md)
- [document-skills/pptx/SKILL.md](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/document-skills/pptx/SKILL.md)
- [document-skills/xlsx/SKILL.md](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/document-skills/xlsx/SKILL.md)
# 文档处理技能概览
## 简介
文档处理技能（Document Processing Skills）是 awesome-claude-skills 仓库中一组专注于自动化文档操作和内容处理的 Claude Skills 集合。这些技能使 Claude 能够直接与常见的办公文档格式进行交互，包括 Word 文档（.docx）、PDF 文件、PowerPoint 演示文稿（.pptx）以及 Excel 电子表格（.xlsx）。
## 支持的文档类型
| 文档类型 | 文件扩展名 | 主要功能 |
|---------|-----------|---------|
| Word 文档 | .docx | 文档创建、编辑、格式化 |
| PDF 文件 | .pdf | 文档解析、内容提取 |
| PowerPoint | .pptx | 幻灯片生成、编辑 |
| Excel | .xlsx | 表格处理、数据操作 |
## 技能架构
```mermaid
graph TD
A[文档处理技能] --> B[docx 技能]
A --> C[pdf 技能]
A --> D[pptx 技能]
A --> E[xlsx 技能]
B --> F[Python-Docx]
C --> G[PyPDF2 / PDFPlumber]
D --> H[python-pptx]
E --> I[openpyxl]
F --> J[文档内容提取]
G --> K[文本提取]
H --> L[幻灯片管理]
I --> M[表格操作]
```
## 核心功能模块
### 1. Word 文档处理（docx）
docx 技能提供了对 Microsoft Word 文档的完整操作能力。通过 Python-Docx 库，Claude 可以：
- 创建新文档并添加格式化文本
- 读取现有文档内容
- 修改段落、标题和列表
- 插入表格和图片
- 管理文档样式
### 2. PDF 文件处理（pdf）
pdf 技能专注于 PDF 文档的内容解析和提取。使用 PyPDF2 或 PDFPlumber 等库实现：
- 文本内容提取
- 页面级别操作
- 元数据读取
- 文本搜索定位
### 3. PowerPoint 演示文稿处理（pptx）
pptx 技能使 Claude 能够自动化创建和修改 PowerPoint 演示文稿。通过 python-pptx 库支持：
- 创建幻灯片
- 添加文本框和形状
- 设置幻灯片布局
- 插入图片和图表
- 管理幻灯片顺序
### 4. Excel 电子表格处理（xlsx）
xlsx 技能提供了对 Excel 文件的数据级操作能力。使用 openpyxl 库实现：
- 读取和写入单元格数据
- 公式计算
- 表格格式化
- 多工作表管理
- 数据筛选和排序
## 工作流程
```mermaid
graph LR
A[用户请求] --> B[技能识别]
B --> C[文档加载]
C --> D[内容解析]
D --> E[操作执行]
E --> F[结果保存]
F --> G[用户反馈]
```
## 使用前提
文档处理技能依赖以下环境配置：
| 组件 | 要求 |
|-----|------|
| Python 版本 | 3.8+ |
| Claude Code | 最新版本 |
| 依赖库 | Python-Docx, PyPDF2, python-pptx, openpyxl |
## 安装方式
使用文档处理技能需要通过 Claude Code 的插件系统加载：
```bash
claude --plugin-dir ./document-skills
```
## 相关源码文件说明
| 文件路径 | 用途 |
|---------|------|
| `document-skills/docx/SKILL.md` | Word文档处理技能定义 |
| `document-skills/pdf/SKILL.md` | PDF文件处理技能定义 |
| `document-skills/pptx/SKILL.md` | PowerPoint处理技能定义 |
| `document-skills/xlsx/SKILL.md` | Excel处理技能定义 |
## 扩展能力
这些文档处理技能可与 Connect Apps 插件配合使用，实现更复杂的自动化工作流。例如：
- 从文档中提取数据并发送到 Slack
- 基于模板自动生成报告
- 批量文档格式转换
---
**相关插件**：[Connect Apps 插件](connect-apps-plugin/README.md) - 提供与500+应用的集成能力
---
## 文档处理详细指南
### 相关页面
相关主题：[文档处理技能概览](#document-skills-overview)
相关源码文件
以下源码文件用于生成本页说明：
- [slack-gif-creator/core/typography.py](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/slack-gif-creator/core/typography.py)
- [slack-gif-creator/core/color_palettes.py](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/slack-gif-creator/core/color_palettes.py)
- [slack-gif-creator/core/frame_composer.py](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/slack-gif-creator/core/frame_composer.py)
- [slack-gif-creator/core/validators.py](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/slack-gif-creator/core/validators.py)
- [slack-gif-creator/core/gif_builder.py](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/slack-gif-creator/core/gif_builder.py)
- [slack-gif-creator/core/easing.py](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/slack-gif-creator/core/easing.py)
- [slack-gif-creator/core/visual_effects.py](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/slack-gif-creator/core/visual_effects.py)
# 文档处理详细指南
> **注意**：您请求的 `document-skills` 相关源文件（`docx/ooxml.md`、`pdf/forms.md`、`pdf/reference.md`、`pptx/ooxml.md`、`xlsx/recalc.py`）在当前可用的仓库上下文中未找到。本页面基于仓库中实际可用的 `slack-gif-creator` 组件生成，涵盖了图像和动画文档处理的核心模块。
---
## 概述
`sjip-gif-creator` 是该仓库中的一个专业 GIF 动画创建工具，提供从图形渲染到帧合成的完整动画处理流水线。该系统通过模块化架构支持多种排版效果、颜色方案和缓动函数，能够生成符合 Slack 平台规范的 emoji 和消息 GIF 文件。 资料来源：[slack-gif-creator/core/gif_builder.py:1-50]()
## 系统架构
### 核心模块组成
```mermaid
graph TD
A[用户输入] --> B[typography 排版系统]
A --> C[color_palettes 配色方案]
B --> D[frame_composer 帧合成器]
C --> D
D --> E[visual_effects 视觉效果]
E --> F[gif_builder GIF构建器]
F --> G[validators 验证器]
G --> H[Slack 输出]
```
### 模块职责表
| 模块名称 | 文件路径 | 主要功能 |
|---------|---------|---------|
| typography | core/typography.py | 文本渲染、轮廓、阴影、发光效果 |
| color_palettes | core/color_palettes.py | 预定义配色方案和对比度计算 |
| frame_composer | core/frame_composer.py | 基础图形绘制、渐变背景、线条 |
| easing | core/easing.py | 动画缓动函数插值 |
| visual_effects | core/visual_effects.py | 粒子系统和动态特效 |
| gif_builder | core/gif_builder.py | 帧管理和 GIF 文件输出 |
| validators | core/validators.py | Slack 平台规范验证 |
---
## 排版系统 (Typography)
### 排版比例
系统定义了标准化的字体大小比例，用于保持视觉一致性：
| 级别 | 字号(px) | 用途 |
|-----|---------|------|
| h1 | 60 | 大型标题 |
| h2 | 48 | 中型标题 |
| h3 | 36 | 小型标题 |
| title | 50 | 标题文本 |
| body | 28 | 正文内容 |
| small | 20 | 小文本 |
| tiny | 16 | 极小文本 |
资料来源：[slack-gif-creator/core/typography.py:15-23]()
### 字体加载与跨平台支持
排版模块实现了多平台字体回退机制：
```python
font_paths = [
# macOS fonts
"/System/Library/Fonts/Helvetica.ttc",
"/System/Library/Fonts/SF-Pro.ttf",
# Linux fonts
"/usr/share/fonts/truetype/dejavu/DejaVuSans.ttf",
# Windows fonts
"C:\\Windows\\Fonts\\arial.ttf",
]
```
资料来源：[slack-gif-creator/core/typography.py:35-50]()
### 文本渲染效果
排版系统提供三种核心文本渲染函数：
| 函数名 | 效果类型 | 适用场景 |
|-------|---------|---------|
| draw_text_with_outline | 描边文本 | 高对比度背景上的可读性 |
| draw_text_with_shadow | 投影文本 | 深度感和层次感 |
| draw_text_with_glow | 发光文本 | 强调和视觉冲击 |
#### 描边文本渲染
该函数通过在所有方向偏移绘制副本文本来创建轮廓：
```python
def draw_text_with_outline(
frame: Image.Image,
text: str,
position: tuple[int, int],
font_size: int = 40,
text_color: tuple[int, int, int] = (255, 255, 255),
outline_color: tuple[int, int, int] = (0, 0, 0),
outline_width: int = 3,
centered: bool = False,
bold: bool = True
) -> Image.Image:
```
资料来源：[slack-gif-creator/core/typography.py:55-75]()
### 动态字体缩放
系统提供两种字体自适应功能：
- `get_optimal_font_size()`: 根据最大宽高约束找到最佳字号 资料来源：[slack-gif-creator/core/typography.py:110-130]()
- `scale_font_for_frame()`: 按比例缩放字号以适应不同帧尺寸 资料来源：[slack-gif-creator/core/typography.py:135-155]()
---
## 配色方案系统 (Color Palettes)
### 预定义配色方案
系统内置 8 种专业配色方案：
| 方案名称 | 主色调 | 背景特点 | 风格 |
|---------|-------|---------|------|
| vibrant | 鲜艳色彩 | 白色 | 活泼动感 |
| pastel | 柔和粉彩 | 浅色 | 温柔优雅 |
| dark | 深色系 | 近黑 | 科技感 |
| neon | 霓虹色 | 深蓝黑 | 赛博朋克 |
| professional | 系统蓝 | 白色 | 商务正式 |
| warm | 珊瑚橙 | 暖白 | 温暖友好 |
| cool | 天蓝色 | 浅蓝 | 清爽冷静 |
| monochrome | 灰度 | 浅灰 | 极简主义 |
资料来源：[slack-gif-creator/core/color_palettes.py:1-80]()
### 对比度自适应
系统通过亮度计算自动选择文本颜色：
```python
def get_text_color_for_background(bg_color: tuple[int, int, int]) -> tuple[int, int, int]:
r, g, b = bg_color
luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255
return (0, 0, 0) if luminance > 0.5 else (255, 255, 255)
```
资料来源：[slack-gif-creator/core/color_palettes.py:95-110]()
---
## 缓动函数系统 (Easing)
### 支持的缓动类型
| 函数名 | 类型 | 效果描述 |
|-------|-----|---------|
| linear | 线性 | 匀速运动 |
| ease_in_quad | 渐入 | 开始慢 |
| ease_out_quad | 渐出 | 结束慢 |
| ease_in_out | 渐入渐出 | 开始和结束慢 |
| ease_in_bounce | 弹入 | 开始时弹跳 |
| ease_out_bounce | 弹出 | 结束时弹跳 |
| ease_in_elastic | 弹性入 | 拉伸后回弹 |
| ease_out_elastic | 弹性出 | 回弹效果 |
资料来源：[slack-gif-creator/core/easing.py:1-80]()
### 插值接口
```python
def interpolate(start: float, end: float, t: float, easing: str = 'linear') -> float:
ease_func = get_easing(easing)
eased_t = ease_func(t)
return start + (end - start) * eased_t
```
资料来源：[slack-gif-creator/core/easing.py:85-100]()
---
## 帧合成器 (Frame Composer)
### 基础绘图功能
帧合成器提供以下核心绘图原语：
| 函数 | 功能 |
|-----|------|
| draw_emoji() | 绘制 emoji 字符 |
| draw_circle_with_shadow() | 带阴影的圆形 |
| draw_round_rect() | 圆角矩形 |
| draw_line() | 线条绘制 |
| draw_text() | 基础文本 |
| create_gradient_background() | 垂直渐变背景 |
资料来源：[slack-gif-creator/core/frame_composer.py:1-150]()
### 人形绘制函数
系统包含用于创建简单人形图标的绘制函数：
```python
def draw_person(frame: Image.Image, x: int, y: int, color: tuple[int, int, int],
scale: float = 1.0) -> Image.Image:
# 头部
draw.ellipse([...], fill=color)
# 身体
draw.line([(x, body_start), (x, body_end)], fill=color)
# 手臂和腿部
draw.line([...], fill=color)
```
资料来源：[slack-gif-creator/core/frame_composer.py:50-80]()
---
## 视觉效果系统 (Visual Effects)
### 粒子系统架构
```mermaid
graph TD
A[ParticleSystem] --> B[Particle 实例列表]
B --> C[emit 发射方法]
C --> D[count 粒子数量]
C --> E[spread 角度扩散]
C --> F[speed 初始速度]
C --> G[lifetime 生命周期]
D --> H[circle 圆形]
D --> I[square 方形]
D --> J[star 星形]
```
### 粒子配置参数
| 参数 | 类型 | 默认值 | 说明 |
|-----|------|-------|------|
| count | int | 10 | 发射粒子数量 |
| spread | float | 2.0 | 角度扩散范围(弧度) |
| speed | float | 5.0 | 初始速度 |
| color | tuple | (255,200,0) | 粒子颜色 RGB |
| lifetime | float | 20.0 | 生命周期(帧数) |
| size | int | 3 | 粒子尺寸 |
| shape | str | 'circle' | 粒子形状 |
资料来源：[slack-gif-creator/core/visual_effects.py:80-100]()
---
## GIF 构建器 (GIF Builder)
### 核心类接口
```python
class GIFBuilder:
def __init__(self, width: int = 480, height: int = 480, fps: int = 20):
self.width = width
self.height = height
self.fps = fps
self.frames: list[Image.Image] = []
def add_frame(self, frame: Image.Image, duration: float = 0.1):
...
def save(self, output_path: str | Path, optimize_for_emoji: bool = True):
...
```
资料来源：[slack-gif-creator/core/gif_builder.py:1-60]()
### 输出配置
| 参数 | Emoji 模式 | 消息模式 |
|-----|-----------|---------|
| 建议尺寸 | 128x128 | 320x640 |
| 文件大小限制 | 64 KB | 2048 KB |
| 最佳帧率 | 20-30 fps | 15-20 fps |
| 推荐颜色数 | 32-40 | 64-128 |
---
## 验证器 (Validators)
### Slack 平台规范检查
验证器确保 GIF 符合 Slack 上传要求：
```python
def validate_gif(gif_path: str | Path, is_emoji: bool = True):
# 检查 1: 文件大小
# 检查 2: 尺寸规格
# 检查 3: 帧率设置
# 检查 4: 颜色深度
```
资料来源：[slack-gif-creator/core/validators.py:50-100]()
### 快速验证接口
```python
def is_slack_ready(gif_path: str | Path, is_emoji: bool = True, verbose: bool = True) -> bool:
"""
快速检查 GIF 是否可上传至 Slack
"""
```
资料来源：[slack-gif-creator/core/validators.py:130-150]()
### 优化建议生成
验证失败时，系统提供具体的优化指导：
| 问题类型 | 优化建议 |
|---------|---------|
| 文件过大 | 减少帧数、使用更少颜色、简化设计 |
| 尺寸不当 | 调整为正方形、使用 128x128 基准 |
| 帧率过高 | 降低 fps 至 20-30 |
| 颜色过多 | 限制在 32-40 色 |
---
## 使用工作流
```mermaid
graph TD
A[创建 GIFBuilder] --> B[配置尺寸和帧率]
B --> C[设计帧内容]
C --> D[添加排版效果]
D --> E[应用配色方案]
E --> F[添加视觉特效]
F --> G[调用 add_frame 添加帧]
G --> H{是否完成?}
H -->|否| C
H -->|是| I[调用 save 保存]
I --> J[validators 验证]
J --> K{通过验证?}
K -->|否| L[根据建议优化]
L --> C
K -->|是| M[上传至 Slack]
```
---
## 最佳实践
### Emoji GIF 制作规范
1. **尺寸优先**: 使用 128x128 像素
2. **保持正方形**: 长宽比 1:1
3. **控制帧数**: 10-12 帧最佳
4. **限制颜色**: 32-40 色
5. **简化设计**: 避免复杂渐变
### 消息 GIF 制作规范
1. **合理尺寸**: 最小边 320px，最大边 640px
2. **控制长宽比**: 不超过 2:1
3. **文件大小**: 保持在 2MB 以下
4. **适当帧率**: 15-20 fps
---
## 总结
`sjip-gif-creator` 提供了一套完整的 GIF 动画创建解决方案，通过模块化设计实现了排版、配色、动画和特效的解耦。系统核心优势包括：
- **跨平台字体支持**: 自动回退机制确保多环境一致性
- **专业配色系统**: 8 种预设方案满足不同场景需求
- **丰富的动画效果**: 8 种缓动函数和粒子系统
- **Slack 优化**: 内置验证和优化建议
开发者可通过组合这些模块快速创建高质量的 Slack 兼容 GIF 文件。
---
## 开发与代码工具技能
### 相关页面
相关主题：[MCP服务器集成](#mcp-integration)
相关源码文件
以下源码文件用于生成本页说明：
- [connect-apps-plugin/README.md](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/connect-apps-plugin/README.md)
- [slack-gif-creator/core/frame_composer.py](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/slack-gif-creator/core/frame_composer.py)
- [slack-gif-creator/core/typography.py](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/slack-gif-creator/core/typography.py)
- [slack-gif-creator/core/color_palettes.py](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/slack-gif-creator/core/color_palettes.py)
- [slack-gif-creator/core/easing.py](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/slack-gif-creator/core/easing.py)
- [slack-gif-creator/core/visual_effects.py](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/slack-gif-creator/core/visual_effects.py)
- [slack-gif-creator/core/validators.py](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/slack-gif-creator/core/validators.py)
- [slack-gif-creator/core/gif_builder.py](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/slack-gif-creator/core/gif_builder.py)
# 开发与代码工具技能
## 概述
开发与代码工具技能是 awesome-claude-skills 项目中的核心技能集合，旨在扩展 Claude Code 的能力边界，使其能够与外部应用服务集成、执行自动化任务、生成可视化输出内容。这些技能涵盖了从应用集成、图像生成到自动化测试等多个开发场景，为开发者提供了丰富的生产力工具集。
本项目中的技能主要分为两大类别：一类是 **应用集成类技能**，通过 Composio 平台连接超过 500 种外部应用，实现邮件发送、问题跟踪、即时通讯等功能；另一类是 **内容生成类技能**，专注于生成适合 Slack 等平台的高质量 GIF 图像和动画内容。资料来源：[connect-apps-plugin/README.md:1-3]()
## 应用集成技能
### Connect Apps Plugin
Connect Apps Plugin 是项目中最具代表性的应用集成技能，它允许 Claude Code 直接与超过 500 种第三方应用进行交互，完成真实的业务操作。该插件基于 Composio 平台构建，底层处理身份认证和应用连接逻辑。
#### 核心功能
该插件支持以下主要功能类别：
| 功能类别 | 支持应用示例 | 操作类型 |
|---------|------------|---------|
| 邮件服务 | Gmail, Outlook | 发送邮件 |
| 代码管理 | GitHub, GitLab, Jira, Linear | 创建和管理 Issue |
| 即时通讯 | Slack, Discord, Teams | 发送消息 |
| 文档协作 | Notion, Google Docs | 更新文档 |
| 数据管理 | Sheets, Airtable | 数据操作 |
| 其他服务 | 500+ 扩展应用 | 多种操作 |
资料来源：[connect-apps-plugin/README.md:16-26]()
#### 工作原理
Connect Apps Plugin 的工作流程遵循以下步骤：
```mermaid
graph TD
A[获取 Composio API Key] --> B[运行 /connect-apps:setup]
B --> C[粘贴 API Key]
C --> D[重启 Claude Code]
D --> E[首次使用应用时 OAuth 授权]
E --> F[开始执行真实操作]
```
1. **安装插件**：通过 `claude --plugin-dir ./connect-apps-plugin` 命令加载插件
2. **配置认证**：在 [platform.composio.dev](https://platform.composio.dev) 注册免费账户获取 API Key
3. **初始化设置**：运行 `/connect-apps:setup` 命令并输入 API Key
4. **应用授权**：首次使用某个应用时，通过 OAuth 完成授权流程
资料来源：[connect-apps-plugin/README.md:7-15]()
#### 使用示例
配置完成后，用户可以直接用自然语言向 Claude 发出指令：
```
Send me a test email at myemail@example.com
```
Claude 将自动调用 Gmail 或 Outlook 的 API 完成邮件发送任务，无需用户手动操作界面。
资料来源：[connect-apps-plugin/README.md:45-47]()
---
## GIF 创建技能
项目中的 slack-gif-creator 模块是一套完整的 GIF 生成系统，专门优化用于创建符合 Slack 平台要求的动画图像。该系统提供了从帧组合、排版设计到动画效果的全套工具链。
### 系统架构
```mermaid
graph TD
A[输入数据] --> B[frame_composer 帧组合器]
A --> C[typography 排版系统]
A --> D[visual_effects 视觉特效]
B --> E[gif_builder GIF 构建器]
C --> E
D --> E
E --> F[validators 验证器]
F --> G[输出 GIF]
```
核心模块及其职责：
| 模块 | 文件路径 | 功能描述 |
|-----|---------|---------|
| frame_composer | core/frame_composer.py | 基础绘图函数：线条、形状、渐变背景 |
| typography | core/typography.py | 专业文本渲染：描边、阴影、发光效果 |
| color_palettes | core/color_palettes.py | 预设配色方案管理 |
| easing | core/easing.py | 动画缓动函数库 |
| visual_effects | core/visual_effects.py | 粒子系统和动态特效 |
| validators | core/validators.py | Slack 兼容性验证 |
| gif_builder | core/gif_builder.py | GIF 构建和输出 |
资料来源：[slack-gif-creator/core/gif_builder.py:1-10]()
### 排版系统
排版系统（typography）是生成专业级 GIF 文本的核心模块，提供了多种文本渲染效果以确保在任何背景上都具有可读性。
#### 字体管理
`get_font()` 函数实现了跨平台字体加载，支持 macOS、Linux 和 Windows 系统：
```python
font_paths = [
# macOS
"/System/Library/Fonts/Helvetica.ttc",
"/System/Library/Fonts/SF-Pro.ttf",
# Linux
"/usr/share/fonts/truetype/dejavu/DejaVuSans.ttf",
# Windows
"C:\\Windows\\Fonts\\arial.ttf",
]
```
资料来源：[slack-gif-creator/core/typography.py:33-48]()
#### 字体比例系统
系统定义了标准化的字体尺寸比例：
| 级别 | 字号 | 用途 |
|-----|-----|-----|
| h1 | 60px | 大标题 |
| h2 | 48px | 中标题 |
| h3 | 36px | 小标题 |
| title | 50px | 标题文本 |
| body | 28px | 正文内容 |
| small | 20px | 小字文本 |
| tiny | 16px | 辅助文字 |
资料来源：[slack-gif-creator/core/typography.py:18-27]()
#### 文本效果函数
| 函数 | 功能 | 关键参数 |
|-----|------|---------|
| `draw_text_with_outline()` | 描边文字，可读性最高 | outline_width, outline_color |
| `draw_text_with_shadow()` | 阴影效果 | shadow_offset, shadow_color |
| `draw_text_with_glow()` | 发光效果 | glow_color, glow_radius |
| `draw_emoji()` | Emoji 渲染 | embedded_color 支持 |
`draw_text_with_outline()` 是生成专业外观文字的关键函数，通过在主文字周围绘制多层偏移的描边来确保在任何背景上都能清晰可读：
```python
# 绘制描边（多层偏移）
for offset_x in range(-outline_width, outline_width + 1):
for offset_y in range(-outline_width, outline_width + 1):
if offset_x != 0 or offset_y != 0:
draw.text((x + offset_x, y + offset_y), text, fill=outline_color, font=font)
# 绘制主文字
draw.text(position, text, fill=text_color, font=font)
```
资料来源：[slack-gif-creator/core/typography.py:71-98]()
### 配色方案
系统内置了 8 种专业配色方案，可通过名称直接调用：
| 方案名称 | 风格特点 | 适用场景 |
|---------|---------|---------|
| vibrant | 鲜艳明亮 | 轻松活泼的氛围 |
| pastel | 柔和粉彩 | 温暖友好的设计 |
| dark | 深色主题 | 暗色背景环境 |
| neon | 霓虹风格 | 赛博朋克效果 |
| professional | 系统风格 | 正式商务场合 |
| warm | 暖色系 | 温馨亲切的界面 |
| cool | 冷色系 | 清爽科技感 |
| monochrome | 单色调 | 简约专业设计 |
每种配色方案包含以下颜色角色定义：
- `primary`: 主色调
- `secondary`: 次要色
- `accent`: 强调色
- `success`: 成功/正向反馈色
- `background`: 背景色
- `text`: 正文文字色
- `text_light`: 浅色文字色
资料来源：[slack-gif-creator/core/color_palettes.py:1-80]()
#### 动态文本颜色选择
`get_text_color_for_background()` 函数通过计算背景亮度自动选择合适的文字颜色：
```python
def get_text_color_for_background(bg_color):
r, g, b = bg_color
luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255
return (0, 0, 0) if luminance > 0.5 else (255, 255, 255)
```
资料来源：[slack-gif-creator/core/color_palettes.py:107-115]()
### 动画缓动函数
缓动系统提供了流畅自然的动画过渡效果，支持 9 种预定义缓动函数：
| 函数名 | 效果描述 |
|-------|---------|
| linear | 线性匀速 |
| ease_in | 缓入 |
| ease_out | 缓出 |
| ease_in_out | 缓入缓出 |
| bounce_in | 弹跳进入 |
| bounce_out | 弹跳退出 |
| ease_in_bounce / ease_out_bounce | 单独弹跳效果 |
| elastic_in | 弹性进入 |
| elastic_out | 弹性退出 |
| ease_in_elastic / ease_out_elastic | 单独弹性效果 |
`interpolate()` 函数将缓动函数应用于数值插值：
```python
def interpolate(start, end, t, easing='linear'):
ease_func = get_easing(easing)
eased_t = ease_func(t)
return start + (end - start) * eased_t
```
资料来源：[slack-gif-creator/core/easing.py:1-60]()
### 视觉特效系统
#### 粒子系统
粒子系统（ParticleSystem）可以创建爆发式粒子效果，支持多种形状和运动参数：
| 参数 | 类型 | 说明 |
|-----|------|-----|
| x, y | int | 发射位置坐标 |
| count | int | 粒子数量（默认 10） |
| spread | float | 角度扩散范围（弧度，默认 2.0） |
| speed | float | 初始速度（默认 5.0） |
| lifetime | float | 粒子存活帧数（默认 20.0） |
| size | int | 粒子尺寸（默认 3） |
| shape | str | 形状类型：circle, square, star |
资料来源：[slack-gif-creator/core/visual_effects.py:1-50]()
### Slack 兼容性与验证
validators 模块提供了针对 Slack 平台要求的 GIF 验证功能，确保生成的动画图像能够正常上传和使用。
#### Emoji GIF 要求
| 检查项 | 要求 |
|-------|-----|
| 尺寸 | 128x128 像素（最优） |
| 宽高比 | 正方形 |
| 文件大小 | ≤ 64 KB |
| 帧数建议 | 10-12 帧 |
| 颜色数量 | 32-40 色最优 |
#### 消息 GIF 要求
| 检查项 | 要求 |
|-------|-----|
| 宽高比 | 近似正方形（2:1 以内） |
| 最小尺寸 | ≥ 320 像素 |
| 最大尺寸 | ≤ 640 像素 |
| 文件大小 | ≤ 2048 KB |
#### 验证函数使用
```python
passes, results = validate_gif(gif_path, is_emoji=True)
if passes:
print("✓ All validations passed!")
else:
suggestions = get_optimization_suggestions(results)
```
资料来源：[slack-gif-creator/core/validators.py:1-80]()
### GIF 构建器
gif_builder 是最终输出模块，整合所有组件生成最终的 GIF 文件：
```mermaid
graph LR
A[frames 列表] --> B[GifBuilder]
B --> C[add 方法添加帧]
B --> D[build 方法构建]
D --> E[保存为 GIF 文件]
```
主要方法：
| 方法 | 功能 |
|-----|-----|
| `add(frame)` | 添加一帧到序列 |
| `set_duration(duration)` | 设置帧持续时间（秒） |
| `build()` | 构建 GIF 数据 |
| `save(path)` | 保存到文件 |
| `clear()` | 清空所有帧 |
`build()` 方法返回包含详细统计信息的字典：
```python
info = {
'frame_count': len(optimized_frames),
'duration_seconds': total_duration,
'file_size_kb': file_size_kb,
'colors': num_colors
}
```
资料来源：[slack-gif-creator/core/gif_builder.py:30-100]()
---
## 快速开始指南
### 安装 Connect Apps Plugin
```bash
claude --plugin-dir ./connect-apps-plugin
/connect-apps:setup # 输入你的 API Key
```
### 创建 Slack Emoji GIF
```python
from core.gif_builder import GifBuilder
from core.typography import draw_text_with_outline
from core.color_palettes import get_palette
# 初始化构建器
builder = GifBuilder(width=128, height=128, fps=10)
# 添加动画帧
for i in range(12):
frame = builder.create_frame()
text = f"Frame {i+1}"
draw_text_with_outline(frame, text, (64, 64),
font_size=24, centered=True)
builder.add(frame)
# 构建并保存
info = builder.build()
builder.save("output.gif")
```
---
## 总结
开发与代码工具技能通过 Connect Apps Plugin 实现了与 500+ 外部应用的无缝集成，使 Claude Code 能够执行真实的业务操作；同时通过 slack-gif-creator 模块提供了完整的专业级 GIF 生成能力，涵盖排版、配色、动画、特效等各个方面。这些技能共同构成了一个强大的开发者工具生态，有效提升了日常开发工作的效率和质量。
---
## MCP服务器集成
### 相关页面
相关主题：[Skill创建工作流](#skill-creation-workflow)
相关源码文件
以下源码文件用于生成本页说明：
- [mcp-builder/SKILL.md](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/mcp-builder/SKILL.md) ⚠️ **未在当前上下文检索到**
- [mcp-builder/reference/python_mcp_server.md](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/mcp-builder/reference/python_mcp_server.md) ⚠️ **未在当前上下文检索到**
- [mcp-builder/reference/node_mcp_server.md](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/mcp-builder/reference/node_mcp_server.md) ⚠️ **未在当前上下文检索到**
- [mcp-builder/reference/mcp_best_practices.md](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/mcp-builder/reference/mcp_best_practices.md) ⚠️ **未在当前上下文检索到**
- [mcp-builder/scripts/connections.py](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/mcp-builder/scripts/connections.py) ⚠️ **未在当前上下文检索到**
---
**⚠️ 重要提示：无法完成此请求**
当前检索到的上下文仅包含以下模块的源码：
| 目录 | 文件 | 说明 |
|------|------|------|
| `connect-apps-plugin/` | README.md | Connect Apps插件文档 |
| `slack-gif-creator/core/` | typography.py | GIF文字渲染系统 |
| `slack-gif-creator/core/` | validators.py | GIF验证工具 |
| `slack-gif-creator/core/` | frame_composer.py | 帧组合工具 |
| `slack-gif-creator/core/` | easing.py | 缓动函数库 |
| `slack-gif-creator/core/` | color_palettes.py | 配色方案定义 |
| `slack-gif-creator/core/` | visual_effects.py | 视觉粒子特效 |
| `slack-gif-creator/core/` | gif_builder.py | GIF构建器 |
**请求的文件不在上下文中：**
- `mcp-builder/` 目录下的所有文件（包括 SKILL.md、参考文档和脚本）
---
**建议操作：**
1. **重新发起检索请求**，明确包含 `mcp-builder/` 目录下的文件
2. **或调整Wiki主题**，基于当前可用的源码创建其他技术文档，例如：
- "Slack GIF创建器系统"
- "Connect Apps插件集成"
- "图像动画帧处理架构"
请提供 `mcp-builder/` 相关文件后，我将立即生成准确的"MCP服务器集成"技术Wiki页面。
---
## 创意与媒体技能
### 相关页面
相关主题：[生产力与组织技能](#productivity-skills)
相关源码文件
以下源码文件用于生成本页说明：
- [canvas-design/SKILL.md](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/canvas-design/SKILL.md)
- [slack-gif-creator/SKILL.md](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/slack-gif-creator/SKILL.md)
- [slack-gif-creator/core/gif_builder.py](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/slack-gif-creator/core/gif_builder.py)
- [slack-gif-creator/core/frame_composer.py](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/slack-gif-creator/core/frame_composer.py)
- [slack-gif-creator/core/typography.py](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/slack-gif-creator/core/typography.py)
- [slack-gif-creator/core/validators.py](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/slack-gif-creator/core/validators.py)
- [slack-gif-creator/core/color_palettes.py](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/slack-gif-creator/core/color_palettes.py)
- [slack-gif-creator/core/visual_effects.py](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/slack-gif-creator/core/visual_effects.py)
- [slack-gif-creator/core/easing.py](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/slack-gif-creator/core/easing.py)
- [theme-factory/SKILL.md](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/theme-factory/SKILL.md)
- [theme-factory/themes/arctic-frost.md](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/theme-factory/themes/arctic-frost.md)
- [image-enhancer/SKILL.md](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/image-enhancer/SKILL.md)
- [video-downloader/SKILL.md](https://github.com/ComposioHQ/awesome-claude-skills/blob/main/video-downloader/SKILL.md)
# 创意与媒体技能
## 概述
创意与媒体技能是 awesome-claude-skills 项目中专注于视觉内容创作的一系列工具集。这些技能使得 Claude 能够生成高质量的 GIF 动图、设计画布、处理图像增强以及下载视频内容。该模块的核心设计理念是通过程序化方式创建符合平台要求的媒体文件，特别是针对 Slack 等即时通讯工具的 GIF 动图优化。技能之间相互协作，共享底层的图像处理、色彩管理和动画生成能力，形成了一套完整的视觉内容创作工具链。
## 技能架构总览
创意与媒体技能采用分层架构设计，从底层到顶层依次为：核心库层（GIF构建、帧合成、排版系统）、效果层（视觉特效、调色板、缓动函数）、验证层（文件验证、尺寸检查）以及应用层（Slack GIF 创建器、画布设计、主题工厂）。各层之间通过标准化的接口进行通信，数据流遵循从输入处理到最终输出的单向流动模式。
```mermaid
graph TD
A[应用层] --> B[验证层]
B --> C[效果层]
C --> D[核心库层]
A --> A1[Slack GIF 创建器]
A --> A2[画布设计]
A --> A3[主题工厂]
A --> A4[图像增强器]
A --> A5[视频下载器]
B --> B1[validators.py]
B --> B2[尺寸验证]
B --> B3[格式验证]
C --> C1[visual_effects.py]
C --> C2[color_palettes.py]
C --> C3[easing.py]
C --> C4[typography.py]
D --> D1[gif_builder.py]
D --> D2[frame_composer.py]
```
资料来源：[slack-gif-creator/core/gif_builder.py:1-20]()
## 核心模块详解
### GIF 构建器（GIFBuilder）
GIFBuilder 是整个创意技能体系的核心引擎，负责将离散的帧序列组装成优化的 GIF 动画文件。该类封装了帧管理、尺寸调整和导出逻辑，支持从 PIL Image 或 NumPy 数组格式添加帧数据。
```python
class GIFBuilder:
def __init__(self, width: int = 480, height: int = 480, fps: int = 15):
self.width = width
self.height = height
self.fps = fps
self.frames: list[np.ndarray] = []
def add_frame(self, frame: np.ndarray | Image.Image):
# 帧添加工逻辑
```
资料来源：[slack-gif-creator/core/gif_builder.py:22-45]()
| 参数 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| width | int | 480 | 帧宽度（像素） |
| height | int | 480 | 帧高度（像素） |
| fps | int | 15 | 每秒帧数 |
### 帧合成器（FrameComposer）
FrameComposer 提供了在帧上绘制各种视觉元素的基础工具集，包括几何形状（圆形、矩形、线条）、文本渲染、表情符号以及渐变背景。该模块是构建复杂视觉场景的基础构建块。
**基础绘图函数列表：**
| 函数名 | 功能描述 |
|--------|----------|
| create_blank_frame | 创建纯色空白帧 |
| draw_circle | 绘制圆形 |
| draw_rectangle | 绘制矩形 |
| draw_line | 绘制线条 |
| draw_text | 绘制文本 |
| draw_emoji | 绘制表情符号 |
| create_gradient_background | 创建渐变背景 |
| draw_circle_with_shadow | 绘制带阴影的圆形 |
| draw_round_rect | 绘制圆角矩形 |
资料来源：[slack-gif-creator/core/frame_composer.py:1-120]()
### 排版系统（Typography）
Typography 模块提供了专业级的文本渲染能力，支持描边、阴影和居中对齐等效果。该模块针对 GIF 场景优化，确保文本在任何背景下都保持清晰可读。
```mermaid
graph LR
A[文本内容] --> B[字体选择]
B --> C{渲染模式}
C -->|描边| D[描边绘制]
C -->|阴影| E[阴影绘制]
C -->|普通| F[直接绘制]
D --> G[主文本层]
E --> G
F --> G
G --> H[最终帧输出]
```
资料来源：[slack-gif-creator/core/typography.py:1-80]()
**排版刻度标准：**
| 级别 | 字号 | 用途 |
|------|------|------|
| h1 | 60px | 大标题 |
| h2 | 48px | 中标题 |
| h3 | 36px | 小标题 |
| title | 50px | 标题文本 |
| body | 28px | 正文内容 |
| small | 20px | 小文本 |
| tiny | 16px | 极小文本 |
## 效果系统
### 色彩调色板
项目预置了多个经过精心设计的专业色彩方案，每个调色板包含主色、辅色、强调色、成功色、背景色和文本色六个基础色值。这些调色板针对 GIF 压缩和视觉效果进行了优化。
| 调色板名称 | 风格描述 | 适用场景 |
|-----------|----------|----------|
| VIBRANT | 明亮鲜艳 | 活泼生动的动画 |
| PASTEL | 柔和粉彩 | 柔和优雅的视觉 |
| DARK | 深色主题 | 暗色背景内容 |
| NEON | 霓虹风格 | 赛博朋克效果 |
| PROFESSIONAL | 系统标准 | 商务专业场合 |
| WARM | 暖色系 | 温馨友好氛围 |
| COOL | 冷色系 | 清新冷静风格 |
| MONOCHROME | 单色调 | 极简主义设计 |
资料来源：[slack-gif-creator/core/color_palettes.py:1-100]()
### 视觉特效（Visual Effects）
视觉特效模块实现了粒子系统和各种动态效果，支持自定义粒子的发射位置、数量、扩散范围、速度、颜色、生命周期和形状。粒子系统是创建爆炸、闪烁、飘落等动态效果的理想工具。
```python
def emit(self, x: int, y: int, count: int = 10,
spread: float = 2.0, speed: float = 5.0,
color: tuple[int, int, int] = (255, 200, 0),
lifetime: float = 20.0, size: int = 3, shape: str = 'circle'):
```
资料来源：[slack-gif-creator/core/visual_effects.py:50-70]()
**粒子参数说明：**
| 参数 | 类型 | 说明 |
|------|------|------|
| x, y | int | 发射位置坐标 |
| count | int | 粒子数量 |
| spread | float | 角度扩散范围（弧度） |
| speed | float | 初始速度 |
| color | tuple | RGB 颜色值 |
| lifetime | float | 粒子生命周期（帧数） |
| size | int | 粒子尺寸 |
| shape | str | 粒子形状（circle/square/star） |
### 缓动函数（Easing）
缓动函数系统提供了丰富的动画过渡效果，使动画运动更加自然流畅。系统内置了线性、二次、三次、弹跳、弹性等多种缓动曲线。
```python
EASING_FUNCTIONS = {
'linear': linear,
'ease_in': ease_in_quad,
'ease_out': ease_out_quad,
'ease_in_out': ease_in_out_quad,
'bounce_in': ease_in_bounce,
'bounce_out': ease_out_bounce,
'bounce': ease_in_out_bounce,
'elastic_in': ease_in_elastic,
'elastic_out': ease_out_elastic,
'elastic': ease_in_out_elastic,
}
```
资料来源：[slack-gif-creator/core/easing.py:50-65]()
**interpolate 函数用法：**
```python
def interpolate(start: float, end: float, t: float, easing: str = 'linear') -> float:
ease_func = get_easing(easing)
eased_t = ease_func(t)
return start + (end - start) * eased_t
```
资料来源：[slack-gif-creator/core/easing.py:70-85]()
## 验证系统
### Slack GIF 验证器
验证系统确保生成的 GIF 文件符合 Slack 平台的严格要求。系统会检查文件大小和尺寸两个维度，并为不通过的验证提供优化建议。
```mermaid
graph TD
A[验证开始] --> B{文件存在?}
B -->|否| C[返回错误]
B -->|是| D[检查文件大小]
D --> E{大小超限?}
E -->|是| F[计算超标量]
E -->|否| G[检查尺寸]
F --> J[生成优化建议]
G --> H{尺寸合适?}
H -->|是| I[验证通过]
H -->|否| J
I --> K[返回结果]
J --> K
C --> K
```
资料来源：[slack-gif-creator/core/validators.py:1-80]()
**Slack GIF 规格要求：**
| 类型 | 最大尺寸 | 推荐尺寸 | 宽高比 |
|------|----------|----------|--------|
| 表情包 GIF | 64KB | 128×128 | 1:1 正方形 |
| 消息 GIF | 2MB | 320-640 | 最大 2:1 |
**validate_dimensions 函数逻辑：**
```python
# 表情包检查
optimal = width == height == 128
acceptable = width == height and 64 <= width <= 128
# 消息 GIF 检查
aspect_ratio = max(width, height) / min(width, height)
reasonable_size = 320 <= min(width, height) <= 640
is_square_ish = aspect_ratio <= 2.0
```
资料来源：[slack-gif-creator/core/validators.py:20-45]()
**优化建议生成：**
```python
if not size_info.get('passes', True):
overage = size_info['size_kb'] - size_info['limit_kb']
if size_info['type'] == 'emoji':
suggestions.append(f"减少 {overage:.1f} KB 文件大小：")
suggestions.append(" - 限制在 10-12 帧")
suggestions.append(" - 最多使用 32-40 种颜色")
suggestions.append(" - 移除渐变效果")
```
资料来源：[slack-gif-creator/core/validators.py:120-145]()
## 应用技能
### Slack GIF 创建器
Slack GIF 创建器是面向终端用户的应用技能，它整合了所有核心模块的功能，提供端到端的 GIF 创作体验。用户只需描述想要的 GIF 内容，系统会自动完成从设计到验证的完整流程。
资料来源：[slack-gif-creator/SKILL.md:1-50]()
### 画布设计
画布设计技能专注于创建静态和动态的视觉内容，支持自定义尺寸、背景、文字和图形元素。该技能可以用于制作海报、社交媒体配图和简单的动画内容。
资料来源：[canvas-design/SKILL.md:1-30]()
### 主题工厂
主题工厂技能允许用户创建和管理可重用的视觉主题系统。每个主题包含预定义的色彩方案、排版风格和组件样式，确保视觉内容的一致性。
```yaml
# 主题示例：arctic-frost
name: Arctic Frost
colors:
primary: "#3B82F6"
secondary: "#8B5CF6"
accent: "#06B6D4"
background: "#F8FAFC"
text: "#1E293B"
```
资料来源：[theme-factory/themes/arctic-frost.md:1-20]()
### 图像增强器
图像增强器技能专注于改善现有图像的质量，支持调整亮度、对比度、饱和度，应用滤镜效果以及智能锐化。该技能可以独立使用，也可以作为其他技能的预处理步骤。
资料来源：[image-enhancer/SKILL.md:1-25]()
### 视频下载器
视频下载器技能支持从多个主流平台下载视频内容，并提供格式转换和分辨率选择功能。该技能为创意工作流提供了获取原始素材的能力。
资料来源：[video-downloader/SKILL.md:1-20]()
## 工作流程
### 典型 GIF 创作流程
```mermaid
graph LR
A[用户描述] --> B[设计规划]
B --> C[选择调色板]
C --> D[构建帧序列]
D --> E[应用效果]
E --> F[组装 GIF]
F --> G[验证合规性]
G -->|通过| H[输出交付]
G -->|失败| I[优化调整]
I --> D
```
### 帧渲染管道
```mermaid
graph TD
A[空白帧] --> B[绘制背景]
B --> C[添加形状]
C --> D[绘制文字]
D --> E[添加表情]
E --> F[应用特效]
F --> G[当前帧完成]
```
资料来源：[slack-gif-creator/core/frame_composer.py:1-50]()
## 总结
创意与媒体技能模块展现了模块化设计在复杂视觉工具开发中的优势。通过清晰的分层架构和标准化的接口设计，各个组件既可以独立使用，也可以协同工作。GIFBuilder 作为核心引擎，frame_composer 提供基础绘图能力，typography 处理文本渲染，validators 确保输出合规，visual_effects 和 easing 则为动画增添动态表现力。这套系统使得 Claude 能够完成从简单的图片编辑到复杂的动画创作等多种视觉内容生成任务。
---
## 生产力与组织技能
### 相关页面
相关主题：[创意与媒体技能](#creative-skills)
由于仓库中没有提供 "file-organizer"、"invoice-organizer"、"raffle-winner-picker"、"tailored-resume-generator"、"lead-research-assistant" 和 "meeting-insights-analyzer" 等源码文件，我无法基于这些文件生成准确的文档。
提供的仓库上下文仅包含以下文件：
- `connect-apps-plugin/README.md` - Connect Apps 插件
- `slack-gif-creator/core/typography.py` - 排版系统
- `slack-gif-creator/core/color_palettes.py` - 调色板
- `slack-gif-creator/core/frame_composer.py` - 帧合成器
- `slack-gif-creator/core/visual_effects.py` - 视觉效果
- `slack-gif-creator/core/validators.py` - 验证器
- `slack-gif-creator/core/easing.py` - 缓动函数
这些文件与 "生产力与组织技能" 主题无关。
请提供正确的源码文件，或确认您想要基于现有的 Slack GIF Creator 相关文件生成文档。如果您想了解该仓库中实际存在的技能，我可以基于 `connect-apps-plugin/README.md` 生成相应的文档。
---
---
## Doramagic 踩坑日志
项目：ComposioHQ/awesome-claude-skills
摘要：发现 9 个潜在踩坑项，其中 1 个为 high/blocking；最高优先级：安全/权限坑 - 来源证据：💰 Your AI agent can earn passive income on MFKVault。
## 1. 安全/权限坑 · 来源证据：💰 Your AI agent can earn passive income on MFKVault
- 严重度：high
- 证据强度：source_linked
- 发现：GitHub 社区证据显示该项目存在一个安全/权限相关的待验证问题：💰 Your AI agent can earn passive income on MFKVault
- 对用户的影响：可能影响授权、密钥配置或安全边界。
- 建议检查：来源问题仍为 open，Pack Agent 需要复核是否仍影响当前版本。
- 防护动作：不得脱离来源链接放大为确定性结论；需要标注适用版本和复核状态。
- 证据：community_evidence:github | cevd_92c663a857f14150b57cf129a74ef3b2 | https://github.com/ComposioHQ/awesome-claude-skills/issues/727 | 来源类型 github_issue 暴露的待验证使用条件。
## 2. 身份坑 · 仓库名和安装名不一致
- 严重度：medium
- 证据强度：runtime_trace
- 发现：仓库名 `awesome-claude-skills` 与安装入口 `skills` 不完全一致。
- 对用户的影响：用户照着仓库名搜索包或照着包名找仓库时容易走错入口。
- 建议检查：在 npm/PyPI/GitHub 上确认包名映射和官方 README 说明。
- 复现命令：`npx skills`
- 防护动作：页面必须同时展示 repo 名和真实安装入口，避免用户搜索错包。
- 证据：identity.distribution | github_repo:1078079172 | https://github.com/ComposioHQ/awesome-claude-skills | repo=awesome-claude-skills; install=skills
## 3. 配置坑 · 可能修改宿主 AI 配置
- 严重度：medium
- 证据强度：source_linked
- 发现：项目面向 Claude/Cursor/Codex/Gemini/OpenCode 等宿主，或安装命令涉及用户配置目录。
- 对用户的影响：安装可能改变本机 AI 工具行为，用户需要知道写入位置和回滚方法。
- 建议检查：列出会写入的配置文件、目录和卸载/回滚步骤。
- 防护动作：涉及宿主配置目录时必须给回滚路径，不能只给安装命令。
- 证据：capability.host_targets | github_repo:1078079172 | https://github.com/ComposioHQ/awesome-claude-skills | host_targets=claude, claude_code
## 4. 能力坑 · 能力判断依赖假设
- 严重度：medium
- 证据强度：source_linked
- 发现：README/documentation is current enough for a first validation pass.
- 对用户的影响：假设不成立时，用户拿不到承诺的能力。
- 建议检查：将假设转成下游验证清单。
- 防护动作：假设必须转成验证项；没有验证结果前不能写成事实。
- 证据：capability.assumptions | github_repo:1078079172 | https://github.com/ComposioHQ/awesome-claude-skills | README/documentation is current enough for a first validation pass.
## 5. 维护坑 · 维护活跃度未知
- 严重度：medium
- 证据强度：source_linked
- 发现：未记录 last_activity_observed。
- 对用户的影响：新项目、停更项目和活跃项目会被混在一起，推荐信任度下降。
- 建议检查：补 GitHub 最近 commit、release、issue/PR 响应信号。
- 防护动作：维护活跃度未知时，推荐强度不能标为高信任。
- 证据：evidence.maintainer_signals | github_repo:1078079172 | https://github.com/ComposioHQ/awesome-claude-skills | last_activity_observed missing
## 6. 安全/权限坑 · 下游验证发现风险项
- 严重度：medium
- 证据强度：source_linked
- 发现：no_demo
- 对用户的影响：下游已经要求复核，不能在页面中弱化。
- 建议检查：进入安全/权限治理复核队列。
- 防护动作：下游风险存在时必须保持 review/recommendation 降级。
- 证据：downstream_validation.risk_items | github_repo:1078079172 | https://github.com/ComposioHQ/awesome-claude-skills | no_demo; severity=medium
## 7. 安全/权限坑 · 存在评分风险
- 严重度：medium
- 证据强度：source_linked
- 发现：no_demo
- 对用户的影响：风险会影响是否适合普通用户安装。
- 建议检查：把风险写入边界卡，并确认是否需要人工复核。
- 防护动作：评分风险必须进入边界卡，不能只作为内部分数。
- 证据：risks.scoring_risks | github_repo:1078079172 | https://github.com/ComposioHQ/awesome-claude-skills | no_demo; severity=medium
## 8. 维护坑 · issue/PR 响应质量未知
- 严重度：low
- 证据强度：source_linked
- 发现：issue_or_pr_quality=unknown。
- 对用户的影响：用户无法判断遇到问题后是否有人维护。
- 建议检查：抽样最近 issue/PR，判断是否长期无人处理。
- 防护动作：issue/PR 响应未知时，必须提示维护风险。
- 证据：evidence.maintainer_signals | github_repo:1078079172 | https://github.com/ComposioHQ/awesome-claude-skills | issue_or_pr_quality=unknown
## 9. 维护坑 · 发布节奏不明确
- 严重度：low
- 证据强度：source_linked
- 发现：release_recency=unknown。
- 对用户的影响：安装命令和文档可能落后于代码，用户踩坑概率升高。
- 建议检查：确认最近 release/tag 和 README 安装命令是否一致。
- 防护动作：发布节奏未知或过期时，安装说明必须标注可能漂移。
- 证据：evidence.maintainer_signals | github_repo:1078079172 | https://github.com/ComposioHQ/awesome-claude-skills | release_recency=unknown