Skip to content

Commit 8d3e5b2

Browse files
committed
chore: 新增两个技能包示例
1 parent b8819cb commit 8d3e5b2

File tree

5 files changed

+23467
-0
lines changed

5 files changed

+23467
-0
lines changed
Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
---
2+
name: ant-design-knowledge-base
3+
description: Provides comprehensive answers about Ant Design components, documentation, and semantic descriptions using local knowledge base files. Use when asked about Ant Design, React UI components, design system, component semantics, or specific component usage.
4+
allowed-tools: Read, Grep, Glob
5+
---
6+
7+
# Ant Design Knowledge Base
8+
9+
## Overview
10+
11+
This skill provides access to local Ant Design documentation and semantic descriptions sourced from the official Ant Design website. The knowledge base includes:
12+
13+
1. **Component Documentation**: Links to all Ant Design component documentation pages
14+
2. **Design Resources**: Links to design specifications, values, patterns, and guidelines
15+
3. **Semantic Descriptions**: Detailed semantic descriptions of each component's CSS class structure (root, icon, title, etc.)
16+
17+
## Knowledge Base Files
18+
19+
The following files are available in the `knowledge-base/` directory:
20+
21+
- `llms.txt`: Contains documentation links and component overview
22+
- `llms-full.txt`: Contains detailed semantic descriptions of all Ant Design components
23+
24+
## How to Use This Knowledge Base
25+
26+
### Finding Information
27+
28+
When asked about Ant Design components, documentation, or semantics:
29+
30+
1. **Search for component names**: Use `Grep` to find relevant lines in the knowledge base files:
31+
```bash
32+
Grep("Button", "knowledge-base/llms.txt")
33+
Grep("button", "knowledge-base/llms-full.txt")
34+
```
35+
36+
2. **Read specific sections**: Use `Read` to view the full content or specific lines:
37+
```bash
38+
Read("knowledge-base/llms-full.txt", offset=40, limit=50) # Example for button component
39+
```
40+
41+
3. **Browse all components**: Use `Glob` to list available files:
42+
```bash
43+
Glob("knowledge-base/*.txt")
44+
```
45+
46+
### File Structure Details
47+
48+
#### `llms.txt` contains:
49+
- Introduction to Ant Design
50+
- Semantic descriptions link
51+
- Documentation links (Resources, Visualization, Design Values, etc.)
52+
- Component links (Affix through Watermark)
53+
54+
#### `llms-full.txt` contains:
55+
- Semantic descriptions for 64 Ant Design components
56+
- For each component: root element and sub-element descriptions with CSS styling purposes
57+
58+
### Common Queries
59+
60+
#### Component Questions
61+
When asked about a specific component (e.g., "Button", "Table", "Form"):
62+
1. Search for the component in both files:
63+
```bash
64+
Grep("button", "knowledge-base/llms.txt", -i)
65+
Grep("### button", "knowledge-base/llms-full.txt", -i)
66+
```
67+
2. Read the semantic description section for that component
68+
3. Provide the component's purpose, semantic elements, and documentation link
69+
70+
#### Documentation Questions
71+
When asked about design principles, values, or guidelines:
72+
1. Search for relevant terms in `llms.txt`:
73+
```bash
74+
Grep("Design Values", "knowledge-base/llms.txt")
75+
Grep("Visualization", "knowledge-base/llms.txt")
76+
```
77+
2. Provide the documentation links and summaries
78+
79+
#### Semantic Description Questions
80+
When asked about component structure or CSS classes:
81+
1. Find the component in `llms-full.txt`:
82+
```bash
83+
Grep("### button", "knowledge-base/llms-full.txt", -A 20)
84+
```
85+
2. Extract and explain the semantic elements (root, icon, title, etc.)
86+
3. Describe the styling purposes of each element
87+
88+
## Examples
89+
90+
### Example 1: Button Component Query
91+
**User**: "What are the semantic elements of the Ant Design Button component?"
92+
93+
**Approach**:
94+
1. Search for button in semantic descriptions:
95+
```bash
96+
Grep("### button", "knowledge-base/llms-full.txt", -A 10)
97+
```
98+
2. Read the button section:
99+
```bash
100+
Read("knowledge-base/llms-full.txt", offset=42, limit=8)
101+
```
102+
3. Present the root, content, and icon elements with their styling purposes.
103+
104+
### Example 2: Component Documentation Query
105+
**User**: "Where can I find documentation for Ant Design Table component?"
106+
107+
**Approach**:
108+
1. Search for Table in component links:
109+
```bash
110+
Grep("Table", "knowledge-base/llms.txt")
111+
```
112+
2. Provide the documentation URL and related resources.
113+
114+
### Example 3: Design Principles Query
115+
**User**: "What are the Ant Design design values?"
116+
117+
**Approach**:
118+
1. Search for Design Values link:
119+
```bash
120+
Grep("Design Values", "knowledge-base/llms.txt")
121+
```
122+
2. Provide the link and summary from the knowledge base.
123+
124+
## Notes
125+
126+
- The knowledge base is in Chinese for semantic descriptions, but component names are in English.
127+
- Some documentation links may require internet access to view full content.
128+
- The semantic descriptions are focused on CSS class structure and styling purposes.
129+
130+
## Skill Activation
131+
132+
This skill will automatically activate when questions include terms like:
133+
- "Ant Design"
134+
- "antd"
135+
- "React UI components"
136+
- "component semantics"
137+
- "design system"
138+
- Specific component names (Button, Table, Form, etc.)
139+
140+
When activated, Claude has permission to use Read, Grep, and Glob tools to access the knowledge base files in the `knowledge-base/` directory.

0 commit comments

Comments
 (0)