semi-design-guide

Semi Design Usage Guide

This Skill helps you efficiently use the Semi Design component library to complete common development tasks.

File Descriptions

This Skill consists of the following files, each focusing on guidance for a specific aspect:

WORKFLOWS.md

Content: The complete workflow for using Semi MCP tools.

Includes：

• MCP tool overview: introduces the get_semi_document、get_component_file_list、get_file_code、get_function_code functions and usage scenarios of the four tools
• Basic query workflow: the four-step process of finding a component -> querying details -> viewing source code -> viewing function implementations
• Complete task examples: detailed steps for common scenarios such as Table filtering, form validation, cascading selectors, and drag-and-drop sorting
• Common query techniques: specifying a version for queries, obtaining complete code, troubleshooting workflows, etc.

When to use: when you need to look up component documentation, understand component APIs, or implement a specific feature but are unsure how to start.

BEST_PRACTICES.md

Content: best practices and considerations for using Semi Design components.

Includes：

• Component import methods: recommended ways to directly import components, icons, and styles
• Theme customization guide: guides AI to consult the official customization documentation
• React 19 compatibility: explains how to obtain component usage instructions related to React 19
• Component extension methods: when props cannot meet requirements, how to extend Semi components through inheritance and modify the component's internal UI

When to use: when you need to ensure code follows best practices or resolve difficult issues in component usage.

Quick Navigation

Requirement	View
How to use MCP tools to query components	WORKFLOWS.md
Best practices for component usage	BEST_PRACTICES.md

Overview

Semi Design is an enterprise-level UI component library launched by ByteDance. This Skill works with the Semi MCP tool and provides:

• Workflow: the complete process for using MCP tools to query components and generate code
• Practice: best practices for avoiding common pitfalls

Prerequisites

Before using this skill, please ensure that Semi MCP has been configured:

{
  "mcpServers": {
    "semi-mcp": {
      "command": "npx",
      "args": ["-y", "@douyinfe/semi-mcp"]
    }
  }
}