semi-design-guide
Provides workflows and best practices for using the Semi Design React component library.
Install
mkdir -p .claude/skills/semi-design-guide && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/1981" && unzip -o skill.zip -d .claude/skills/semi-design-guide && rm skill.zipInstalls to .claude/skills/semi-design-guide
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
使用 Semi Design 组件的完整指南，包括 MCP 工具使用流程、常见模式、最佳实践。当你需要查询 Semi Design 组件、生成组件代码或解决使用问题时，请使用此技能。Key capabilities
- →Query Semi Design component documentation
- →Understand Semi Design component APIs
- →Generate component code
- →Apply Semi Design best practices
- →Troubleshoot component usage issues
How it works
This skill provides access to Semi Design component documentation, workflows for using the Semi MCP tool, and best practices for component usage. It guides users through querying components, viewing source code, and understanding function implementations.
Inputs & outputs
When to use semi-design-guide
- →Find component documentation
- →Generate UI component code
- →Apply component best practices
- →Customize themes
About this skill
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"]
}
}
}
Prerequisites
Limitations
- →Requires the Semi MCP tool
- →Limited to Semi Design components
How it compares
This skill provides structured guidance and tools specifically for the Semi Design component library, offering workflows and best practices beyond general UI component development.
Compared to similar skills
semi-design-guide side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| semi-design-guide (this skill) | 6 | 7mo | No flags | Beginner |
| screenshot-to-code | 204 | 2mo | No flags | Beginner |
| web-artifacts-builder | 49 | 3mo | Review | Intermediate |
| radix-ui-design-system | 33 | 2mo | Review | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
screenshot-to-code
OneWave-AI
Convert UI screenshots into working HTML/CSS/React/Vue code. Detects design patterns, components, and generates responsive layouts. Use this when users provide screenshots of websites, apps, or UI designs and want code implementation.
web-artifacts-builder
anthropics
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
radix-ui-design-system
sickn33
Build accessible design systems with Radix UI primitives. Headless component customization, theming strategies, and compound component patterns for production-grade UI libraries.
figma-integration
duongdev
Guides design-to-code workflow using Figma integration. Helps extract designs, analyze components, and generate implementation specs. Auto-activates when users mention Figma URLs, design implementation, component conversion, or design-to-code workflows. Works with /ccpm:planning:design-ui, design-approve, design-refine, and /ccpm:utils:figma-refresh commands.
3d-web-experience
davila7
Expert in building 3D experiences for the web - Three.js, React Three Fiber, Spline, WebGL, and interactive 3D scenes. Covers product configurators, 3D portfolios, immersive websites, and bringing depth to web experiences. Use when: 3D website, three.js, WebGL, react three fiber, 3D experience.
tamagui
tamagui
Universal React UI framework for web and native. Use when building cross-platform apps with Tamagui, creating styled components with `styled()`, configuring design tokens/themes, using Tamagui UI components, or working with animations. Triggers: "tamagui", "styled()", "$token", "XStack/YStack", "useTheme", "@tamagui/*" imports, "createStyledContext", "variants".