💻 开发与技术类技能
开发与技术类技能提供现代 Web 开发、自动化测试和服务器构建能力，帮助您高效构建和测试应用。
技能列表
Web Artifacts Builder（Web Artifacts 构建器）
构建复杂的 claude.ai HTML artifacts，使用现代前端技术栈。
核心能力:
- React + Tailwind CSS + shadcn/ui
- 完整的交互式应用
- 状态管理和数据持久化
适用场景:
- 快速原型开发
- 交互式演示
- 单页应用构建
MCP Builder（MCP 服务器构建器）
创建高质量的 Model Context Protocol (MCP) 服务器。
核心能力:
- 完整的 MCP 协议实现
- TypeScript + Python 支持
- 工具和资源集成
适用场景:
- 集成外部 API
- 扩展 Claude 能力
- 构建自定义服务
Webapp Testing（Web 应用测试）
使用 Playwright 进行本地 Web 应用的自动化测试。
核心能力:
- UI 验证和交互测试
- 截图和调试
- 完整的测试报告
适用场景:
- 功能测试
- 回归测试
- UI/UX 验证
技术栈
这些技能使用的主要技术：
前端框架:
- React 18+
- Vite
- TypeScript
样式和组件:
- Tailwind CSS
- shadcn/ui
- Lucide Icons
测试工具:
- Playwright
- Vitest
- Testing Library
后端和协议:
- MCP (Model Context Protocol)
- Node.js / Python
- WebSocket / SSE
快速开始
构建 Web 应用
// 使用 web-artifacts-builder 技能
"创建一个待办事项应用，使用 React 和 Tailwind"
创建 MCP 服务器
// 使用 mcp-builder 技能
"创建一个天气 API 的 MCP 服务器"
测试应用
// 使用 webapp-testing 技能
"测试本地运行的应用，验证登录功能"
工作流示例
完整的开发-测试流程
# 步骤 1: 使用 web-artifacts-builder 构建应用
"构建一个仪表板应用"
# 步骤 2: 本地运行应用
npm run dev
# 步骤 3: 使用 webapp-testing 测试
"测试仪表板的所有交互功能"
MCP 服务器开发
# 步骤 1: 使用 mcp-builder 创建服务器
"创建一个 GitHub API 的 MCP 服务器"
# 步骤 2: 实现工具
"添加创建 issue 的工具"
# 步骤 3: 测试集成
"测试服务器与 Claude 的集成"
相关资源
React 生态:
MCP 协议:
测试工具: