skills.rest
DouyinFE
DouyinFEOFFICIAL
Explore all skills by this author →
GitHub

semi-design-guide

Query Semi Design components and customize themes with design tokens.

10.3k|837|Updated Oct 25, 2021
Search Tags:#ui components#component documentation#theme customization#code customization#semi design
One-click install
npx skills add https://github.com/DouyinFE/semi-design --skill semi-design-guide
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: semi-design-guide
Source: https://github.com/DouyinFE/semi-design/tree/main/ecosystem/semi-ui-skills
Command: npx skills add https://github.com/DouyinFE/semi-design --skill semi-design-guide

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This skill addresses the challenges of using Semi Design components effectively, including querying component details, customizing themes, and extending components to meet specific needs.

Core Features & Use Cases

  • Component Querying: Quickly find information on Semi Design components using the Semi MCP tool.
  • Theme Customization: Learn how to customize themes with design tokens and colors.
  • Component Extension: Extend default Semi Design components when needed.
  • Use Case: If you are a developer working with the Semi Design library and need to customize a component or find a specific piece of information, this skill is a valuable resource.

Quick Start

Use the semi-design-guide skill to retrieve the documentation for the 'Button' component from Semi Design.

Frequently Asked Questions about semi-design-guide

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I customize themes for Semi Design UI components?▼

Customize Semi Design themes by modifying design tokens and colors. This skill provides comprehensive guidance on adjusting these variables to align with your specific visual requirements.

What is the best way to query Semi Design component documentation?▼

Query Semi Design component documentation using the Semi MCP tool. It offers a direct path to retrieve detailed information and best practices for any UI component in the library.

Can I extend default Semi Design components for specific needs?▼

Yes, you can extend default Semi Design components. This skill explains component extension methods to help you adapt default UI elements to meet specific project requirements.

Does the Semi Design guide support code customization?▼

Yes, Semi Design supports code customization. The skill provides best practices for working with the UI component library, including detailed component querying and theme customization options.

How do I get started using Semi Design components in my project?▼

Start using Semi Design components by retrieving specific component documentation, such as the Button component, through this skill to understand its properties and implementation best practices.

Related Skills

Explore More Software Engineering Skills→
yuheitomiyuheitomi

set-up-biome

Configure Biome and Shadcn/UI preferences in React projects with pnpm.

Community
Advanced
yolo-labs-hqyolo-labs-hq

frontend-design

Generate production-ready frontend components and pages with HTML/CSS/JS.

Official
Advanced
cuiosscuioss
1

cui-javascript-linting

Configure ESLint, Prettier, and StyleLint for JavaScript projects.

Community
Advanced
ggombeeggombee
13

ant-design

Guide Ant Design component implementation, theme customization, and form and table patterns in React applications.

Community
Intermediate