douyinfe/semi-design-guide
ecosystem/semi-ui-skills/SKILL.md
使用 Semi Design 组件的完整指南，包括 MCP 工具使用流程、常见模式、最佳实践。当你需要查询 Semi Design 组件、生成组件代码或解决使用问题时，请使用此技能。
$ install --global
skillsauthnpx skillsauth add douyinfe/semi-design semi-design-guideInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 15, 2026, 5:23 PM123.3s3 files scanned
SKILL.md
- name:
- semi-design-guide
- description:
- 使用 Semi Design 组件的完整指南，包括 MCP 工具使用流程、常见模式、最佳实践。当你需要查询 Semi Design 组件、生成组件代码或解决使用问题时，请使用此技能。
Semi Design 使用指南
此 Skill 帮助你高效使用 Semi Design 组件库完成常见开发任务。
文件说明
本 Skill 由以下文件组成，每个文件专注于特定方面的指导：
WORKFLOWS.md
内容：使用 Semi MCP 工具的完整工作流程。
包含：
- MCP 工具概览：介绍
get_semi_document、get_component_file_list、get_file_code、get_function_code四个工具的功能和使用场景 - 基础查询流程：查找组件 → 查询详情 → 查看源码 → 查看函数实现的四步走流程
- 完整任务示例：包含 Table 筛选、表单验证、级联选择器、拖拽排序等常见场景的详细步骤
- 常用查询技巧：指定版本查询、获取完整代码、错误排查流程等
何时使用：当你需要查询组件文档、了解组件 API、实现某个具体功能但不确定如何下手时。
BEST_PRACTICES.md
内容：使用 Semi Design 组件的最佳实践和注意事项。
包含：
- 组件引入方式：推荐直接 import 导入组件、图标、样式的方式
- 主题定制指南：引导 AI 查阅官方定制文档
- React 19 兼容性：说明如何获取 React 19 相关的组件使用说明
- 组件扩展方法：当 props 无法满足需求时，如何通过继承扩展 Semi 组件 和 修改组件内部UI
何时使用：当你需要确保代码符合最佳实践、解决组件使用中的疑难问题时。
快速导航
| 需求 | 查看 | |------|------| | 如何使用 MCP 工具查询组件 | WORKFLOWS.md | | 组件使用的最佳实践 | BEST_PRACTICES.md |
概述
Semi Design 是字节跳动推出的企业级 UI 组件库。此 Skill 配合 Semi MCP 工具使用，提供：
- 工作流：使用 MCP 工具查询组件、生成代码的完整流程
- 实践：避免常见陷阱的最佳实践
前置条件
使用此技能前，请确保已配置 Semi MCP：
{
"mcpServers": {
"semi-mcp": {
"command": "npx",
"args": ["-y", "@douyinfe/semi-mcp"]
}
}
}
Related Skills
openclaw/taskflow
tools
VerifiedTrustedCommunity
Use when work should span one or more detached tasks but still behave like one job with a single owner context. TaskFlow is the durable flow substrate under authoring layers like Lobster, ACPX, plugins, or plain code. Keep conditional logic in the caller; use TaskFlow for flow identity, child-task linkage, waiting state, revision-checked mutations, and user-facing emergence.
357,764SKILL.mdUpdated Apr 10, 2026
openclaw/extensions/lobster
tools
VerifiedTrustedCommunity
# Lobster Lobster executes multi-step workflows with approval checkpoints. Use it when: - User wants a repeatable automation (triage, monitor, sync) - Actions need human approval before executing (send, post, delete) - Multiple tool calls should run as one deterministic operation ## When to use Lobster | User intent | Use Lobster? | | ------------------------------------------------------ | --------------------------
357,764SKILL.mdUpdated Apr 10, 2026
steipete/extensions/lobster
tools
VerifiedTrustedCommunity
# Lobster Lobster executes multi-step workflows with approval checkpoints. Use it when: - User wants a repeatable automation (triage, monitor, sync) - Actions need human approval before executing (send, post, delete) - Multiple tool calls should run as one deterministic operation ## When to use Lobster | User intent | Use Lobster? | | ------------------------------------------------------ | --------------------------
357,588SKILL.mdUpdated Apr 13, 2026
steipete/xurl
tools
VerifiedTrustedCommunity
A CLI tool for making authenticated requests to the X (Twitter) API. Use this skill when you need to post tweets, reply, quote, search, read posts, manage followers, send DMs, upload media, or interact with any X API v2 endpoint.
356,423SKILL.mdUpdated Apr 13, 2026