with one click
蓝湖应用开发技能,用于构建和管理蓝湖相关的应用功能
npx skills add https://github.com/langliu/skills --skill lan-hu-appCopy and paste this command into Claude Code to install the skill
蓝湖应用开发技能,用于构建和管理蓝湖相关的应用功能
npx skills add https://github.com/langliu/skills --skill lan-hu-appCopy and paste this command into Claude Code to install the skill
使用 ImageMagick 压缩本地图片文件,使用 ffmpeg 压缩本地视频文件。当 Codex 需要缩小 JPEG、PNG、WebP、HEIC、TIFF、MP4、MOV、MKV 或其他本地媒体体积时使用;适用于批量压缩文件夹、分享前缩放图片、将照片或截图默认转换为同目录同名 WebP、将视频默认压缩为同路径 MP4/H.265,保留源文件时输出到 compressed 压缩目录并镜像源目录结构,并在压缩成功后检查输出尺寸、重试 0KB 输出、默认删除或替换原文件并汇报压缩前后体积变化。
在用户需要查询 YAPI 接口文档、确认请求参数、查看响应结构、按路径或标题定位接口定义、核对某个接口的 body schema、或希望从 YAPI 拉取最新文档时使用。只要用户提到"查 YAPI""接口文档""请求参数""响应体""某个 path 的定义""YAPI 上这个接口怎么写",即使没有明确点名这个 skill,也应优先使用。
根据 git diff 分析变更并生成符合 Conventional Commits 规范的提交信息。当用户提到"写commit"、"提交信息"、"commit message"、"帮我提交"、"整理改动"、"拆分提交"、暂存区代码变更、或需要按约定式提交规范撰写消息时使用此技能。生成后展示给用户确认,不主动执行 git commit。
对前端代码进行全面的代码审查,包括代码规范、性能优化、可访问性、安全性、TypeScript类型检查、React/Vue等框架最佳实践。在以下场景使用:(1) 审查前端代码质量,(2) 检查性能问题,(3) 验证可访问性,(4) 发现安全漏洞,(5) TypeScript类型检查,(6) 框架特定最佳实践检查
自动生成周报。当用户说"写周报"、"生成本周总结"时触发。
| name | lan-hu-app |
| description | 蓝湖应用开发技能,用于构建和管理蓝湖相关的应用功能 |
| license | MIT |
| compatibility | opencode |
| metadata | {"audience":"developers","workflow":"development"} |
我可以帮助你:
技术栈:
当你需要:
方式一:通过 OpenCode Agent 保存
在 OpenCode 中告诉我你的账号密码,我会自动保存到配置文件:
请保存我的蓝湖配置:
账号:your@email.com
密码:yourpassword
Agent 会将配置保存到 .opencode/skills/lan-hu-app/config/credentials.json
方式二:手动编辑配置文件
直接编辑配置文件:
# 编辑配置文件
nano .opencode/skills/lan-hu-app/config/credentials.json
{
"lanhu": {
"email": "your@email.com",
"password": "yourpassword"
},
"outputDir": "./lanhu-export"
}
保存后设置文件权限:
chmod 600 .opencode/skills/lan-hu-app/config/credentials.json
# 进入脚本目录
cd .opencode/skills/lan-hu-app/scripts
# 首次使用需要安装依赖 (推荐使用 pnpm)
pnpm install # 如果没有 pnpm,请使用 bun install
# 安装 Playwright 浏览器(仅首次)
pnpm dlx playwright install chromium # 如果没有 pnpm,请使用 bunx playwright install chromium
# 登录蓝湖(会打开浏览器窗口)
pnpm run login your@email.com yourpassword # 如果没有 pnpm,请使用 bun run login.ts ...
# 或使用无头模式(后台运行)
pnpm run login your@email.com yourpassword true
登录成功后,状态会保存到 .opencode/skills/lan-hu-app/config/auth-state.json 文件中,后续操作将自动使用此状态,无需重复登录。
你可以直接导出蓝湖设计稿,包括设计图、CSS/HTML 代码和切图资源。
导出的文件结构如下:
design.png: 高清设计图index.html: 结构代码index.css: 样式代码common.css: 基础公共样式(自动拷贝)images/: 切图资源meta.json: 导出元数据通过命令行导出:
# 进入脚本目录
cd .opencode/skills/lan-hu-app/scripts
# 导出指定页面
pnpm run export "https://lanhuapp.com/web/#/item/board?pid=xxx&image_id=yyy"
# 强制更新已存在的资源
pnpm run export "URL" --force
# 指定输出目录
pnpm run export "URL" ./my-assets
通过 OpenCode Agent 导出:
在对话框中提供页面链接,我会自动帮你下载资源:
请帮我导出这个蓝湖页面:https://lanhuapp.com/web/#/item/board?pid=...
如果你只需要获取页面的 CSS 或 HTML 代码而不需要下载图片,可以使用提取样式功能。
通过命令行提取:
# 进入脚本目录
cd .opencode/skills/lan-hu-app/scripts
# 提取并打印样式 (JSON 格式输出)
pnpm run get-styles "URL"
通过 OpenCode Agent 提取:
请帮我提取这个蓝湖页面的样式代码:https://lanhuapp.com/...
import { login } from './.opencode/skills/lan-hu-app/scripts/login.ts'
import { LanhuExporter } from './.opencode/skills/lan-hu-app/scripts/export.ts'
// 使用配置登录
const result = await login({ email, password })
// 导出页面
const exporter = new LanhuExporter()
await exporter.export({ pageUrl: "..." })
.opencode/skills/lan-hu-app/
├── SKILL.md # 技能说明文档
├── config/ # 配置目录
│ ├── credentials.json # 账号密码配置
│ ├── auth-state.json # 浏览器登录状态
│ ├── credentials.json.template # 配置模板
│ └── README.md # 配置说明
└── scripts/ # 自动化脚本
├── login.ts # 登录脚本
├── save-config.ts # 保存配置脚本
├── export.ts # 页面导出脚本
├── get-styles.ts # 样式提取脚本
├── package.json # 依赖配置
└── README.md # 脚本使用说明
.opencode/skills/lan-hu-app/config/auth-state.json.gitignoreQ: 配置文件安全吗?
A: 配置文件和状态文件已设置权限为 600(仅所有者可读写),并已添加到 .gitignore,不会被提交到版本控制。
Q: 登录凭证保存在哪里?
A: 保存在 .opencode/skills/lan-hu-app/config/ 目录下:
credentials.json: 账号密码auth-state.json: 浏览器登录状态Q: 如何退出登录?
A: 删除 .opencode/skills/lan-hu-app/config/auth-state.json 文件即可清除登录状态。